Skip to content

Conversation

@ammar-agent
Copy link
Collaborator

@ammar-agent ammar-agent commented Oct 24, 2025

Follow-on to #411

Changes:

  • Consistent gaps: All internal control gaps now use gap-1.5 (ModelSelector, ThinkingSlider, Context1M wrappers)
  • Shorter label: Removed 'Context' suffix from 1M checkbox (now just '1M')
  • CSS Grid layout: Replaced flexbox with CSS Grid to prevent mode toggles from wrapping

Grid Layout:

  • Left column (1fr): Model controls that can wrap internally
  • Right column (auto): Mode toggles that stay right-aligned
  • Mode toggles hide at 500px (for very narrow viewports)

This eliminates the need for arbitrary breakpoints - the grid naturally keeps mode toggles in their own column, preventing them from wrapping to a new line alongside model controls.

Generated with cmux

- Standardize all internal gaps to gap-1.5 for consistency
- Remove 'Context' suffix from 1M checkbox (now just '1M')
- Make mode toggles hide more aggressively (550px instead of 700px)
  to prevent wrapping instead of using arbitrary breakpoint
550px was too conservative - mode toggles were still wrapping.
800px ensures they hide before wrapping occurs in most cases.
Use CSS Grid with [1fr auto] columns to prevent unwanted wrapping:
- Left column: Model controls (wraps internally with gap-x-3 gap-y-2)
- Right column: Mode toggles (fixed width, stays right-aligned)
- Mode toggles hide at 500px container width instead of arbitrary 800px

This ensures mode toggles never wrap to a new line alongside model
controls - they stay in their own column until hidden on narrow viewports.
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.

1 participant