From 7d4a70bfe35a9c7d6325b6b9feb7547990b5ff11 Mon Sep 17 00:00:00 2001
From: Cole McIntosh <colemcintosh6@gmail.com>
Date: Wed, 4 Jun 2025 13:32:43 -0600
Subject: [PATCH] Enhance Admin Panel UI: Adjust button styles and layout for
 better accessibility and user experience

---
 ui/litellm-dashboard/src/components/admins.tsx | 16 +++++++++++++---
 1 file changed, 13 insertions(+), 3 deletions(-)

diff --git a/ui/litellm-dashboard/src/components/admins.tsx b/ui/litellm-dashboard/src/components/admins.tsx
index 2ea3e74bcbf..bf36ffe35cf 100644
--- a/ui/litellm-dashboard/src/components/admins.tsx
+++ b/ui/litellm-dashboard/src/components/admins.tsx
@@ -534,12 +534,22 @@ const AdminPanel: React.FC<AdminPanelProps> = ({
           <TabPanel>
             <Card>
               <Title level={4}> ✨ Security Settings</Title>
-              <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem', marginTop: '1rem' }}>
+              <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem', marginTop: '1rem', marginLeft: '0.5rem' }}>
                 <div>
-                  <Button onClick={() => premiumUser === true ? setIsAddSSOModalVisible(true) : message.error("Only premium users can add SSO")}>Add SSO</Button>
+                  <Button 
+                    style={{ width: '150px' }}
+                    onClick={() => premiumUser === true ? setIsAddSSOModalVisible(true) : message.error("Only premium users can add SSO")}
+                  >
+                    Add SSO
+                  </Button>
                 </div>
                 <div>
-                  <Button onClick={handleShowAllowedIPs}>Allowed IPs</Button>
+                  <Button 
+                    style={{ width: '150px' }}
+                    onClick={handleShowAllowedIPs}
+                  >
+                    Allowed IPs
+                  </Button>
                 </div>
               </div>
             </Card>