fix(ui): 概览页整屏不滚 + 其他页 scrollbar 变细 (#243) by appergb · Pull Request #248 · Open-Less/openless

appergb · 2026-05-04T10:02:41Z

User description

Closes #243

Summary

Overview tab：右侧 scrollbar 消失，内容整屏铺开
History / Vocab / Style / Translation / Selection Ask：scrollbar 由默认粗细改为 6px 细条，不抢眼

改动（2 文件 / +15 / -1）

`FloatingShell.tsx` page wrapper：

`overflow: displayTab === 'overview' ? 'hidden' : 'auto'`
`className={displayTab === 'overview' ? undefined : 'ol-thinscroll'}`

`styles/tokens.css`：新增 `.ol-thinscroll` —— 6px 宽 webkit + `scrollbar-width: thin` (Firefox)，与既有 `.ol-noscrollbar` 同位置但保留可滚动 affordance。

Test plan

Overview tab：无右侧 scrollbar
其他 tab：scrollbar 仍可见但比之前细
内容仍可滚（细只是视觉，功能未破）

PR Type

Enhancement, Bug fix

Description

Introduce .ol-thinscroll CSS class for 6px thin scrollbars
Refactor Overview bottom row to flex layout to fill viewport and avoid unnecessary scrollbar
Apply thin scrollbar in FloatingShell, History, Settings, SettingsModal, and Overview
Extend Card atom with className prop for style application

Diagram Walkthrough

flowchart LR
  A["tokens.css: .ol-thinscroll class"] --> B["FloatingShell body"]
  A --> C["History panels"]
  A --> D["SettingsModal sections"]
  A --> E["Overview recent list"]
  F["Overview.tsx flex layout"] --> G["Bottom row fills height"]
  G --> H["No scrollbar unless overflow"]
  H --> E

File Walkthrough

Relevant files

Bug fix

2 files

FloatingShell.tsx `Replace conditional overflow hidden with uniform thin scrollbar`	+8/-0
Overview.tsx `Refactor bottom row to flex layout to prevent overflow`	+8/-5

Enhancement

5 files

SettingsModal.tsx `Add thin scrollbar to personalize and about sections`	+1/-1
History.tsx `Apply thin scrollbar to list and detail panels`	+2/-2
Settings.tsx `Conditionally apply thin scrollbar in embedded settings`	+1/-0
_atoms.tsx `Add className prop to Card component`	+3/-1
tokens.css `Define .ol-thinscroll class for thin scrollbar style`	+10/-0

FloatingShell.tsx 的 page wrapper： - displayTab === 'overview' 时 overflow:hidden，让 Overview 真"一眼看完" - 其他 tab 维持 overflow:auto，加上 .ol-thinscroll 让 scrollbar 细而可见 tokens.css 新增 .ol-thinscroll —— 与既有 .ol-noscrollbar 同位置；区别是 "细而仍可见"，保留可滚动的视觉 affordance（不像 noscrollbar 完全隐藏）。 Closes #243

chatgpt-codex-connector

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: b41c904104

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

Open a pull request for review
Mark a draft as ready
Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

chatgpt-codex-connector · 2026-05-04T10:05:07Z

              style={{
                flex: 1, minHeight: 0,
-                overflow: 'auto',
+                overflow: displayTab === 'overview' ? 'hidden' : 'auto',


Restore scrolling for Overview container

Setting overflow to hidden for the Overview wrapper makes lower content unreachable whenever the shell height is reduced (e.g., resized window) or content grows (localization/font scale), because this page has multiple stacked sections and no internal fallback scroller. Before this change the same wrapper used overflow: auto, so users could still reach all cards; now the content is clipped with no recovery path.

Useful? React with 👍 / 👎.

已修复 P1，commit fd0b2fd。

把 wrapper 的 overflow: hidden 改回 overflow: auto，所有 tab 一律带 .ol-thinscroll。Overview.tsx 内部用 flex（底部行 flex:1, minHeight:0）让正常尺寸下内容刚好撑满，浏览器自然不显示 scrollbar；窗口被压缩或文案变长导致内容超出时，自动 fallback 出细 scrollbar，不会再让 Recent Card 不可达。

chatgpt-codex-connector · 2026-05-04T10:05:07Z

+              // issue #243：Overview 是 dashboard，期望「一眼看完」不滚动；
+              // 其余页（History / Vocab / Style / Translation / SelectionAsk）继续允许
+              // 滚动但走细 scrollbar，不抢眼。
+              className={displayTab === 'overview' ? undefined : 'ol-thinscroll'}


Apply thin-scroll styling to real scrolling elements

The new ol-thinscroll class is attached to the tab wrapper, but some pages (notably History) scroll inside nested containers (overflow: auto on inner panels), so their visible scrollbars are unchanged. Because ::-webkit-scrollbar styles do not cascade to descendants, this placement does not deliver the intended “other pages use thin scrollbar” behavior consistently.

Useful? React with 👍 / 👎.

已修复 P2，同 commit fd0b2fd。

把 .ol-thinscroll 显式加到嵌套 scroller：

History.tsx 左侧列表 + 右侧详情 Card（_atoms.Card 加 className prop 透传）

Settings.tsx 内嵌模式右栏

SettingsModal.tsx personalize/about 块

QaPanel 是独立 webview 窗口，不在主壳 thinscroll 范围内，保留默认。

github-actions · 2026-05-04T10:06:52Z

PR Reviewer Guide 🔍

(Review updated until commit `fd0b2fd`)

Here are some key observations to aid the review process:

🎫 Ticket compliance analysis 🔶 243 - Partially compliant Compliant requirements: Other tabs have thinner scrollbar. Content remains scrollable. Non-compliant requirements: Overview tab is not guaranteed to be non-scrollable; it can scroll when content overflows and does not use overflow:hidden as originally specified. Requires further human verification: Visual verification that scrollbar is thin and non-intrusive across browsers and themes. Visual verification that Overview page fits the viewport without scrollbar under typical window sizes.
⏱️ Estimated effort to review: 3 🔵🔵🔵⚪⚪
🧪 No relevant tests
🔒 No security concerns identified
⚡ No major issues detected

#243 第一版给外层 wrapper 加了 overflow:hidden 让概览不滚，但底部「近 7 天 + 最近识别」grid 仍按自然高度展开 → 内容超出 wrapper 时被硬裁，看不到底部圆角；最近识别第 5 行只露半截。修法（Overview.tsx 底部 grid）： - grid 自身 flex:1, minHeight:0，撑满父 flex:column 的剩余高度 - 两张 Card 都加 display:flex/column + minHeight:0；最近识别 Card 还加 overflow:hidden，让内层行严格剪裁到 Card 的圆角 - 最近识别的 list <div> 加 .ol-thinscroll + flex:1 + overflow:auto，自己独立滚动；其他区域按需求保持不滚视觉效果：底部圆角现在完整显示并与上方 metrics / providers 对齐；只有最近识别区域出现细滚动条，整体仍是 dashboard「一眼看完」节奏。

chatgpt-codex-connector · 2026-05-04T10:19:34Z

Codex usage limits have been reached for code reviews. Please check with the admins of this repo to increase the limits by adding credits.
Credits must be used to enable repository wide code reviews.

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 范围内，保留默认。

github-actions · 2026-05-04T10:35:30Z

Persistent review updated to latest commit 8b435b4

github-actions · 2026-05-04T10:37:01Z

Persistent review updated to latest commit fd0b2fd

包含自 1.2.13 以来的修复与新功能： - feat(autostart): 跨端开机自启 (#194) - feat(asr): SiliconFlow / GLM-ASR / Groq / OpenAI Whisper preset (#212) - fix(qa): Windows / Linux 划词追问浮窗 Esc + 拖拽 + 文案 (#205 / #206) - fix(settings): preset 切换 race + per-provider 凭据隔离 (#219 / #220) - fix(overview): 概览整屏适配 + 嵌套 scroller 细滚动条 (#243 / #248) - 一系列 Windows IME (TSF) 模块 (#233 / #240 等)

chatgpt-codex-connector Bot reviewed May 4, 2026

View reviewed changes

github-actions Bot added the Review effort 2/5 label May 4, 2026

github-actions Bot added Review effort 3/5 and removed Review effort 2/5 labels May 4, 2026

appergb merged commit 0ddd04f into main May 4, 2026
2 checks passed

appergb deleted the fix/overview-no-scroll-243 branch May 6, 2026 11:52

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix(ui): 概览页整屏不滚 + 其他页 scrollbar 变细 (#243)#248

fix(ui): 概览页整屏不滚 + 其他页 scrollbar 变细 (#243)#248
appergb merged 3 commits into
mainfrom
fix/overview-no-scroll-243

appergb commented May 4, 2026 •

edited by github-actions Bot

Loading

Uh oh!

chatgpt-codex-connector Bot left a comment

Uh oh!

chatgpt-codex-connector Bot May 4, 2026

Uh oh!

appergb May 4, 2026

Uh oh!

chatgpt-codex-connector Bot May 4, 2026

Uh oh!

appergb May 4, 2026

Uh oh!

github-actions Bot commented May 4, 2026 •

edited

Loading

Uh oh!

chatgpt-codex-connector Bot commented May 4, 2026

Uh oh!

github-actions Bot commented May 4, 2026

Uh oh!

github-actions Bot commented May 4, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Conversation

appergb commented May 4, 2026 • edited by github-actions Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

User description

Summary

改动（2 文件 / +15 / -1）

Test plan

PR Type

Description

Diagram Walkthrough

File Walkthrough

Uh oh!

chatgpt-codex-connector Bot left a comment

Choose a reason for hiding this comment

💡 Codex Review

Uh oh!

chatgpt-codex-connector Bot May 4, 2026

Choose a reason for hiding this comment

Uh oh!

appergb May 4, 2026

Choose a reason for hiding this comment

Uh oh!

chatgpt-codex-connector Bot May 4, 2026

Choose a reason for hiding this comment

Uh oh!

appergb May 4, 2026

Choose a reason for hiding this comment

Uh oh!

github-actions Bot commented May 4, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

PR Reviewer Guide 🔍

(Review updated until commit fd0b2fd)

Uh oh!

chatgpt-codex-connector Bot commented May 4, 2026

Uh oh!

github-actions Bot commented May 4, 2026

Uh oh!

github-actions Bot commented May 4, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

appergb commented May 4, 2026 •

edited by github-actions Bot

Loading

github-actions Bot commented May 4, 2026 •

edited

Loading

(Review updated until commit `fd0b2fd`)