[ryanbarlow97]

What was wrong

On the timelapse studio's panel (desktop Chrome), the scrollbar:

• ran beside the pinned Layers / Dates / Watch bar and up into the panel's rounded top-right corner, where it looked cut off;
• was Chrome's plain native bar with ▲/▼ arrow buttons, not the site's themed scrollbar.

Changes

• MapShell: the details panel gets a detailsHeader slot, pinned above the scrolling body (the counterpart of detailsFooter).
• Timelapse steps: rendered in that slot instead of as a sticky bar inside the scroller, so the scrollbar starts under them. This drops the sticky workarounds (negative margins, the iOS hairline shadow, the rounded top). The body gets pt-4 in place of the bar's old mb-4.
• globals.css: scrollbar-width / scrollbar-color now apply only under @supports not selector(::-webkit-scrollbar) (Firefox). Since Chrome 121, setting the standard properties makes Chrome ignore every ::-webkit-scrollbar rule. Chrome and Safari now use the themed 8 px rounded bar with no arrows. Side effect: [scrollbar-width:none] on the drill breadcrumb now takes effect in Chrome, as intended.

Checks

• Chromium screenshots against live data (desktop 1440×900 and Pixel 7), before and after: layout unchanged; the scrollbar starts under the step bar and has no arrow buttons.
• tsc --noEmit clean.
• vitest run: 1,949 pass. RecipeVehiclePreview.test.tsx times out on this host, and fails the same way on unchanged main.

🤖 Generated with Claude Code

[coderabbitai]

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 53 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: 5ce19218-6ea7-4765-aa6a-63a7679be496

📥 Commits

Reviewing files that changed from the base of the PR and between 811196d and 96f4d08.

📒 Files selected for processing (4)

• frontend/app/components/chronicle/ChroniclePanels.tsx
• frontend/app/components/chronicle/ChronicleStudio.tsx
• frontend/app/components/map/shell/MapShell.tsx
• frontend/app/internal/globals.css

• Autopilot · 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

• X
• Mastodon
• Reddit
• LinkedIn

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