From 85939b645c4e5fe9419330a7db559f78315affd0 Mon Sep 17 00:00:00 2001
From: Nikhil-Doye <nikhil.doye@gmail.com>
Date: Sun, 19 Oct 2025 00:48:24 -0400
Subject: [PATCH] Update ApiKeysSettings component layout and styling

- Adjusted padding and height properties for the modal to improve visual consistency and usability.
- Enhanced the layout structure by adding flex properties to ensure better responsiveness and organization of content.
- Updated overflow handling to optimize the display of API key configurations within the modal.
---
 src/components/ApiKeysSettings.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/ApiKeysSettings.tsx b/src/components/ApiKeysSettings.tsx
index 828beef..4ea3051 100644
--- a/src/components/ApiKeysSettings.tsx
+++ b/src/components/ApiKeysSettings.tsx
@@ -151,8 +151,8 @@ export const ApiKeysSettings: React.FC<ApiKeysSettingsProps> = ({
   };
 
   return (
-    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
-      <div className="bg-white rounded-lg shadow-xl w-full max-w-4xl max-h-[90vh] overflow-hidden">
+    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
+      <div className="bg-white rounded-lg shadow-xl w-full max-w-4xl max-h-[95vh] overflow-hidden flex flex-col">
         <div className="flex items-center justify-between p-6 border-b border-gray-200">
           <div className="flex items-center space-x-3">
             <Key className="w-6 h-6 text-blue-600" />
@@ -168,7 +168,7 @@ export const ApiKeysSettings: React.FC<ApiKeysSettingsProps> = ({
           </button>
         </div>
 
-        <div className="p-6 overflow-y-auto max-h-[calc(90vh-120px)]">
+        <div className="flex-1 p-6 overflow-y-auto">
           <div className="space-y-8">
             {/* Pinecone Configuration */}
             <div className="border border-gray-200 rounded-lg p-6">
@@ -306,7 +306,7 @@ export const ApiKeysSettings: React.FC<ApiKeysSettingsProps> = ({
           </div>
         </div>
 
-        <div className="flex justify-between items-center p-6 border-t border-gray-200 bg-gray-50">
+        <div className="flex justify-between items-center p-6 border-t border-gray-200 bg-gray-50 flex-shrink-0">
           <button
             onClick={handleClear}
             className="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50 transition-colors"