From 4c517d1173c071f6b5955ab1b9a86c1e0d1fa019 Mon Sep 17 00:00:00 2001
From: Menci <mencici@msn.com>
Date: Wed, 29 Jul 2026 00:10:06 +0800
Subject: [PATCH] fix(web): floor every dashboard page region at zero width
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Each route wraps its content in a single-column grid marked min-w-0, which
lets the region itself shrink but leaves its column at `auto` — and an
auto column grows to the widest child's min-content. One long error
message bar was enough to push a page past the viewport, taking its
header and its primary action off screen with it.

The wrapper becomes a `dashboard-page` shortcut that pins the column to
`minmax(0, 1fr)`, so the region stays the viewport's width and the message
bar wraps onto a second line instead.
---
 apps/web/src/routes/dashboard-admin-backup-restore.tsx    | 4 ++--
 apps/web/src/routes/dashboard-admin-users.tsx             | 2 +-
 apps/web/src/routes/dashboard-monitor-performance.tsx     | 2 +-
 apps/web/src/routes/dashboard-monitor-usage.tsx           | 2 +-
 apps/web/src/routes/dashboard-providers-model-aliases.tsx | 4 ++--
 apps/web/src/routes/dashboard-providers-proxy.tsx         | 6 +++---
 apps/web/src/routes/dashboard-providers-search.tsx        | 4 ++--
 apps/web/src/routes/dashboard-providers-upstreams.tsx     | 2 +-
 apps/web/src/routes/dashboard-services-api-docs.tsx       | 2 +-
 apps/web/src/routes/dashboard-services-api-keys.tsx       | 2 +-
 apps/web/src/routes/dashboard-settings.tsx                | 2 +-
 apps/web/uno.config.ts                                    | 5 +++++
 12 files changed, 21 insertions(+), 16 deletions(-)

diff --git a/apps/web/src/routes/dashboard-admin-backup-restore.tsx b/apps/web/src/routes/dashboard-admin-backup-restore.tsx
index 55c7da27f..2adb17b46 100644
--- a/apps/web/src/routes/dashboard-admin-backup-restore.tsx
+++ b/apps/web/src/routes/dashboard-admin-backup-restore.tsx
@@ -295,7 +295,7 @@ export default function DashboardAdminBackupRestore() {
 
   if (!user.isAdmin) {
     return (
-      <section className="grid gap-[18px] max-w-[960px] min-w-0">
+      <section className="dashboard-page max-w-[960px]">
         <DashboardPageHeader eyebrow={t('dashboard.groups.admin')} title={t('dashboard.backupRestore.heading')} />
         <AdminOnlyNotice />
       </section>
@@ -303,7 +303,7 @@ export default function DashboardAdminBackupRestore() {
   }
 
   return (
-    <section className="grid gap-[18px] max-w-[960px] min-w-0">
+    <section className="dashboard-page max-w-[960px]">
       <DashboardPageHeader eyebrow={t('dashboard.groups.admin')} title={t('dashboard.backupRestore.heading')} />
 
       <Panel className="!p-[22px_24px] grid gap-[16px]">
diff --git a/apps/web/src/routes/dashboard-admin-users.tsx b/apps/web/src/routes/dashboard-admin-users.tsx
index 0096953dd..e0f092c1b 100644
--- a/apps/web/src/routes/dashboard-admin-users.tsx
+++ b/apps/web/src/routes/dashboard-admin-users.tsx
@@ -147,7 +147,7 @@ export default function DashboardAdminUsers({ loaderData }: Route.ComponentProps
   };
 
   return (
-    <div className="grid gap-[18px] min-w-0">
+    <div className="dashboard-page">
       <DashboardPageHeader
         actions={<>
           <Tooltip content={t('dashboard.users.actions.refresh')} relationship="label">
diff --git a/apps/web/src/routes/dashboard-monitor-performance.tsx b/apps/web/src/routes/dashboard-monitor-performance.tsx
index a1634a94b..894302918 100644
--- a/apps/web/src/routes/dashboard-monitor-performance.tsx
+++ b/apps/web/src/routes/dashboard-monitor-performance.tsx
@@ -184,7 +184,7 @@ export default function DashboardMonitorPerformance({ loaderData }: Route.Compon
     .filter(key => key !== 'userId' || view === 'all-by-user')
     .map(key => ({ key, rows: overview.axes[key] }));
 
-  return <section className="grid gap-[18px] min-w-0">
+  return <section className="dashboard-page">
     <DashboardPageHeader
       actions={<>
         <Tooltip content={t('dashboard.performance.actions.refresh')} relationship="label"><Button appearance="subtle" disabled={loading} icon={<ArrowClockwiseRegular />} onClick={() => void refresh()} /></Tooltip>
diff --git a/apps/web/src/routes/dashboard-monitor-usage.tsx b/apps/web/src/routes/dashboard-monitor-usage.tsx
index 1a1c362d7..bf4350bf8 100644
--- a/apps/web/src/routes/dashboard-monitor-usage.tsx
+++ b/apps/web/src/routes/dashboard-monitor-usage.tsx
@@ -213,7 +213,7 @@ export default function DashboardMonitorUsage({ loaderData }: Route.ComponentPro
       : t('dashboard.usage.charts.byKey');
 
   return (
-    <section className="grid gap-[18px] min-w-0">
+    <section className="dashboard-page">
       <DashboardPageHeader
         actions={<>
           <Tooltip
diff --git a/apps/web/src/routes/dashboard-providers-model-aliases.tsx b/apps/web/src/routes/dashboard-providers-model-aliases.tsx
index 723ee9394..d0e54ddc1 100644
--- a/apps/web/src/routes/dashboard-providers-model-aliases.tsx
+++ b/apps/web/src/routes/dashboard-providers-model-aliases.tsx
@@ -69,7 +69,7 @@ export default function DashboardProvidersModelAliases({ loaderData }: Route.Com
   }, [catalog]);
 
   const header = <DashboardPageHeader description={t('dashboard.modelAliases.description')} eyebrow={t('dashboard.groups.providers')} title={t('dashboard.modelAliases.heading')} />;
-  if (!user.isAdmin) return <section className="grid gap-[18px] max-w-[960px]">{header}<AdminOnlyNotice /></section>;
+  if (!user.isAdmin) return <section className="dashboard-page max-w-[960px]">{header}<AdminOnlyNotice /></section>;
 
   const openCreate = () => { setEditing(null); setDialogOpen(true); };
   const openEdit = (alias: ModelAlias) => { setEditing(alias); setDialogOpen(true); };
@@ -89,7 +89,7 @@ export default function DashboardProvidersModelAliases({ loaderData }: Route.Com
     setMutating(false);
   };
 
-  return <section className="grid gap-[18px] max-w-[1120px] min-w-0">
+  return <section className="dashboard-page max-w-[1120px]">
     {header}
     {error && <MessageBar intent="error"><MessageBarBody>{t('dashboard.modelAliases.errors.message', { message: error })}</MessageBarBody></MessageBar>}
     {modelsError && <MessageBar intent="warning"><MessageBarBody>{t('dashboard.modelAliases.errors.models', { message: modelsError })}</MessageBarBody></MessageBar>}
diff --git a/apps/web/src/routes/dashboard-providers-proxy.tsx b/apps/web/src/routes/dashboard-providers-proxy.tsx
index f89f5fd15..f882bce18 100644
--- a/apps/web/src/routes/dashboard-providers-proxy.tsx
+++ b/apps/web/src/routes/dashboard-providers-proxy.tsx
@@ -266,7 +266,7 @@ export default function DashboardProvidersProxy({ loaderData }: Route.ComponentP
 
   if (!user.isAdmin) {
     return (
-      <section className="grid gap-[18px] min-w-0">
+      <section className="dashboard-page">
         <DashboardPageHeader description={t('dashboard.proxy.description')} eyebrow={t('dashboard.groups.providers')} title={t('dashboard.proxy.heading')} />
         <AdminOnlyNotice />
       </section>
@@ -274,7 +274,7 @@ export default function DashboardProvidersProxy({ loaderData }: Route.ComponentP
   }
 
   return (
-    <section className="grid gap-[18px] min-w-0">
+    <section className="dashboard-page">
       <DashboardPageHeader description={t('dashboard.proxy.description')} eyebrow={t('dashboard.groups.providers')} title={t('dashboard.proxy.heading')} />
 
       {loadError && (
@@ -296,7 +296,7 @@ export default function DashboardProvidersProxy({ loaderData }: Route.ComponentP
               <Button className="w-fit" onClick={() => void refreshProxies()}>{t('dashboard.proxy.actions.refresh')}</Button>
             </Panel>
           : <ProxyList proxies={proxies} onAdd={() => clearForm()} onDelete={setDeleteTarget} onEdit={handleEdit} onRefresh={() => void refreshProxies()} />}
-        <div className="grid gap-[18px] min-w-0">
+        <div className="dashboard-page">
           {editingId !== null && <ProxyBackoffPanel
             backoffs={backoffs}
             onReset={() => void refreshProxies()}
diff --git a/apps/web/src/routes/dashboard-providers-search.tsx b/apps/web/src/routes/dashboard-providers-search.tsx
index 9d6694637..0fb678917 100644
--- a/apps/web/src/routes/dashboard-providers-search.tsx
+++ b/apps/web/src/routes/dashboard-providers-search.tsx
@@ -234,7 +234,7 @@ export default function DashboardProvidersSearch({ loaderData }: Route.Component
 
   if (!user.isAdmin) {
     return (
-      <section className="grid gap-[18px] max-w-[960px] min-w-0">
+      <section className="dashboard-page max-w-[960px]">
         <DashboardPageHeader
           description={t('dashboard.searchConfig.description')}
           eyebrow={t('dashboard.groups.providers')}
@@ -246,7 +246,7 @@ export default function DashboardProvidersSearch({ loaderData }: Route.Component
   }
 
   return (
-    <section className="grid gap-[18px] max-w-[960px] min-w-0">
+    <section className="dashboard-page max-w-[960px]">
       <DashboardPageHeader
         description={t('dashboard.searchConfig.description')}
         eyebrow={t('dashboard.groups.providers')}
diff --git a/apps/web/src/routes/dashboard-providers-upstreams.tsx b/apps/web/src/routes/dashboard-providers-upstreams.tsx
index e20447b7e..4e05b7b9d 100644
--- a/apps/web/src/routes/dashboard-providers-upstreams.tsx
+++ b/apps/web/src/routes/dashboard-providers-upstreams.tsx
@@ -239,7 +239,7 @@ export default function DashboardProvidersUpstreams({ loaderData }: Route.Compon
   }
 
   return (
-    <div className="grid gap-[18px] min-w-0">
+    <div className="dashboard-page">
       <Toaster toasterId={toasterId} position="top-end" />
 
       <DashboardPageHeader
diff --git a/apps/web/src/routes/dashboard-services-api-docs.tsx b/apps/web/src/routes/dashboard-services-api-docs.tsx
index 4c6f3acfe..eafc394ed 100644
--- a/apps/web/src/routes/dashboard-services-api-docs.tsx
+++ b/apps/web/src/routes/dashboard-services-api-docs.tsx
@@ -10,7 +10,7 @@ export function meta() {
 export default function DashboardServicesApiDocs() {
   const { t } = useTranslation();
   return (
-    <section className="grid gap-[18px] max-w-[1200px] min-w-0">
+    <section className="dashboard-page max-w-[1200px]">
       <DashboardPageHeader description={t('dashboard.pages.apiDocs')} eyebrow={t('dashboard.groups.services')} title={t('dashboard.nav.apiDocs')} />
       <ApiDocsContent />
     </section>
diff --git a/apps/web/src/routes/dashboard-services-api-keys.tsx b/apps/web/src/routes/dashboard-services-api-keys.tsx
index 24354e0f1..63ec1c0ea 100644
--- a/apps/web/src/routes/dashboard-services-api-keys.tsx
+++ b/apps/web/src/routes/dashboard-services-api-keys.tsx
@@ -188,7 +188,7 @@ export default function DashboardServicesApiKeys({ loaderData }: Route.Component
   };
 
   return (
-    <div className="grid gap-[18px] min-w-0">
+    <div className="dashboard-page">
       <Toaster toasterId={toasterId} position="top-end" />
 
       <DashboardPageHeader
diff --git a/apps/web/src/routes/dashboard-settings.tsx b/apps/web/src/routes/dashboard-settings.tsx
index e10d893a0..14ae2835c 100644
--- a/apps/web/src/routes/dashboard-settings.tsx
+++ b/apps/web/src/routes/dashboard-settings.tsx
@@ -98,7 +98,7 @@ export default function DashboardSettings() {
   };
 
   return (
-    <section className="grid gap-[18px] max-w-[960px] min-w-0">
+    <section className="dashboard-page max-w-[960px]">
       <DashboardPageHeader description={t('dashboard.settings.description')} eyebrow={t('dashboard.settings.eyebrow')} title={t('dashboard.nav.settings')} />
 
       <Panel className="grid w-full max-w-[480px] gap-[18px] !p-[22px_24px] max-[680px]:!p-[18px]">
diff --git a/apps/web/uno.config.ts b/apps/web/uno.config.ts
index 7686e3fbf..2ce3b5bcd 100644
--- a/apps/web/uno.config.ts
+++ b/apps/web/uno.config.ts
@@ -14,6 +14,11 @@ export default defineConfig({
     },
   },
   shortcuts: {
+    // A route's own content region. `min-w-0` alone lets the region shrink but
+    // leaves its single column at `auto`, which grows to the widest child's
+    // min-content — one long message bar then pushes the whole page past the
+    // viewport. The explicit track floors that column at zero.
+    'dashboard-page': 'grid gap-[18px] min-w-0 grid-cols-[minmax(0,1fr)]',
     'text-fui-fg1': 'text-[var(--colorNeutralForeground1)]',
     'text-fui-fg2': 'text-[var(--colorNeutralForeground2)]',
     'text-fui-fg3': 'text-[var(--colorNeutralForeground3)]',