Skip to content

fix(sidebar): remove persistent scrollbar gutter on macOS#304

Open
Fldicoahkiin wants to merge 1 commit into
AkaraChen:devfrom
Fldicoahkiin:fix/sidebar-scrollbar-gutter
Open

fix(sidebar): remove persistent scrollbar gutter on macOS#304
Fldicoahkiin wants to merge 1 commit into
AkaraChen:devfrom
Fldicoahkiin:fix/sidebar-scrollbar-gutter

Conversation

@Fldicoahkiin
Copy link
Copy Markdown
Contributor

@Fldicoahkiin Fldicoahkiin commented Jun 4, 2026

Summary

  • 修复 macOS 上侧栏右侧始终可见的一条白色 gutter
  • 原因:overflowY: scroll 强制始终显示滚动条,叠加 scrollbar-gutter: stable 后变成常驻白条
  • 修法:将 overflowYscroll 改为 auto;保留 scrollbar-gutter: stable(macOS overlay 模式下 gutter 宽度为 0,无视觉影响;Windows 上仍可防止内容溢出时的 layout shift,沿用 3bc818e 的修复意图)

触发场景

进入项目编辑模式后内容溢出,退出编辑模式后白条仍保留。修复后 macOS 上无任何状态会看到白条;Windows 行为不变。

Test plan

  • macOS:正常模式与编辑模式切换,确认无白条残留
  • macOS:内容超出滚动区时滚动条按需出现
  • Windows:编辑模式进出无横向 layout shift

Summary by CodeRabbit

  • Bug Fixes
    • Sidebar scrollbar now appears only when needed rather than always being visible, improving visual clarity.

- switch overflowY from `scroll` to `auto` so the gutter is no
  longer reserved when content fits
- keep `scrollbar-gutter: stable` to preserve the Windows layout-shift
  fix from 3bc818e; on macOS overlay scrollbars the gutter width is 0
  so it has no visible effect
@netlify
Copy link
Copy Markdown

netlify Bot commented Jun 4, 2026

Deploy Preview for grand-selkie-225f87 canceled.

Name Link
🔨 Latest commit 7a66570
🔍 Latest deploy log https://app.netlify.com/projects/grand-selkie-225f87/deploys/6a2103653908a20008ec037c

@coderabbitai
Copy link
Copy Markdown

coderabbitai Bot commented Jun 4, 2026

Review Change Stack

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 691a7fac-2128-4e72-9613-14747f325ae3

📥 Commits

Reviewing files that changed from the base of the PR and between 93da2cc and 7a66570.

📒 Files selected for processing (1)
  • src/layout/AppSidebar.tsx

📝 Walkthrough

Walkthrough

A single-line change modifies AppSidebar's main scroll container to display the vertical scrollbar conditionally (only when content overflows) rather than always, by changing overflowY from "scroll" to "auto".

Changes

Sidebar Scrollbar Display

Layer / File(s) Summary
Conditional scrollbar visibility
src/layout/AppSidebar.tsx
The sidebar's vertical overflow property changes from overflowY="scroll" to overflowY="auto", allowing the scrollbar to appear only when content exceeds the container height.

🎯 1 (Trivial) | ⏱️ ~1 minute

🐰 A scroll bar's fate, now conditional—
No longer always shown, but practical.
When content fits, space returns,
A cleaner sidebar, as the design turns!

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (4 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title accurately reflects the main change: fixing the persistent scrollbar gutter issue on macOS by switching from overflowY='scroll' to overflowY='auto'.
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

Copy link
Copy Markdown

@chatgpt-codex-connector chatgpt-codex-connector Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 7a665700d2

ℹ️ About Codex in GitHub

Codex has been enabled to automatically 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 👍.

When you sign up for Codex through ChatGPT, Codex can also answer questions or update the PR, like "@codex address that feedback".

Comment thread src/layout/AppSidebar.tsx
@@ -546,7 +546,7 @@ export default function AppSidebar() {
<Box
Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P2 Badge Drop the stable gutter when hiding idle scrollbars

In classic-scrollbar environments, scrollbar-gutter: stable immediately below this line still reserves scrollbar space for overflow: auto even when the sidebar content does not overflow, so changing only overflowY leaves the persistent blank gutter this fix is meant to remove. This still affects macOS users who have scrollbars set to always show, and other non-overlay scrollbar configurations; remove or conditionally disable the stable gutter when using auto.

Useful? React with 👍 / 👎.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant