fix(composer): keep the bottom bar on one line and collapse extras behind a container-query overflow menu - #127
Open
sergiomaldo wants to merge 1 commit into
Open
Conversation
…hind a container-query overflow menu Real-user feedback (finding LegalQuants#9): at ~1400px viewports (and narrower Arc-style windows) the composer's 8 bottom-row controls wrapped badly — 'Keep skills on' broke into 3 lines and the model alias wrapped inside its own button. - Every bottom-bar control is whitespace-nowrap; the model picker shows alias + short model name on one line and truncates with an ellipsis (max-w-56 + min-w-0) instead of wrapping. - The composer is now a CSS container (@container/composer). Below the @3xl container width the trust pill + Prompts + Enhance collapse behind a '⋯' More-options popover (single DOM instance, CSS-switched via display: contents vs popover panel), so browser sidebars are handled too. Skill, Keep-skills, matter picker and the clip stay visible. - Keep-skills is a compact toggle: single-line 'Skills stay on' label and a '· N' count; the about page copy follows the rename. - All functionality stays reachable; aria labels and testids intact; the '⋯' button exposes aria-expanded and closes on Escape/outside click. Component tests: single-line toggle label + compact count, the overflow group containing Prompts/Enhance, and the More-options toggle behavior. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Problem
The composer footer stacks eight controls in one row: model picker, hosting/locality pill, + Skill, keep-skills toggle (with its counter), attach clip, Prompts, Enhance, and Send. At real-world desktop widths the row compresses and wraps badly — observed at ~1400px effective viewport (browsers that reserve horizontal space, e.g. sidebar browsers, make it worse): "Keep skills on / Keeping 1 on" wrapped to three lines and the model alias wrapped inside its own button.
Fix
whitespace-nowrap; the model picker shows alias + short model name on one line and truncates with an ellipsis (max-w-56+min-w-0) instead of wrapping.@container/composer). Below the@3xlcontainer width, the trust pill + Prompts + Enhance collapse behind a "⋯" More-options popover (single DOM instance, CSS-switched viadisplay: contentsvs popover panel) — container queries mean browser sidebars are handled, not just narrow screens. Skill, keep-skills, matter picker, and the clip stay visible.aria-expandedand closes on Escape/outside click.Tests
Component tests cover the single-line toggle label + compact count, the overflow group containing Prompts/Enhance, and the More-options toggle behavior.
Provenance
Found operating a production self-hosted legal deployment (a law firm running Donna v0.6.2 fully local) on ordinary laptop viewports.
CI note:
prettier --checkcurrently fails onmainitself (docs/superpowers/HANDOFF-v0.6.2-release.md); #122 fixes it, so this branch's lint job goes green once that lands.svelte-check,eslint, and vitest all pass on this branch.🤖 Generated with Claude Code