Skip to content

fix(app): keep prompt submit visible on narrow displays - #43298

Closed
bmpenuelas wants to merge 4 commits into
anomalyco:devfrom
bmpenuelas:mobile-composer
Closed

fix(app): keep prompt submit visible on narrow displays#43298
bmpenuelas wants to merge 4 commits into
anomalyco:devfrom
bmpenuelas:mobile-composer

Conversation

@bmpenuelas

@bmpenuelas bmpenuelas commented Aug 18, 2026 •
edited
Loading

Copy link
Copy Markdown

Issue for this PR

Closes #43295

Type of change

  • Bug fix
  • New feature
  • Refactor / code improvement
  • Documentation

What does this PR do?

On narrow viewports, prompt controls can overflow into the submit button and receive taps intended for send. This keeps the submit button in its own non-shrinking space, makes excess controls horizontally scrollable, and keeps individual selectors from shrinking into the submit area.

The regression test uses a 320 px viewport with a long model name and verifies that the controls overflow within their scroll container while the submit button remains outside it.

How did you verify your code works?

Added regression test.

Screenshots / recordings

BEFORE:
image

AFTER: (note that the selector also becomes scrollable so the user can slide back and forth to see more, or click/tap the chevrons to see more to the right or to the left)
image

Checklist

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

@bmpenuelas bmpenuelas mentioned this pull request Aug 19, 2026
Closed
@Enough1122

Enough1122 commented Aug 22, 2026

Copy link
Copy Markdown

AI code review — automated review for reference; please use your judgment.

  1. packages/session-ui/src/v2/components/prompt-input/index.tsx:198-201 — overflow-x-auto no-scrollbar hides overflowing controls with no visual affordance. Why it matters: on narrow displays users get no cue that more controls exist off-screen, and mouse users have no scrollbar to reach them (only trackpad/touch gestures or keyboard focus scrolling). Suggestion: add a subtle edge fade/mask when scrollWidth > clientWidth, or ensure every control is reachable via keyboard focus so hidden items are still discoverable.

  2. packages/app/e2e/regression/prompt-thinking-level.spec.ts:66 — expect(scrollWidth > clientWidth).toBe(true) hard-codes that controls must overflow at 320px. Why it matters: this is a white-box assertion about current CSS, not about user-visible behavior — a future improvement that fits controls without hiding the submit button would fail this test despite being better UX. Suggestion: assert only the invariant you actually care about (submit visible and to the right of / not overlapped by controls), and drop or soften the overflow assertion.

  3. packages/app/src/components/prompt-input-v2.tsx:520,537 vs packages/session-ui/src/v2/components/prompt-input/index.tsx:577 — the identical min-w-0 max-w-[220px] shrink-0 justify-start ![font-weight:440] button styling is now hand-synced across two packages. Why it matters: these copies already drifted once (this PR had to fix both), and the next styling tweak can miss one copy, reintroducing layout divergence between app and session-ui. Suggestion: extract a shared class constant/component for the prompt model/variant controls, or add a lint/test that fails when the two diverge.

  4. packages/session-ui/src/v2/components/prompt-input/index.tsx:695 — relative z-10 on the submit button is a stacking-order workaround rather than a real fix. Why it matters: it paints the submit above any sibling that gains a background later, which can mask overlap bugs instead of preventing them; flexbox already guarantees non-overlapping siblings once shrink-0 is set. Suggestion: keep shrink-0 and remove z-10, or document the specific overlap scenario it defends against.

nit: packages/session-ui/src/v2/components/prompt-input/index.tsx:695 — max-sm:size-10 max-sm:p-[12px] enlarges the touch target below 640px but there is a hard jump back to 28px right at the breakpoint; consider verifying 640–700px widths still have an adequate hit area.

— reviewer-h (automated AI reviewer)

@bmpenuelas
fix(app): improve prompt control overflow
fa98e0f
@bmpenuelas
fix(app): address prompt overflow review
fd4fcc7 
Keep tooltip-wrapped prompt controls from shrinking so the control strip scrolls instead of overlapping Submit. Correct the directional chevrons and centralize the complete model/variant sizing classes shared by app and session-ui.
@bmpenuelas

bmpenuelas commented Aug 24, 2026

Copy link
Copy Markdown
Author

Addressed the review feedback in fd4fcc7: added directional overflow affordances, removed the white-box overflow assertion, centralized prompt-control classes, removed the submit z-index workaround, and fixed tooltip wrapper shrinking plus chevron direction.

@github-actions github-actions Bot mentioned this pull request Sep 4, 2026
Closed
3 of 6 tasks
@Capicua25x

Capicua25x commented Sep 4, 2026

Copy link
Copy Markdown

Hi, I ran into the same overlap on Android and opened #47330 before I saw this one, sorry for the noise. It takes a different route (the labels ellipsize via min-w-0 at the span, button and tooltip-wrapper levels instead of scrolling the row), so I left it up for the maintainers to pick the behavior they prefer. If they go with the scroll approach here, I'll close mine, and the min-w-0 on the TooltipV2 trigger wrapper may be worth folding in either way, since that wrapper is what blocks the buttons from shrinking.

Capicua25x added a commit to Capicua25x/opencode that referenced this pull request Sep 4, 2026
@Capicua25x
app: regression test for the composer footer on a narrow viewport (an…
b7ad205 
…omalyco#43295)

Mocks a model with a long display name and a variant, opens a session at 320 px and asserts that the
controls row, the model button and the variant chip all end before the send button starts, and that the
send button stays inside the viewport. Adds a data-slot="prompt-controls" anchor on the controls row.

The idea of asserting the send button's box against the controls' box at 320 px comes from
bmpenuelas' anomalyco#43298; this is a fresh spec written for the truncation approach.
@bmpenuelas

bmpenuelas commented Sep 4, 2026

Copy link
Copy Markdown
Author

Hi @Capicua25x! No worries, I also started a bit different and then added some changes based on the review comments. I favor the scroll because it allows users to see more of the model name without needing to tap it. But as long as they merge a fix, I'm happy with either solution.

@Capicua25x

Capicua25x commented Sep 4, 2026

Copy link
Copy Markdown

Small addition that helped in my testing: min-w-0 on the TooltipV2 trigger wrapper of the model control (in PromptInputV2ModelControl, prompt-input-v2.tsx). Without it the model chip inside the track is cut mid-word at the clip edge instead of ellipsizing.

@russrapper15-png

russrapper15-png commented Sep 4, 2026 via email

Copy link
Copy Markdown

@bmpenuelas

bmpenuelas commented Sep 4, 2026

Copy link
Copy Markdown
Author

Thanks a lot @Capicua25x for the testing and the support!

@richard-fairthorne

richard-fairthorne commented Sep 12, 2026

Copy link
Copy Markdown

Thanks for pushing this forward — a signal from downstream: I've been running a bespoke build off this branch (mobile-composer, based on the earlier 101228be8) as my daily driver, because the overlap makes the composer hard to use on narrow displays. The fix has held up well in regular use.

Is there anything blocking a maintainer review here? Happy to test any further revisions.

This was referenced Oct 1, 2026
Closed
Closed
Closed
@opencode-agent opencode-agent Bot mentioned this pull request Oct 9, 2026
Closed
@thdxr

thdxr commented Oct 10, 2026

Copy link
Copy Markdown
Member

This branch has been upgraded to V2. We're no longer taking PRs for V1. If you think this is still relevant, please port it over and open it for V2.

— from 𝕺𝖕𝖊𝖓𝕮𝖔𝖉𝖊

@thdxr thdxr closed this Oct 10, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@Hona Hona Awaiting requested review from Hona
@Brendonovich Brendonovich Awaiting requested review from Brendonovich

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

Web UI V2 prompt controls overlap the send button on narrow displays

6 participants

@bmpenuelas @Enough1122 @Capicua25x @russrapper15-png @richard-fairthorne @thdxr