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.
This commit is contained in:
Nikhil-Doye
2025-10-19 00:48:24 -04:00
parent 011a135ee6
commit 85939b645c
+4 -4
View File
@@ -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"