Skip to content

Keep composer actions aligned while stopping (CL-7293) - #570

Merged
TheGreatAxios merged 6 commits into
corbitsdev:mainfrom
pratikbuilds:cl-542-composer-action-alignment
Sep 4, 2026
Merged

TheGreatAxios merged 6 commits into
corbitsdev:mainfrom
pratikbuilds:cl-542-composer-action-alignment

Conversation

@pratikbuilds

@pratikbuilds pratikbuilds commented Sep 2, 2026 •

Copy link
Copy Markdown
Contributor

Summary

Keeps Stop and Send in one right-aligned action group while a turn is running.

Send remains available for a queued follow-up while Stop cancels the active turn.

Verification

  • bun run check
  • Composer regression coverage for grouped actions and queued sends

Fixes #542

Fixes CL-7293

@TheGreatAxios TheGreatAxios left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Groups Stop and Send under a single grid cell so the 3-column .chat-composer-actions grid doesn't misalign when a 4th child (Stop) appears during a running turn — clean, targeted fix with a plausible root-cause story matching the bug it closes (#542).

Must fix

None.

Consider

  • packages/chat-ui/src/composer.tsx: aria-label/title for the Send button still branch only on sending (sending ? composerSending : composerSend), unchanged by this PR but now visually adjacent to Stop in the same group — worth double-checking that a screen reader user gets a clear enough label distinguishing "Send" from "Stop" when both render side by side (both are icon-only buttons).
  • packages/chat-ui/src/styles.css: .chat-composer-submit-actions gap (0.25rem) is a new ad-hoc value; it's consistent with the file's existing convention of literal rem values (no spacing custom properties exist in this file), so not a blocker, but flagging in case a token system is introduced later.

Verified

  • gap: 0.25rem and other literal rem spacing values match the existing convention throughout styles.css (no CSS custom-property spacing tokens are used anywhere in this file) — not a DESIGN.md violation.
  • Both buttons still use the shared Button component and @corbits/icons icons from @corbits/react-ui — no duplicated primitive.
  • The wrapping <div className="chat-composer-submit-actions"> correctly reduces .chat-composer-actions back to exactly 3 direct children (attach, keyboard hint, submit-actions), matching the grid's 1fr auto 1fr template regardless of whether Stop is rendered — this is the actual fix for the alignment bug.
  • New tests (keeps Stop and Send together..., keeps queued sends available while Stop is visible) exercise the DOM structure and the queued-send behavior directly rather than just re-asserting old expectations; CI (build-test, e2e, isolation, lint, structural, typecheck, db-suites) is all green.

@pratikbuilds

Copy link
Copy Markdown
Contributor Author

Reviewed all feedback on this PR.

  • Added regression coverage confirming that the adjacent icon-only controls expose distinct accessible names: Stop and Send.
  • Kept the 0.25rem action-group gap unchanged because it follows the existing literal-rem spacing convention in this stylesheet.

The review had no must-fix items.

Verification: bun test test/composer.test.tsx (25 passing) and bun run check.

@TheGreatAxios TheGreatAxios changed the title Keep composer actions aligned while stopping Keep composer actions aligned while stopping (CL-7293) Sep 3, 2026
@TheGreatAxios
TheGreatAxios merged commit 4b364aa into corbitsdev:main Sep 4, 2026
7 checks passed
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.

Send and stop controls become misaligned after sending a message

2 participants