From 9ea5b50802ffb92c2ef63dd1d41dccd9f78e88a5 Mon Sep 17 00:00:00 2001
From: Junyan Qin <rockchinq@gmail.com>
Date: Mon, 5 Jan 2026 17:58:01 +0800
Subject: [PATCH] refactor: enhance layout and styling of ModelsDialog
 component for improved usability

---
 .../components/models-dialog/ModelsDialog.tsx | 32 ++++++++-----------
 1 file changed, 14 insertions(+), 18 deletions(-)

diff --git a/web/src/app/home/components/models-dialog/ModelsDialog.tsx b/web/src/app/home/components/models-dialog/ModelsDialog.tsx
index c860c9a8..2b37b031 100644
--- a/web/src/app/home/components/models-dialog/ModelsDialog.tsx
+++ b/web/src/app/home/components/models-dialog/ModelsDialog.tsx
@@ -429,18 +429,16 @@ export default function ModelsDialog({
         }}
       >
         <DialogContent className="overflow-hidden p-0 h-[80vh] flex flex-col !max-w-[37rem]">
-          <DialogHeader className="px-6 pt-6 pb-0">
+          <DialogHeader className="px-6 pt-6 pb-0 flex-shrink-0">
             <DialogTitle>{t('models.title')}</DialogTitle>
           </DialogHeader>
 
-          <div className="flex-1 flex flex-col overflow-hidden px-6 pb-6 mt-0">
-            {/* Fixed LangBot Models Card */}
-            <div className="flex-shrink-0">
-              {langbotProvider && renderProviderCard(langbotProvider, true)}
-            </div>
+          <div className="flex-1 overflow-auto px-6 pb-6 mt-0">
+            {/* LangBot Models Card */}
+            {langbotProvider && renderProviderCard(langbotProvider, true)}
 
             {/* Add Provider Button */}
-            <div className="flex-shrink-0 mb-3 flex justify-between items-center">
+            <div className="mb-3 flex justify-between items-center sticky top-0 bg-background py-2 z-10">
               <span className="text-sm text-muted-foreground">
                 {otherProviders.length === 0
                   ? t(
@@ -460,17 +458,15 @@ export default function ModelsDialog({
               </Button>
             </div>
 
-            {/* Scrollable Provider List */}
-            <div className="flex-1 overflow-auto">
-              {otherProviders.length === 0 ? (
-                <div className="flex flex-col items-center justify-center h-full text-muted-foreground">
-                  <Boxes className="h-12 w-12 mb-3 opacity-50" />
-                  <p className="text-sm">{t('models.noProviders')}</p>
-                </div>
-              ) : (
-                otherProviders.map((p) => renderProviderCard(p))
-              )}
-            </div>
+            {/* Provider List */}
+            {otherProviders.length === 0 ? (
+              <div className="flex flex-col items-center justify-center py-12 text-muted-foreground">
+                <Boxes className="h-12 w-12 mb-3 opacity-50" />
+                <p className="text-sm">{t('models.noProviders')}</p>
+              </div>
+            ) : (
+              otherProviders.map((p) => renderProviderCard(p))
+            )}
           </div>
         </DialogContent>
       </Dialog>