Make storyboard editor mobile friendly - #4449
Merged
Merged
Conversation
The storyboard editor laid out three side-by-side columns (board list, board, assistant), which don't fit a phone. Edit mode now collapses to a single pane on small screens with a segmented Boards/Board/Assistant switcher; every pane stays mounted so board, chat, and scroll state survive switches. The wide-screen layout is unchanged. - StoryboardSurface: mobile branch with a TabGroup pane switcher. - Sidebar and agent panel fill the pane at full width on phones. - Reveal shot row actions and the sidebar delete on coarse-pointer (touch) devices, which can't hover. - Tighten board padding on narrow viewports. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_0125u626BuvzzSkQjXoriaeK
Contributor
There was a problem hiding this comment.
Pull request overview
Improves the storyboard editor UX on small/touch devices by collapsing the edit-mode 3-column layout into a single-pane experience with a segmented switcher, while keeping the existing wide-screen layout and view-mode behavior intact.
Changes:
- Added an
sm-and-down edit-mode layout inStoryboardSurfaceusing aTabGroupswitcher between Boards / Board / Assistant, keeping panes mounted and toggling viadisplay. - Updated sidebar/agent panel layout and board spacing to better fit narrow viewports.
- Ensured touch users can access actions previously revealed only on
:hover(shot row actions, sidebar delete).
Reviewed changes
Copilot reviewed 5 out of 5 changed files in this pull request and generated 1 comment.
Show a summary per file
| File | Description |
|---|---|
| web/src/components/workspace/StoryboardSurface.tsx | Adds mobile single-pane edit-mode layout with TabGroup pane switcher while preserving desktop/view behavior. |
| web/src/components/storyboard/StoryboardSidebar.tsx | Makes sidebar full-width on mobile and keeps delete affordance visible on coarse pointers. |
| web/src/components/storyboard/StoryboardBoard.tsx | Reduces padding/gap on narrow viewports to reclaim horizontal space. |
| web/src/components/storyboard/StoryboardAgentPanel.tsx | Ensures agent panel fills available width in the mobile pane. |
| web/src/components/storyboard/ShotCard.tsx | Keeps shot row actions visible on coarse-pointer devices via HoverActionGroup.alwaysVisible. |
Comment on lines
+123
to
+136
| if (isMobile && mode !== "view") { | ||
| return ( | ||
| <FlexColumn fullHeight sx={{ minHeight: 0, position: "relative" }}> | ||
| <TabGroup | ||
| tabs={MOBILE_TABS} | ||
| value={mobilePane} | ||
| onChange={(value) => setMobilePane(value as MobilePane)} | ||
| size="small" | ||
| fullWidth | ||
| sx={{ | ||
| flexShrink: 0, | ||
| borderBottom: `1px solid ${theme.vars.palette.divider}` | ||
| }} | ||
| /> |
Replace the `as MobilePane` cast on the TabGroup change handler with a runtime type guard, so an unexpected tab value can't slip into state if the tab list ever changes. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_0125u626BuvzzSkQjXoriaeK
Comment on lines
+286
to
+290
| <HoverActionGroup | ||
| triggerSelector=".shot-card:hover" | ||
| gap={0} | ||
| alwaysVisible={coarsePointer} | ||
| > |
- ShotCard: reveal row actions on coarse-pointer devices via a CSS media
query on HoverActionGroup instead of a per-card useMediaQuery, avoiding
N matchMedia listeners on boards with many shots.
- StoryboardBoard: use theme.breakpoints.down("sm") instead of a
hardcoded 600px query, matching the other storyboard components.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_0125u626BuvzzSkQjXoriaeK
Comment on lines
+146
to
+166
| <div style={{ flex: 1, minHeight: 0, display: "flex" }}> | ||
| <div | ||
| style={{ | ||
| flex: 1, | ||
| minWidth: 0, | ||
| minHeight: 0, | ||
| display: mobilePane === "boards" ? "flex" : "none" | ||
| }} | ||
| > | ||
| <StoryboardSidebar activeBoardId={refId} /> | ||
| </div> | ||
| <div | ||
| style={{ | ||
| flex: 1, | ||
| minWidth: 0, | ||
| minHeight: 0, | ||
| display: mobilePane === "board" ? "block" : "none" | ||
| }} | ||
| > | ||
| {board} | ||
| </div> |
Comment on lines
+167
to
+176
| <div | ||
| style={{ | ||
| flex: 1, | ||
| minWidth: 0, | ||
| minHeight: 0, | ||
| display: mobilePane === "assistant" ? "flex" : "none" | ||
| }} | ||
| > | ||
| <StoryboardAgentPanel boardId={refId} /> | ||
| </div> |
Only one storyboard pane shows at a time and each child owns its own layout, so the switcher body uses plain block boxes toggled via display instead of inline flex wrappers with no-op flex:1 children, per the web/src/AGENTS.md guidance. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_0125u626BuvzzSkQjXoriaeK
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What
The storyboard editor rendered three side-by-side columns — the board list (220px), the board, and the assistant chat (320px) — which can't fit on a phone. This makes the editor usable on small/touch screens.
Changes
StoryboardSurface: on phones (smbreakpoint) in edit mode, the three columns collapse to a single pane with a segmented Boards / Board / Assistant switcher (TabGroup). Every pane stays mounted and is toggled viadisplay, so board edits, chat history, and scroll position survive switching. The wide-screen layout is unchanged, and view mode (board-only) is untouched.StoryboardSidebar/StoryboardAgentPanel: fill the pane at full width on phones (sidebar drops its fixed 220px rail width and right border belowsm).:hover, unreachable on touch. They now stay visible on coarse-pointer devices.StoryboardBoard: tighter padding/gap on narrow viewports to reclaim horizontal room for shots. The header form grid and shot cards already stacked responsively.Testing
tsc --noEmitclean (web)eslintclean on all changed filesjest src/components/storyboard— 39/39 pass🤖 Generated with Claude Code
https://claude.ai/code/session_0125u626BuvzzSkQjXoriaeK
Generated by Claude Code