fix(web): hide squad-list scrollbar in collapsed rail#77
Merged
Conversation
In a 48px-wide collapsed squad rail, the default WebKit/Firefox
scrollbar (~7px) is visually loud and crowds the 28px squad icons —
scott flagged it as 'too ugly'. Apply the same hide-bar trick already
used on #thread-composer / #post-composer textareas: set
scrollbar-width:none + ::-webkit-scrollbar{display:none}, scoped to
body.squad-collapsed #squad-list only. The list stays scrollable
(scrollTop / wheel / touch all work), only the bar chrome is
suppressed.
Also: overflow-x:hidden in collapsed mode to kill the stray short
horizontal bar at the bottom (visible in scott's screenshot).
Verified with puppeteer (1280×800):
- collapsed + 60 fake squad items injected: scrollHeight=2410,
clientHeight=640, offsetWidth-clientWidth=0 (bar takes no width),
scrollTop=200 still works → scrolling intact
- expanded mode untouched: scrollbar-width=auto, overflow-x=auto
🤖 bot-review (comment-only · phase 1)Diff: Red-line checks:
Phase 1: this bot leaves comments only. Auto-approve will be enabled per-path after 1–2 weeks of clean runs. Promotion plan: judy PR #42 follow-up. |
SymbolStar
added a commit
that referenced
this pull request
Jun 11, 2026
Scott followup to #77 — apply the same hide-bar trick to #thread-list (thread rail) and #post-list (post stream) so the always-on scrollbar chrome doesn't clutter the reading surface. - Default state: scrollbar-width:none + ::-webkit-scrollbar{display:none}. Wheel / touch / programmatic scrollTop all still work. - Restored on :focus-within so keyboard users (PageUp/PageDown / arrow keys) still get a visible bar when interacting with either list — WCAG 2.1 SC 2.1.1 (designer's a11y note in thread). Verified with puppeteer (1280×800) by injecting 50 fake threads + 30 fake posts: thread-list: scrollHeight=4430, clientHeight=599, bar takes 0px, scrollTop=250 still works post-list: scrollHeight=1731, clientHeight=661, bar takes 0px, scrollTop=250 still works thread-list:focus-within → scrollbar-width=auto restored squad-list (expanded mode) untouched: scrollbar-width=auto
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Why
Scott 反馈：折叠态 squad rail 里默认的 WebKit/Firefox 滚动条 (~7px) 在 48px 宽 rail 里很丑，挤在 28px squad icon 上。
Fix
跟
#thread-composer/#post-composertextarea 已经在用的同一招——只在body.squad-collapsed下对#squad-list隐藏滚动条 chrome：只是隐藏 chrome，list 仍然可滚（鼠标滚轮 / 触屏拖 / 编程
scrollTop全正常）。Expanded 态完全不动，还走默认 scrollbar。Verification (puppeteer)
list.scrollTop = 200后读回getComputedStyle附修复后折叠态 rail 截图：[[copilot/scroll-fix-rail.png]]（48×800 全条干净，没有滚动条）。
留给最终回归
@designer 你之前的四项清单（ghost panel 不复现 / halo 可见 / ⌘\ / footer ⚙）merge 这个之后再加一项「折叠态 squad-list 无滚动条 chrome」一起验。