fix(overview): Codex P1 + P2 — 保留 fallback scroll + 嵌套 scroller 同步细化

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 范围内,保留默认。
This commit is contained in:
baiqing committed 2026-05-04 18:26:34 +08:00
1 parent 8b435b4844
commit fd0b2fdf02
5 files changed
+16 -9

No files matched your search

@@ -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'
@@ -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>
+2 -2
View File
@@ -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 }}>
+1
View File
@@ -115,6 +115,7 @@ export function Settings({ embedded = false, initialSection = 'recording' }: Set
))}
</div>
<div
className={embedded ? 'ol-thinscroll' : undefined}
style={{
display: 'flex',
flexDirection: 'column',
+3 -1
View File
@@ -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,