From 7155e157da71103fb95cf783065e588dbdacc43c Mon Sep 17 00:00:00 2001
From: tanjiro <56165694+NANDINI-star@users.noreply.github.com>
Date: Mon, 2 Jun 2025 23:50:12 +0900
Subject: [PATCH] converted action buttons to sticky footer action buttons
 (#11293)

---
 .../src/components/key_edit_view.tsx          | 20 ++++++++++--------
 .../src/components/key_info_view.tsx          |  4 ++--
 .../organization/organization_view.tsx        | 18 +++++++++-------
 .../src/components/team/team_info.tsx         | 21 ++++++++++---------
 4 files changed, 34 insertions(+), 29 deletions(-)

diff --git a/ui/litellm-dashboard/src/components/key_edit_view.tsx b/ui/litellm-dashboard/src/components/key_edit_view.tsx
index 4ec3abdc99..959ce0362f 100644
--- a/ui/litellm-dashboard/src/components/key_edit_view.tsx
+++ b/ui/litellm-dashboard/src/components/key_edit_view.tsx
@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from "react";
-import { Form, Input, Select } from "antd";
-import { Button, TextInput } from "@tremor/react";
+import { Form, Input, Select, Button as AntdButton } from "antd";
+import { Button as TremorButton, TextInput } from "@tremor/react";
 import { KeyResponse } from "./key_team_helpers/key_list";
 import { fetchTeamModels } from "../components/create_key_button";
 import { modelAvailableCall } from "./networking";
@@ -203,13 +203,15 @@ export function KeyEditView({
         <Input />
       </Form.Item>
 
-      <div className="flex justify-end gap-2 mt-6">
-        <Button variant="light" onClick={onCancel}>
-          Cancel
-        </Button>
-        <Button>
-          Save Changes
-        </Button>
+      <div className="sticky z-10 bg-white p-4 border-t border-gray-200 bottom-[-1.5rem] inset-x-[-1.5rem]">
+        <div className="flex justify-end items-center gap-2">
+          <AntdButton onClick={onCancel}>
+            Cancel
+          </AntdButton>
+          <TremorButton type="submit">
+            Save Changes
+          </TremorButton>
+        </div>
       </div>
     </Form>
   );
diff --git a/ui/litellm-dashboard/src/components/key_info_view.tsx b/ui/litellm-dashboard/src/components/key_info_view.tsx
index 0a5577badc..4154c61611 100644
--- a/ui/litellm-dashboard/src/components/key_info_view.tsx
+++ b/ui/litellm-dashboard/src/components/key_info_view.tsx
@@ -134,7 +134,7 @@ export default function KeyInfoView({ keyId, onClose, keyData, accessToken, user
   };
 
   return (
-    <div className="p-4">
+    <div className="w-full h-screen p-4">
       <div className="flex justify-between items-center mb-6">
         <div>
           <Button 
@@ -273,7 +273,7 @@ export default function KeyInfoView({ keyId, onClose, keyData, accessToken, user
 
           {/* Settings Panel */}
           <TabPanel>
-            <Card>
+            <Card className="overflow-y-auto max-h-[65vh]">
               <div className="flex justify-between items-center mb-4">
                 <Title>Key Settings</Title>
                 {!isEditing && userRole && rolesWithWriteAccess.includes(userRole) && (
diff --git a/ui/litellm-dashboard/src/components/organization/organization_view.tsx b/ui/litellm-dashboard/src/components/organization/organization_view.tsx
index b80634b35e..902742b1f8 100644
--- a/ui/litellm-dashboard/src/components/organization/organization_view.tsx
+++ b/ui/litellm-dashboard/src/components/organization/organization_view.tsx
@@ -338,7 +338,7 @@ const OrganizationInfoView: React.FC<OrganizationInfoProps> = ({
 
           {/* Settings Panel */}
           <TabPanel>
-            <Card>
+            <Card className="overflow-y-auto max-h-[65vh]">
               <div className="flex justify-between items-center mb-4">
                 <Title>Organization Settings</Title>
                 {(canEditOrg && !isEditing) && (
@@ -423,13 +423,15 @@ const OrganizationInfoView: React.FC<OrganizationInfoProps> = ({
                     <Input.TextArea rows={4} />
                   </Form.Item>
 
-                  <div className="flex justify-end gap-2 mt-6">
-                    <Button onClick={() => setIsEditing(false)}>
-                      Cancel
-                    </Button>
-                    <TremorButton type="submit">
-                      Save Changes
-                    </TremorButton>
+                  <div className="sticky z-10 bg-white p-4 border-t border-gray-200 bottom-[-1.5rem] inset-x-[-1.5rem]">
+                    <div className="flex justify-end items-center gap-2">
+                      <Button onClick={() => setIsEditing(false)}>
+                        Cancel
+                      </Button>
+                      <TremorButton type="submit">
+                        Save Changes
+                      </TremorButton>
+                    </div>
                   </div>
                 </Form>
               ) : (
diff --git a/ui/litellm-dashboard/src/components/team/team_info.tsx b/ui/litellm-dashboard/src/components/team/team_info.tsx
index eebb4b8801..084f58065e 100644
--- a/ui/litellm-dashboard/src/components/team/team_info.tsx
+++ b/ui/litellm-dashboard/src/components/team/team_info.tsx
@@ -358,7 +358,7 @@ const TeamInfoView: React.FC<TeamInfoProps> = ({
 
           {/* Settings Panel */}
           <TabPanel>
-            <Card>
+            <Card className="overflow-y-auto max-h-[65vh]">
               <div className="flex justify-between items-center mb-4">
                 <Title>Team Settings</Title>
                 {(canEditTeam && !isEditing) && (
@@ -474,15 +474,16 @@ const TeamInfoView: React.FC<TeamInfoProps> = ({
                   <Form.Item label="Metadata" name="metadata">
                     <Input.TextArea rows={10} />
                   </Form.Item>
-
-
-                  <div className="flex justify-end gap-2 mt-6">
-                    <Button onClick={() => setIsEditing(false)}>
-                      Cancel
-                    </Button>
-                    <TremorButton>
-                      Save Changes
-                    </TremorButton>
+                  
+                  <div className="sticky z-10 bg-white p-4 border-t border-gray-200 bottom-[-1.5rem] inset-x-[-1.5rem]">
+                    <div className="flex justify-end items-center gap-2">
+                      <Button htmlType="button" onClick={() => setIsEditing(false)}>
+                        Cancel
+                      </Button>
+                      <TremorButton type="submit">
+                        Save Changes
+                      </TremorButton>
+                    </div>
                   </div>
                 </Form>
               ) : (