From fd0b2fdf02afe3c096e6f6fb00a2836a6e26bfc1 Mon Sep 17 00:00:00 2001
From: baiqing <lbx12309@icloud.com>
Date: Mon, 4 May 2026 18:26:34 +0800
Subject: [PATCH] =?UTF-8?q?fix(overview):=20Codex=20P1=20+=20P2=20?=
 =?UTF-8?q?=E2=80=94=20=E4=BF=9D=E7=95=99=20fallback=20scroll=20+=20?=
 =?UTF-8?q?=E5=B5=8C=E5=A5=97=20scroller=20=E5=90=8C=E6=AD=A5=E7=BB=86?=
 =?UTF-8?q?=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Codex P1：之前 displayTab==='overview' 时 wrapper 用 overflow:hidden，
窗口被压缩或文案变长（i18n / 字体放大）后底部 Recent Card 整片不可达，
没有 scroll 兜底路径。

修法：所有 tab 一律 overflow:auto。Overview.tsx 内部已经用 flex 把底部
行 grow 到撑满 → 正常尺寸下内容刚好占满，浏览器不显示 scrollbar；真挤
不下了 fallback 出细 scrollbar。"整屏不滚"的视觉效果保留，但有 scroll
保险。

Codex P2：::-webkit-scrollbar 不级联到子节点，所以 .ol-thinscroll 加
在 wrapper 上对 History / SettingsModal 等内层 overflow:auto 容器无效。
把 className 显式补到这些嵌套 scroller：
- History 左侧列表 + 右侧详情 Card（Card 组件加 className prop 透传）
- Settings.tsx 内嵌模式右栏
- SettingsModal personalize/about 块
QaPanel 是独立窗口，不在主壳 thinscroll 范围内，保留默认。
---
 openless-all/app/src/components/FloatingShell.tsx | 14 +++++++++-----
 openless-all/app/src/components/SettingsModal.tsx |  2 +-
 openless-all/app/src/pages/History.tsx            |  4 ++--
 openless-all/app/src/pages/Settings.tsx           |  1 +
 openless-all/app/src/pages/_atoms.tsx             |  4 +++-
 5 files changed, 16 insertions(+), 9 deletions(-)

diff --git a/openless-all/app/src/components/FloatingShell.tsx b/openless-all/app/src/components/FloatingShell.tsx
index e1a7372f..1d9f2fe3 100644
--- a/openless-all/app/src/components/FloatingShell.tsx
+++ b/openless-all/app/src/components/FloatingShell.tsx
@@ -260,13 +260,17 @@ function FloatingShellBody({ os, initialTab, initialSettings }: { os: OS; initia
                     两列内部各自的 overflow:auto 才能独立滚动 */}
             <div
               key={displayTab}
-              // issue #243：Overview 是 dashboard，期望「一眼看完」不滚动；
-              // 其余页（History / Vocab / Style / Translation / SelectionAsk）继续允许
-              // 滚动但走细 scrollbar，不抢眼。
-              className={displayTab === 'overview' ? undefined : 'ol-thinscroll'}
+              // issue #243：所有 tab 都允许 overflow:auto，让窗口被压缩 / 文案
+              //   变长时仍可触达底部内容（Codex P1：之前 overview 用 hidden
+              //   会让缩窗后 Recent 卡彻底不可见）。
+              //   - Overview 借 Overview.tsx 内部 flex 把底部行 grow 到撑满，
+              //     正常尺寸下内容刚好占满 → 浏览器自动不显示 scrollbar；
+              //     真挤不下了才 fallback 出细滚动条。
+              //   - 其他 tab 同样走细滚动条。
+              className="ol-thinscroll"
               style={{
                 flex: 1, minHeight: 0,
-                overflow: displayTab === 'overview' ? 'hidden' : 'auto',
+                overflow: 'auto',
                 padding: '24px 28px 32px',
                 // 苹果"spring out"风格的曲线：开始快、收尾顺滑，符合人体直觉
                 animation: tabPhase === 'exiting'
diff --git a/openless-all/app/src/components/SettingsModal.tsx b/openless-all/app/src/components/SettingsModal.tsx
index dcf04656..d32a4295 100644
--- a/openless-all/app/src/components/SettingsModal.tsx
+++ b/openless-all/app/src/components/SettingsModal.tsx
@@ -164,7 +164,7 @@ export function SettingsModal({ os: _os, onClose, initialSettingsSection }: Sett
             </div>
           ) : (
             // personalize / about 短内容：单一 scroll wrapper，超出时本块滚动。
-            <div style={{ flex: 1, minHeight: 0, overflow: 'auto', padding: '10px 28px 28px' }}>
+            <div className="ol-thinscroll" style={{ flex: 1, minHeight: 0, overflow: 'auto', padding: '10px 28px 28px' }}>
               {section === 'personalize' && <PersonalizeSection />}
               {section === 'about' && <AboutMini />}
             </div>
diff --git a/openless-all/app/src/pages/History.tsx b/openless-all/app/src/pages/History.tsx
index 511851b1..4ec8e88d 100644
--- a/openless-all/app/src/pages/History.tsx
+++ b/openless-all/app/src/pages/History.tsx
@@ -126,7 +126,7 @@ export function History() {
               ))}
             </div>
           </div>
-          <div style={{ flex: 1, overflow: 'auto', padding: 6 }}>
+          <div className="ol-thinscroll" style={{ flex: 1, overflow: 'auto', padding: 6 }}>
             {loading && <div style={{ padding: 16, fontSize: 12, color: 'var(--ol-ink-4)' }}>{t('common.loading')}</div>}
             {!loading && filtered.length === 0 && (
               <div style={{ padding: 16, fontSize: 12, color: 'var(--ol-ink-4)' }}>
@@ -164,7 +164,7 @@ export function History() {
           </div>
         </Card>
 
-        <Card padding={20} style={{ overflow: 'auto' }}>
+        <Card padding={20} className="ol-thinscroll" style={{ overflow: 'auto' }}>
           {item ? (
             <>
               <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 14 }}>
diff --git a/openless-all/app/src/pages/Settings.tsx b/openless-all/app/src/pages/Settings.tsx
index 9ad3caeb..88cf7d0a 100644
--- a/openless-all/app/src/pages/Settings.tsx
+++ b/openless-all/app/src/pages/Settings.tsx
@@ -115,6 +115,7 @@ export function Settings({ embedded = false, initialSection = 'recording' }: Set
           ))}
         </div>
         <div
+          className={embedded ? 'ol-thinscroll' : undefined}
           style={{
             display: 'flex',
             flexDirection: 'column',
diff --git a/openless-all/app/src/pages/_atoms.tsx b/openless-all/app/src/pages/_atoms.tsx
index 42227302..0648ac9a 100644
--- a/openless-all/app/src/pages/_atoms.tsx
+++ b/openless-all/app/src/pages/_atoms.tsx
@@ -32,11 +32,13 @@ interface CardProps {
   style?: CSSProperties;
   padding?: number;
   glassy?: boolean;
+  className?: string;
 }
 
-export function Card({ children, style, padding = 18, glassy = false }: CardProps) {
+export function Card({ children, style, padding = 18, glassy = false, className }: CardProps) {
   return (
     <div
+      className={className}
       style={{
         background: glassy ? 'rgba(255,255,255,0.55)' : 'var(--ol-surface)',
         backdropFilter: glassy ? 'blur(20px) saturate(160%)' : undefined,