diff --git a/ui/litellm-dashboard/src/components/templates/key_info_view.test.tsx b/ui/litellm-dashboard/src/components/templates/key_info_view.test.tsx
index 7817d4e7cea..2181079e9ce 100644
--- a/ui/litellm-dashboard/src/components/templates/key_info_view.test.tsx
+++ b/ui/litellm-dashboard/src/components/templates/key_info_view.test.tsx
@@ -638,6 +638,13 @@ describe("KeyInfoView", () => {
       await userEvent.click(screen.getByRole("tab", { name: /settings/i }));
     };
 
+    it("should render the settings panel as a bounded scroll container", async () => {
+      await renderAndOpenSettingsTab();
+
+      const settingsCard = screen.getByRole("heading", { name: /key settings/i }).closest("[data-slot='card']");
+      expect(settingsCard).toHaveClass("overflow-y-auto", "max-h-[65vh]");
+    });
+
     it("should show the Edit Settings button when the user is a proxy admin for a key they do not own", async () => {
       vi.mocked(useAuthorized).mockReturnValue({
         ...baseUseAuthorizedMock,
diff --git a/ui/litellm-dashboard/src/components/templates/key_info_view.tsx b/ui/litellm-dashboard/src/components/templates/key_info_view.tsx
index 0be80c3e173..4a571f0ca5d 100644
--- a/ui/litellm-dashboard/src/components/templates/key_info_view.tsx
+++ b/ui/litellm-dashboard/src/components/templates/key_info_view.tsx
@@ -766,7 +766,7 @@ export default function KeyInfoView({
 
           {/* Settings Panel */}
           <TabsContent value="settings" keepMounted>
-            <Card className="block p-6">
+            <Card className="block p-6 overflow-y-auto max-h-[65vh]">
               <div className="flex justify-between items-center mb-4">
                 <h3 className="text-lg font-medium">Key Settings</h3>
                 {!isEditing && canModifyKey && (