From 876e8bf80475e375eacbdddb99b9c2cb907f2fd3 Mon Sep 17 00:00:00 2001
From: RockChinQ <rockchinq@gmail.com>
Date: Sun, 21 Jun 2026 12:48:18 -0400
Subject: [PATCH] fix(web): mobile overflow in settings panels
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- PanelToolbar: allow wrapping and tighten padding on small screens so the
  primary action (e.g. "创建 API 密钥") no longer runs off the dialog edge.
- ProviderCard header: let the provider name truncate and pin the model-count
  badge and right-side action group with shrink-0 so credits / + controls stay
  inside the card on narrow viewports.
---
 .../models-dialog/components/ProviderCard.tsx          | 10 ++++++----
 .../home/components/settings-dialog/panel-layout.tsx   |  2 +-
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/web/src/app/home/components/models-dialog/components/ProviderCard.tsx b/web/src/app/home/components/models-dialog/components/ProviderCard.tsx
index 172ab3752..a3ec99624 100644
--- a/web/src/app/home/components/models-dialog/components/ProviderCard.tsx
+++ b/web/src/app/home/components/models-dialog/components/ProviderCard.tsx
@@ -171,9 +171,11 @@ export default function ProviderCard({
                 />
               )}
               <div className="flex-1 min-w-0">
-                <div className="flex items-center gap-2">
-                  <CardTitle className="text-base">{provider.name}</CardTitle>
-                  <Badge variant="outline" className="text-xs">
+                <div className="flex items-center gap-2 min-w-0">
+                  <CardTitle className="text-base truncate">
+                    {provider.name}
+                  </CardTitle>
+                  <Badge variant="outline" className="text-xs shrink-0">
                     {t('models.modelsCount', { count: totalModels })}
                   </Badge>
                 </div>
@@ -193,7 +195,7 @@ export default function ProviderCard({
                 </p>
               </div>
             </div>
-            <div className="flex items-center gap-1 ml-2">
+            <div className="flex items-center gap-1 ml-2 shrink-0">
               {isLangBotModels && accountType !== 'space' && (
                 <Button
                   variant="outline"
diff --git a/web/src/app/home/components/settings-dialog/panel-layout.tsx b/web/src/app/home/components/settings-dialog/panel-layout.tsx
index 8654eb460..6f3a797ba 100644
--- a/web/src/app/home/components/settings-dialog/panel-layout.tsx
+++ b/web/src/app/home/components/settings-dialog/panel-layout.tsx
@@ -21,7 +21,7 @@ export function PanelToolbar({
   return (
     <div
       className={cn(
-        'flex shrink-0 items-center justify-between gap-3 border-b px-6 py-3',
+        'flex shrink-0 flex-wrap items-center justify-between gap-2 border-b px-3 py-3 sm:gap-3 sm:px-6',
         className,
       )}
     >