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:
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>
|
||||
|
||||
@@ -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 }}>
|
||||
|
||||
@@ -115,6 +115,7 @@ export function Settings({ embedded = false, initialSection = 'recording' }: Set
|
||||
))}
|
||||
</div>
|
||||
<div
|
||||
className={embedded ? 'ol-thinscroll' : undefined}
|
||||
style={{
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
|
||||
@@ -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,
|
||||
|
||||
Reference in new issue
Block a user