fix(site): wrap workspace topbar controls on narrow viewports#27313
Merged
Conversation
Collaborator
Author
|
@codex review |
|
Codex Review: Didn't find any major issues. Nice work! Reviewed commit: ℹ️ About Codex in GitHubYour team has set up Codex to review pull requests in this repo. Reviews are triggered when you
If Codex has suggestions, it will comment; otherwise it will react with 👍. Codex can also answer questions or update the PR. Try commenting "@codex address that feedback". |
ThomasK33
approved these changes
Jul 17, 2026
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 subscribe to this conversation on GitHub.
Already have an account?
Sign in.
2 participants
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.
On mobile-width viewports the workspace page grew to ~1080px wide (390px viewport), pushing the schedule controls, status indicator, and action buttons off-screen. Users had to zoom out or scroll horizontally to reach Stop/Restart/Favorite/Share.
The topbar header and the right-side controls group used non-wrapping flex rows, and every child is a
whitespace-nowrapbutton, so the row's minimum width (~725px for the controls alone) forced the document wider than the viewport.Changes
WorkspaceTopbar: allow the topbar header and the right controls group to wrap; right controls stay right-aligned when they wrap onto their own row.WorkspaceActions: allow the button row to wrap.TopbarData: merge a caller-providedclassName(no existing caller passed one); the workspace breadcrumbs use it to wrap on very narrow screens.Verification
Compared before/after with agent-browser on Storybook stories (
Workspace: Running,WorkspaceTopbar: Outdated / WithQuotaWithOrgs / Dormant / ConnectedWithMaxDeadline):scrollWidthscrollWidthAt widths >= 1280 the layout is unchanged (0% pixel diff at 1440 across the stories above). Between ~1080-1230px the controls now wrap onto a second right-aligned row instead of squeezing label text onto two lines inside a single row.
Validation:
biome check,tsc --noEmit, andpnpm test:storybookforWorkspace.stories.tsx+WorkspaceTopbar.stories.tsx(36 passed).