Skip to content

Hide the page scrollbar on touch screens - #187

Merged
ryanbarlow97 merged 1 commit into
mainfrom
hide-mobile-page-scrollbar
Oct 11, 2026
Merged

ryanbarlow97 merged 1 commit into
mainfrom
hide-mobile-page-scrollbar

Conversation

@ryanbarlow97

Copy link
Copy Markdown
Contributor

Phones no longer show a scrollbar down the side of the page.

What changes

  • The themed ::-webkit-scrollbar rules (and the Firefox scrollbar-width/scrollbar-color fallback) in globals.css now sit inside @media (hover: hover) and (pointer: fine), so only mouse and trackpad devices get them. Desktop looks the same.
  • On (pointer: coarse) the page itself has no scrollbar (html { scrollbar-width: none } plus html::-webkit-scrollbar { display: none }).
  • Inner scrollers on touch screens drop the 8px themed track and use the browser's own fading bar.

Testing

  • Headless Chromium with scrollbars on (Playwright, --hide-scrollbars removed), old vs new CSS on a long page with an inner scroller:
    • Desktop 1280×800: themed 8px page and inner bars, unchanged.
    • Pixel 7 emulation: old draws a grey bar at the page's right edge after scrolling and an 8px inner track; new draws neither.
    • iPhone 14 emulation (Chromium): old 8px inner track, new none.
  • Not checked on a real iPhone; Safari on iOS draws its own indicators and may ignore these rules.
  • npx oxfmt --check app/internal/globals.css passes.

Follow-up to #185.

🤖 Generated with Claude Code

The themed ::-webkit-scrollbar rules applied everywhere, so phones drew a
grey bar down the page edge and an 8px track in every inner scroller.
They now apply to mouse and trackpad devices only. On touch screens the
page has no scrollbar, and inner scrollers keep the browser's own fading
bar.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@coderabbitai

coderabbitai Bot commented Oct 11, 2026

Copy link
Copy Markdown

Warning

Review limit reached

You've used all free OSS reviews for now. Wait for the free limit to reset to keep reviewing this public repository.

Next included review available in 57 minutes.

Check out review usage here.

View limit details

Limit details: You’ve used the included review currently available.

Learn how review limits work.

Review configuration:

⚙️ Run configuration
  • Configuration used: Organization UI
  • Review profile: CHILL
  • Plan: Advanced
  • Run ID: 2234442f-b3d5-4360-9f3b-debd88963802

📥 Commits

Reviewing files that changed from the base of the PR and between 90d7fcf and 97fee17.


📒 Files selected for processing (1)
  • frontend/app/internal/globals.css

  • Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

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.

@ryanbarlow97
ryanbarlow97 merged commit 8202f18 into main Oct 11, 2026
6 checks passed
@ryanbarlow97
ryanbarlow97 deleted the hide-mobile-page-scrollbar branch October 11, 2026 16:14

This branch was successfully deployed

1 active deployment
preview — 97fee173 Deployed Oct 11, 2026 by ryanbarlow97 via deploy #255
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