From b04c4da12eaeae6a1f6573505e5817f9a87fbb81 Mon Sep 17 00:00:00 2001
From: Ishaan Jaff <ishaanjaffer0324@gmail.com>
Date: Tue, 9 Jul 2024 15:57:53 -0700
Subject: [PATCH] fix allowed ip screen

---
 .../src/components/admins.tsx                 | 48 +++++++++++--------
 1 file changed, 28 insertions(+), 20 deletions(-)

diff --git a/ui/litellm-dashboard/src/components/admins.tsx b/ui/litellm-dashboard/src/components/admins.tsx
index 85b5dc3d4e..585111fd49 100644
--- a/ui/litellm-dashboard/src/components/admins.tsx
+++ b/ui/litellm-dashboard/src/components/admins.tsx
@@ -723,25 +723,25 @@ const AdminPanel: React.FC<AdminPanelProps> = ({
           ]}
         >
           <Table>
-            <TableHead>
-              <TableRow>
-                <TableHeaderCell>IP Address</TableHeaderCell>
-                <TableHeaderCell>Action</TableHeaderCell>
-              </TableRow>
-            </TableHead>
-            <TableBody>
-              {allowedIPs.map((ip, index) => (
-                <TableRow key={index}>
-                  <TableCell>{ip}</TableCell>
-                  <TableCell>
-                    <Button onClick={() => handleDeleteIP(ip)} color="red">
-                      Delete
-                    </Button>
-                  </TableCell>
-                </TableRow>
-              ))}
-            </TableBody>
-          </Table>
+  <TableHead>
+    <TableRow>
+      <TableHeaderCell>IP Address</TableHeaderCell>
+      <TableHeaderCell className="text-right">Action</TableHeaderCell>
+    </TableRow>
+  </TableHead>
+  <TableBody>
+    {allowedIPs.map((ip, index) => (
+      <TableRow key={index}>
+        <TableCell>{ip}</TableCell>
+        <TableCell className="text-right">
+          <Button onClick={() => handleDeleteIP(ip)} color="red" size="xs">
+            Delete
+          </Button>
+        </TableCell>
+      </TableRow>
+    ))}
+  </TableBody>
+</Table>
         </Modal>
 
         <Modal
@@ -768,8 +768,16 @@ const AdminPanel: React.FC<AdminPanelProps> = ({
         <Modal
           title="Confirm Delete"
           visible={isDeleteIPModalVisible}
-          onOk={confirmDeleteIP}
           onCancel={() => setIsDeleteIPModalVisible(false)}
+          onOk={confirmDeleteIP}
+          footer={[
+            <Button className="mx-1"key="delete" onClick={() => confirmDeleteIP()}>
+              Yes
+            </Button>,
+            <Button key="close" onClick={() => setIsDeleteIPModalVisible(false)}>
+              Close
+            </Button>
+          ]}
         >
           <p>Are you sure you want to delete the IP address: {ipToDelete}?</p>
         </Modal>