Skip to content

fix(app): make the subagent back button readable and tappable - #62334

Closed
patricksmms wants to merge 1 commit into
anomalyco:devfrom
patricksmms:subagent-back-button
Closed

patricksmms wants to merge 1 commit into
anomalyco:devfrom
patricksmms:subagent-back-button

Conversation

@patricksmms

@patricksmms patricksmms commented Nov 6, 2026 •

Copy link
Copy Markdown

Issue for this PR

Closes #60864

Type of change

  • Bug fix

What does this PR do?

On a narrow screen the subagent bar's model text did not shrink, so it painted over Main session and made both unreadable. The back control itself was a ghost-faint 24px button, so it did not look tappable and fell below the touch target size.

This hides the secondary model name below sm, clips the remaining status line, and gives the way back an outlined button with an arrow. On coarse pointers the bar and button grow to 44px so the whole row is a comfortable target. Desktop keeps the 32px row and the full agent/model line.

How did you verify your code works?

  • bun run typecheck in packages/app.
  • Added a touch-viewport component test for the bar height, the hidden model, and the tap.
  • Existing subagent bar component tests pass, including the 1280px model line and Escape navigation.
  • Ran the same story at 390×844 with hasTouch before and after: the before shot shows the model text under the button, the after shot shows Running · 1m 06s · Surveyor and a clear button.

Visual

<svg width="240" height="72" viewBox="0 0 240 72" fill="none" xmlns="http://www.w3.org/2000/svg">
  <text x="8" y="62" fill="currentColor" opacity=".45" font-size="10">Running · 1m 06s · Surveyor</text>
  <rect x="150" y="28" width="82" height="26" rx="6" stroke="currentColor" stroke-opacity=".25"/>
  <text x="166" y="46" fill="currentColor" opacity=".45" font-size="11">Main session</text>
  <g>
    <rect x="150" y="28" width="82" height="26" rx="6" stroke="currentColor"/>
    <animate attributeName="stroke-opacity" values=".2;1;1;.2" dur="4s" repeatCount="indefinite"/>
    <text x="166" y="46" fill="currentColor" font-size="11">Main session</text>
    <animate attributeName="opacity" values=".4;1;1;.4" dur="4s" repeatCount="indefinite"/>
  </g>
</svg>

Screenshots / recordings

390×844 with hasTouch, child subagent session.

Before After
Before After

Checklist

  • I have tested my changes locally
  • I have not included unrelated changes in this PR

@github-actions github-actions Bot added needs:compliance This means the issue will auto-close after 2 hours. and removed needs:compliance This means the issue will auto-close after 2 hours. labels Nov 6, 2026
@github-actions

github-actions Bot commented Nov 6, 2026

Copy link
Copy Markdown
Contributor

Thanks for updating your PR! It now meets our contributing guidelines. 👍

@opencodejr opencodejr Bot closed this Nov 6, 2026
@opencodejr

opencodejr Bot commented Nov 6, 2026

Copy link
Copy Markdown
Contributor

Thanks for picking this up and for the before/after screenshots and the touch-viewport test!

I think this duplicates #57922. That PR redesigns the subagent bar into one 44px line, clips any overflow and moves the model/provider text into a tooltip, which removes the cause of #60864. An earlier fix for the same issue (#61035) was closed in favor of that redesign.

If the redesign is missing something you covered here, like the outlined back button with an arrow or the coarse-pointer touch target, it would help to say so on #57922 or test it at 390px with touch.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Bug] UI Bug in mobile view on google pixel 6

1 participant