fix(web): mobile overflow in settings panels

- 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.

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">
+                <div className="flex items-center gap-2 min-w-0">
-                  <CardTitle className="text-base">{provider.name}</CardTitle>
+                  <CardTitle className="text-base truncate">
-                  <Badge variant="outline" className="text-xs">
+                    {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"

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,
       )}
     >