converted action buttons to sticky footer action buttons (#11293)

Author: NANDINI-star

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>
   );

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) && (

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>
               ) : (

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>
               ) : (