🤖 fix: move section selector to its own row on mobile#2640
🤖 fix: move section selector to its own row on mobile#2640ibetitsmike wants to merge 14 commits intomainfrom
Conversation
|
@codex review |
The section selector was crammed into the same flex row as the project name and workspace name, causing overlap on narrow/mobile viewports. Move it out of the header row into the parent flex-col container so it renders on its own row with the existing gap-4 spacing.
Adds a Storybook story with mobile viewport modes that verifies the section selector appears below the workspace-name header row.
ibetitsmike
force-pushed
the
mike/mobile-layout-52gt
branch
from
a3f4d09 to
87e7494
Compare
|
Codex Review: Didn't find any major issues. 🎉 ℹ️ About Codex in GitHubCodex has been enabled to automatically review pull requests in this repo. Reviews are triggered when you
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". |
Play functions that interact with the sidebar don't work reliably in Chromatic's mobile viewport (sidebar may be collapsed / touch mode). Matches existing pattern: CreateWorkspace has play + no mobile modes, CreateWorkspaceMultipleProjects has mobile modes + no play.
|
@codex review |
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 390c9dbf79
ℹ️ 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".
Per Codex review: instead of just checking presence, verify the section selector's bounding rect is below the header row (catches layout regression to overlapping layout).
|
@codex review Addressed the P2 feedback: the play function now asserts row separation via |
|
Codex Review: Didn't find any major issues. More of your lovely PRs please. ℹ️ About Codex in GitHubCodex has been enabled to automatically review pull requests in this repo. Reviews are triggered when you
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". |
Expand sidebar via localStorage in setup so the play function can click the project row on mobile viewports. After navigating to the creation view, collapse the sidebar so the Chromatic screenshot captures the creation form as the main content.
|
@codex review Added mobile chromatic modes to the sections story. The sidebar is pre-expanded via localStorage so the play function can click the project row in mobile viewports, then collapsed after navigation so the Chromatic screenshot captures the creation form. |
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 26ef323d05
ℹ️ 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".
Per Codex: handleAddWorkspace auto-collapses on mobile, so the unconditional collapse click was re-expanding it. Now we only click the toggle when the sidebar is still wide (desktop).
|
@codex review Addressed: sidebar collapse is now guarded by checking if the sidebar is still wide (>40px). On mobile, |
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 266397f739
ℹ️ 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".
The actual label is 'Collapse sidebar' not 'Toggle sidebar'.
|
@codex review Fixed: aria-label selector now uses |
|
Codex Review: Didn't find any major issues. Swish! ℹ️ About Codex in GitHubCodex has been enabled to automatically review pull requests in this repo. Reviews are triggered when you
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". |
A previous story's play-function may leave the sidebar collapsed via localStorage. The shared helper now checks sidebar width and clicks 'Expand sidebar' before looking for project rows, preventing cross-story state leaks in the Storybook test runner.
|
@codex review |
|
Codex Review: Didn't find any major issues. Keep it up! ℹ️ About Codex in GitHubCodex has been enabled to automatically review pull requests in this repo. Reviews are triggered when you
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". |
Two changes: 1. openFirstProjectCreationView: move sidebar expansion guard into the waitFor retry loop so it fires repeatedly until the sidebar actually expands (handles timing issues in CI). 2. CreateWorkspaceWithSections: remove LEFT_SIDEBAR_COLLAPSED_KEY from localStorage after the play function finishes, so subsequent stories start with the default sidebar state.
|
@codex review |
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 553819dde9
ℹ️ 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".
|
@codex review |
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: bc7a5117cb
ℹ️ 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".
…collapse detection Check document.documentElement.dataset.leftSidebarCollapsed instead of sidebar width. This works for both desktop (width-based) and mobile (CSS transform-based) collapse modes.
|
@codex review |
|
Codex Review: Didn't find any major issues. Keep them coming! ℹ️ About Codex in GitHubCodex has been enabled to automatically review pull requests in this repo. Reviews are triggered when you
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". |
…ile row for type/branch Desktop (≥768px): Section picker is inline/right-aligned in the header row with a flex-1 spacer, matching the original layout. Mobile (<768px): Section picker drops to its own row below the header via md:hidden / hidden md:block. Workspace Type and Source Branch share a single row using a wrapper div with md:contents (invisible on desktop so children participate directly in the outer flex-wrap). Controls use w-full on mobile and restore fixed widths on desktop. Updated Storybook story to conditionally check row separation only on narrow viewports (desktop has section inline in the header row).
|
@codex review |
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 3965a8e83c
ℹ️ 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".
Two SectionPicker instances exist in the DOM (desktop inline + mobile own-row). Use querySelectorAll + offsetWidth/offsetHeight filter to find the currently visible one instead of queryByTestId which throws on multiple matches.
|
@codex review |
1 similar comment
|
@codex review |
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: aee10ee7d9
ℹ️ 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".
|
@codex review |
|
Codex Review: Didn't find any major issues. Delightful! ℹ️ About Codex in GitHubCodex has been enabled to automatically review pull requests in this repo. Reviews are triggered when you
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". |
1 participant
Summary
Responsive section selector layout: inline on desktop, own row on mobile. Plus mobile row sharing for Workspace Type and Source Branch controls.
Background
On mobile, the section selector was crammed into the same flex row as the project name and workspace name, causing overlap. Additionally, Workspace Type and Source Branch were stacking vertically on narrow viewports instead of sharing a row.
Implementation
hidden md:block+flex-1spacer. On mobile (<768px) it drops to its own row viamd:hidden.divusingmd:contents— on desktop the wrapper is invisible (children flow directly in the outerflex-wrap), on mobile it becomes aflex w-full gap-3row withflex-1children so both controls share the width. Select triggers usew-full md:w-[168px]/w-full md:w-[140px]for responsive sizing.CreateWorkspaceWithSectionswith mobile Chromatic modes. Positional assertion (section below header) is conditional onwindow.innerWidth < 768. Sidebar state cleanup infinallyblock prevents cross-story leaks.Generated with
mux• Model:anthropic:claude-opus-4-6• Thinking:xhigh• Cost:$19.01