From 67e764d8b767690a25b72ee0ad9cb1f57ae51df0 Mon Sep 17 00:00:00 2001
From: lvbaiqing <lvbaiqing@lvbaiqingdeMacBook-Air.local>
Date: Tue, 3 Nov 2026 00:00:23 +0800
Subject: [PATCH] fix(ui): keep overview dashboard fixed

---
 .../app/src/components/FloatingShell.tsx      | 10 ++---
 openless-all/app/src/pages/Overview.tsx       | 44 +++++++++++++------
 2 files changed, 35 insertions(+), 19 deletions(-)

diff --git a/openless-all/app/src/components/FloatingShell.tsx b/openless-all/app/src/components/FloatingShell.tsx
index 57d6ac0bd..2d9a1451d 100644
--- a/openless-all/app/src/components/FloatingShell.tsx
+++ b/openless-all/app/src/components/FloatingShell.tsx
@@ -542,15 +542,13 @@ function FloatingShellBody({
               //     scrollbar appears only when it truly overflows.
               //   - Other tabs use the thin scrollbar too.
               className="ol-thinscroll ol-scroll-fade"
-              // Overview is a fixed single-screen page (overflow hidden, never scrolls):
-              // no scrollbar gutter reserved.
+              // Overview is a fixed single-screen dashboard. Its cards own any internal
+              // scrolling; the page surface itself never becomes a scroll container.
               style={{
                 flex: 1,
                 minHeight: 0,
-                // Overview is a fixed single-screen page: no scrolling; all dashboards
-                // fit one screen with heights distributed by Overview.tsx's internal
-                // flex; other pages keep the thin scrollbar.
-                overflow: 'auto',
+                overflow: displayTab === 'overview' ? 'hidden' : 'auto',
+                boxSizing: 'border-box',
                 padding: mobile
                   ? '16px 16px calc(16px + env(safe-area-inset-bottom, 0px) + 56px)'
                   : displayTab === 'overview'
diff --git a/openless-all/app/src/pages/Overview.tsx b/openless-all/app/src/pages/Overview.tsx
index 9c4a0a3ec..c02d5f6b7 100644
--- a/openless-all/app/src/pages/Overview.tsx
+++ b/openless-all/app/src/pages/Overview.tsx
@@ -300,17 +300,18 @@ export function Overview({ onOpenHistory, onOpenSettings }: OverviewProps) {
     onOpenSettings?.(section, serviceView);
 
   return (
-    // Single-screen fixed page: no scrolling, fills the height given by the shell, dashboards share
-    // one screen elastically; when the window is squeezed very short, the bottom row shrinks internally
-    // (the recent list scrolls internally) and the page itself shows no scrollbar.
+    // Single-screen fixed dashboard: the shell owns the viewport and cards own their
+    // internal scrolling. The page surface never grows a document scrollbar.
     <div
       style={{
         display: 'flex',
         flexDirection: 'column',
         flex: 1,
+        height: '100%',
         minHeight: 0,
         minWidth: 0,
-        gap: 14,
+        gap: 12,
+        overflow: 'hidden',
       }}
     >
       <PageHeader
@@ -330,7 +331,7 @@ export function Overview({ onOpenHistory, onOpenSettings }: OverviewProps) {
           display: 'grid',
           gridTemplateColumns:
             mobile || setup.providers.length < 2 ? 'minmax(0, 1fr)' : 'repeat(2, minmax(0, 1fr))',
-          gap: 12,
+          gap: 10,
           flexShrink: 0,
         }}
       >
@@ -355,7 +356,7 @@ export function Overview({ onOpenHistory, onOpenSettings }: OverviewProps) {
       </div>
 
       {/* Usage records: title + four metric cards as one group. */}
-      <div style={{ display: 'flex', flexDirection: 'column', gap: 8, flexShrink: 0 }}>
+      <div style={{ display: 'flex', flexDirection: 'column', gap: 6, flexShrink: 0 }}>
         <h2
           style={{
             fontSize: 13,
@@ -370,7 +371,7 @@ export function Overview({ onOpenHistory, onOpenSettings }: OverviewProps) {
           style={{
             display: 'grid',
             gridTemplateColumns: mobile ? 'repeat(2, minmax(0, 1fr))' : 'repeat(4, minmax(0, 1fr))',
-            gap: 12,
+            gap: 8,
           }}
         >
           <Metric
@@ -415,10 +416,10 @@ export function Overview({ onOpenHistory, onOpenSettings }: OverviewProps) {
         style={{
           display: 'grid',
           gridTemplateColumns: mobile ? 'minmax(0, 1fr)' : 'minmax(0, 1fr) minmax(0, 1.4fr)',
-          gap: 12,
-          flex: 1,
-          // Keep the chart readable; when the window is too short the page scrolls instead.
-          minHeight: mobile ? 0 : 260,
+          gap: 10,
+          flex: '1 1 0',
+          minHeight: 0,
+          overflow: 'hidden',
         }}
       >
         <PeriodMetricsCard
@@ -433,7 +434,13 @@ export function Overview({ onOpenHistory, onOpenSettings }: OverviewProps) {
 
         <Card
           padding={0}
-          style={{ display: 'flex', flexDirection: 'column', minWidth: 0, overflow: 'hidden' }}
+          style={{
+            display: 'flex',
+            flexDirection: 'column',
+            minWidth: 0,
+            minHeight: 0,
+            overflow: 'hidden',
+          }}
         >
           <div
             style={{
@@ -656,7 +663,18 @@ function ActivityHeatmapCard({ activity }: { activity: ActivityDay[] }) {
     };
   }, [activity, i18n.resolvedLanguage, i18n.language]);
   return (
-    <Card padding={12} style={{ display: 'flex', flexDirection: 'column', gap: 6, minWidth: 0 }}>
+    <Card
+      padding={12}
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 6,
+        minWidth: 0,
+        minHeight: 0,
+        flex: '0 1 132px',
+        overflow: 'hidden',
+      }}
+    >
       <span
         style={{
           fontSize: 13,