fix(sandbox): restore mobile scroll behavior on details page#347
Conversation
Rebuild the sandbox details layout so the page header can scroll away on mobile, the tab bar pins at the top, and the tab content fills the remaining viewport. Replace the tab list with a Select on mobile and keep the kill button inline with it.
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
PR SummaryLow Risk Overview Adds an opt-in
Reviewed by Cursor Bugbot for commit 23746af. Bugbot is set up for automated code reviews on this repo. Configure here. |
ben-fornefeld
requested review from
Copilot
and removed request for
Copilot and
drankou
…bsList Make the mobile dropdown opt-in via a `mobileVariant: 'tabs' | 'select'` prop so it can be reused by other tab lists. Sandbox details layout now consumes DashboardTabsList again instead of inlining the tab and select primitives.
There was a problem hiding this comment.
Pull request overview
Restores expected mobile scrolling/pinning behavior on the sandbox details page after the route-segment tab refactor, and introduces an optional mobile-only tab selector UI for this layout.
Changes:
- Add an opt-in
mobileVariant="select"mode toDashboardTabsListto render tabs as aSelecton mobile while keeping the desktop tab list unchanged. - Rework the sandbox details layout structure to make the tabs area the mobile scroll container and keep the tab bar sticky while allowing the header to scroll away.
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 1 comment.
| File | Description |
|---|---|
src/ui/dashboard-tabs.tsx |
Adds mobileVariant and implements a mobile Select-based tab switcher while preserving existing desktop tabs behavior. |
src/features/dashboard/sandbox/layout.tsx |
Adjusts layout flex/overflow/sticky structure and enables the new mobile select variant for sandbox details tabs. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Summary
refactor(dashboard): move tabs to route segments). The sandbox details header can scroll away again, the tab bar pins at the top, and the tab content fills the remaining viewport (100svh − navbar − statusbar − tabbar) perfectly.Selectdropdown on mobile (opt-in, scoped to this layout only). The desktopTabsListwith the orange active-tab indicator is unchanged.tabsHeaderAccessory) on the same row as the Select on mobile, flush to the right edge, with a continuous bottom-border line spanning the full width.Implementation notes
<Tabs>is now the mobile scroll container (max-md:overflow-y-auto). An inner wrapper usesmax-md:h-full(= 100% of the scroll container) plusflex flex-colso the content area derives its height from the scroll container viaflex-1instead of subtracting hardcoded chrome heights — no magic numbers.max-md:shrink-0on header / accessory / inner wrapper prevents flex children from being squished, so total content exceeds the container and triggers overflow scroll.SelectTriggeruses<div>(not<span>) for the icon+label so it doesn't match[&>span]:line-clamp-1(which would have stacked them vertically).max-md:flex-1 max-md:justify-endand carries theborder-bso the bottom line stays continuous across the full row width on both breakpoints.