Scrollbar adjustment

[jzgom067]

This PR was originally intended to change the scrollbar to act as an overlay, instead of taking up physical space in the layout. I ended up with a different solution though.

Persistent Scrollbar

The problem I was trying to solve was the layout shfiting when the scrollbar appeared or disappeared. This happened in three cases:

• When going between two pages, where one was scrollable and the other not
• When a page's loading skeleton was not scrollable, but the actual content was
• When opening a drawer on the mobile layout

I initially tried using the Radix UI Scroll Area, but this came with a lot of compromises from not using native scroll functionality. In the end, my solution was just to have a persistent page scrollbar, where it still takes up (minimal) space when the page isn't scrollable. This is a common solution used by websites like GitHub.

What I discovered was that no matter how you style the scrollbar, it will always have an "overlay" functionality that doesn't disrupt the layout on iOS and Android. The cases of going between pages was worth addressing though, so a persistent scrollbar deals with this nicely while staying out of the way when unused.

I shrunk the scrollbar just a bit to further keep it out of the way, but now it grows slightly on hover.

Fixed Grid Horizontal Scroll

If you dragged on the results grid and triggered text highlighting, it would scroll the grid slightly to the right if you drag past the right edge. I added overflow-x-clip to BaseTimeBlock to fix this, since it was the "next page" indicator taking up space even when hidden that caused this.

[coderabbitai]

Walkthrough

The changes standardize scrollbar behavior and related layout spacing. The application now keeps a persistent vertical scrollbar, uses narrower WebKit scrollbar dimensions, and clips horizontal overflow in time-block containers. Radix scroll-lock compensation is disabled for the document body. The schedule header uses reduced right padding when a scrollbar is present.

Merge Risk: 🔵 Low · up to ac4ff

The PR keeps a persistent scrollbar and prevents unintended horizontal grid movement. The change is localized, but a Stylelint violation in the scrollbar reset should be corrected before merge; the remaining spacing and gutter concerns are bounded follow-up checks.

---

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

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[coderabbitai]

Actionable comments posted: 1

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: ASSERTIVE

Plan: Pro Plus

Run ID: 1e620adf-5155-443f-bd45-f7f5297c718d

📥 Commits

Reviewing files that changed from the base of the PR and between 53ec3d7 and ac4ff60.

📒 Files selected for processing (4)

• frontend/src/features/event/grid/schedule-header.tsx
• frontend/src/features/event/grid/timeblocks/base.tsx
• frontend/src/styles/radix.css
• frontend/src/styles/scrollbar.css

Included review availability: Your plan includes up to 1 review per rolling hour; 0 remain after this review.