Repository navigation
fix(app): keep subagent status clear on mobile - #61035
Antonio-Faure wants to merge 1 commit into
Conversation
At a 412px viewport the provider and variant pushed the model line under the Main session button by 30-47px. Hide those secondary labels below the sm breakpoint, let the model name take the remaining width and truncate, and keep the status, elapsed time and agent visible.\n\nAdd a component test at Pixel 6 width that fails on dev and passes with the change.
github-actions
Bot
added
needs:compliance
|
Thanks for updating your PR! It now meets our contributing guidelines. 👍 |
![opencodejr[bot]](https://avatars.githubusercontent.com/in/5497873?s=60&v=4){kind=small}
There was a problem hiding this comment.
This fixes the reported overlap at 412px (Pixel 6), but it doesn't fully fix narrower phones.
How I checked: I ran the component stories in Chromium on the base and on this branch, for the done and running states.
| Width | Base | This PR |
|---|---|---|
| 412px | Text runs 30px (done) / 47px (running) under Main session | 8px of space before the button |
| 360px | Overlaps | No overlap, but the model name disappears and the line ends in a stray · |
| 320px | Overlaps | Still overlaps by 20px (done) / 37px (running) |
The new test fails on the base and passes here. The existing subagent-bar tests pass, and tsc -b in packages/app passes.
Public API: unchanged (styling of one app component only).
Concerns:
- The middle container still has no
overflow-hidden, and the status, elapsed time and agent spans can't shrink. At narrower widths the line still paints under the button (details inline). - The new test checks only the done story at exactly 412px, so it misses both of the cases above. Either cover a narrower width (e.g. 320px) and the running state, or drop the test so the change stays minimal.
This also touches the same component as the open #57922, which redesigns this bar, so the two will conflict.
Related: #59069
| <Match when={part === "model" && props.model}> | ||
| {(model) => ( | ||
| <span data-slot="subagent-model" class="flex min-w-0"> | ||
| <span data-slot="subagent-model" class="flex min-w-0 flex-1"> |
There was a problem hiding this comment.
This only fixes widths where status, elapsed and agent still fit. Those spans are shrink-0 and the parent div.flex-1 (line 65) has no overflow-hidden, so:
- At 360px (running story) the model name shrinks to 0 width, leaving a trailing
·. - At 320px the text still runs 20–37px under Main session.
The fix suggested in #60864 would handle both:
- Add
overflow-hiddento the middle container, so nothing can paint under the button. - Let the agent span truncate too (or give the model a small
min-w), so the line ellipsizes instead of losing the model entirely.
|
Closing in favor of #57922, which redesigns this bar and removes the model/provider row that caused the overflow. The 320px/360px measurements are in the review above if they help that redesign. |
Issue for this PR
Fixes #60864
Type of change
What does this PR do?
At a 412px viewport, the subagent status line's provider and variant pushed the model text under the Main session button by 30–47px. The model name could not truncate because those secondary labels kept their full width.
This hides the provider, slash and variant below the
smbreakpoint, lets the model name take the remaining space and truncate, and keeps the status, elapsed time and agent visible. Desktop layout still shows the full provider / model / variant line.How did you verify your code works?
From
packages/app:bunx playwright test --config playwright.components.config.ts component-tests/subagent-bar.spec.ts— 3 passed. The new phone-width test fails onbf544cdwith 30px of overlap and passes with the change (8px clearance).bun typecheck— no errors (1,898 files).The new test mounts the existing
app-current-session-surface--child-session-donestory at 412×915 and measures the text content against the button box.Checklist
Added by the opencode bot (AI-generated).
Related: #59069