fixing the input ui at certain endpoints causing the button to overflow.

[shivamhwp]

• Move send, stop, and plan follow-up controls into a shared component
• Add compact pending-question and implementation action variants to avoid overflow

origin - https://x.com/KevinVanCott/status/2038274360058753214

What Changed

• Fixed a composer footer layout regression in plan-mode follow-up states after window resize.
• Extracted the right-side composer action cluster into ComposerPrimaryActions so narrow-width behavior is explicit and testable.
• Added compact fallbacks for overflow-prone actions:
  • Pending question flow now collapses Previous to an icon in compact mode.
  • Submit answers shortens to Submit in compact mode.
  • Plan follow-up compact mode now uses separate rounded action pills instead of the fused split Implement button.
• Updated the footer action container to allow wrapping instead of forcing a non-shrinking row.
• Added focused tests for compact pending-question and plan-follow-up action states.

Why

Resizing the app could leave the composer footer in a state where the right-side action cluster was wider than the available space. The old layout combined several constraints that made overflow inevitable:

• the right-side action area was non-shrinking,
• buttons were non-wrapping,
• wide labels like Submit answers and the split Implement button had no narrow fallback,
• the layout depended on a heuristic breakpoint rather than guaranteeing a valid layout at any width.

This change fixes the root cause instead of just adjusting the breakpoint. The footer actions now have a true compact rendering path, so they still fit when the composer becomes narrow after resize.

UI Changes

Before:

Screen.Recording.2026-03-30.at.3.16.26.PM.mov

After:

Screen.Recording.2026-03-30.at.3.41.59.PM.mov

note: don't mind the lag, it's just my machine having low memory !!

Checklist

• This PR is small and focused
• I explained what changed and why
• I included before/after screenshots for any UI changes
• I included a video for animation/interaction changes

---

Note

Medium Risk
Touches core ChatView composer layout and action rendering logic, so regressions could impact sending/plan flows across breakpoints, but changes are UI-only with added regression tests.

Overview
Fixes composer footer action overflow after resizes by switching from a pure breakpoint heuristic to measured fit: ChatView now tracks footer/primary-action compactness using DOM measurements (footer padding/content widths) and forces compact mode when content would overflow.

Extracts the right-side action cluster (send/stop, pending-question navigation, plan follow-up implement/refine) into ComposerPrimaryActions, adding compact variants (shorter labels, icon-only previous button, compact implement+menu layout). Updates compactness breakpoints/helpers in composerFooterLayout.ts, adjusts composer sizing/styles (wider max width, overflow-hidden footer), and adds browser + unit tests to ensure actions remain contained after a real container resize.

^{Written by Cursor Bugbot for commit 1ae6d13. This will update automatically on new commits. Configure here.}

Note

Fix composer footer button overflow at narrow container widths

• Adds dynamic compactness detection to the composer footer in ChatView.tsx: measures content overflow and switches to compact mode when overflow exceeds a recovery threshold.
• Extracts primary action buttons (send, stop, plan, pending question) into a new ComposerPrimaryActions.tsx component that renders shorter labels and icon-only variants in compact mode.
• Updates composerFooterLayout.ts with a wider compactness breakpoint (720px → 780px) and new helpers to measure overflow and decide when to force compact mode.
• Adds browser regression tests that resize the chat container and assert action buttons remain within the footer bounds.
• Behavioral Change: composer form max-width increases from max-w-3xl to max-w-[52rem], slightly widening the input area on larger screens.

^{Macroscope summarized 1ae6d13.}

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Run ID: 211e1ad8-092d-46b5-adb0-c23e2915d25a

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[cursor]

Cursor Bugbot has reviewed your changes and found 1 potential issue.

^{Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.}