🤖 Fix chat controls wrapping on constrained viewports #411
+52
−41
Conversation
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
|
Updated the fix to decompose the ChatToggles component into individual groups with explicit flex behavior:
Each component now has |
|
Added |
|
Changed approach completely - instead of trying to make items wrap (which fights against the hardcoded margins in ThinkingSlider
This approach works WITH the existing component layouts instead of fighting against them. |
Added flex-wrap to the chat controls row to prevent overflow on narrow viewports. Controls (ModelSelector, ThinkingSlider, Context1MCheckbox, and mode toggles) now wrap to multiple lines when space is constrained instead of overflowing horizontally. Changes: - Added flex-wrap and gap-y-1 to controls container - Controls maintain proper alignment while allowing responsive wrapping
Removed ChatToggles wrapper and decomposed into individual components with explicit flex behavior: - ModelSelectorGroup: flex shrink (can compress) - ThinkingSliderGroup: flex shrink-0 (fixed width) - Context1MGroup: flex shrink-0 (fixed width) - Mode toggles: ml-auto (pushes to right) Each component now has: - data-component attribute for debugging - Explicit shrink behavior (shrink vs shrink-0) - Proper gap-x-3 spacing between items - gap-y-1 for wrapped rows This allows proper wrapping and compression on constrained viewports.
Added min-w-0 to all flex container and items to override the default min-width:auto behavior that prevents flex items from shrinking below their content size. Without min-w-0: - Flex items have min-width: auto (content-based minimum) - Items can't shrink below their content width - flex-wrap doesn't trigger because items won't compress With min-w-0: - Flex items can shrink below content size - Wrapping triggers when container width is constrained - Items properly respond to viewport constraints
Changed approach from flex-wrap to overflow scrolling with progressive hiding of controls on smaller viewports: - Parent container: overflow-x-auto (allows horizontal scroll as last resort) - ModelSelector: always visible, pr-3 spacing - ThinkingSlider: hidden below 600px (@container width) - Context1M: hidden below 500px (@container width) - Mode toggles: hidden below 700px (@container width, existing) This approach: - Prevents awkward wrapping with hardcoded component margins (ml-5, ml-2) - Progressively removes less critical controls on narrow viewports - Allows horizontal scroll if all else fails - Respects existing component layouts
Remove hardcoded margins from ThinkingSlider and Context1MCheckbox, let parent container handle spacing with gap-3. This makes the layout more responsive and easier to reason about. - ThinkingSlider: ml-5 → handled by parent gap - Context1MCheckbox: ml-2 → handled by parent gap - ChatInput: pr-3 on child → gap-3 on parent
Replace horizontal scrolling with proper flex wrapping: - Parent: overflow-x-auto → flex-wrap - Children: Remove shrink-0 (allows natural sizing) - Mode toggles: Remove ml-auto (prevents overlap when wrapping) This ensures controls wrap to new lines instead of overlapping content.
- Add justify-between to spread controls across available width - Remove wrapper div internal gaps (parent gap-3 handles all spacing) - Remove 'Thinking:' label from slider (tooltip clarifies purpose) Controls now distribute evenly across the width with consistent gaps.
Use plain flex with gap-3 for natural, consistent spacing. No layout magic needed.
Push mode toggles to the right edge, making controls spread across the available space instead of hugging the left.
All controls now have consistent gap-3 spacing with no special rules.
Mode toggles container has ToggleGroup + HelpIndicator, needs internal gap for spacing between them (like other wrappers).
Controls now spread across full width with even spacing between them. Replaces fixed gap-3 with dynamic justify-between spacing.
Slider now shows just the level (OFF/LOW/MEDIUM/HIGH). Tooltip explains it's the thinking level with keybind. Added aria-label for accessibility.
Changed from 'Thinking:' to 'Thinking level' to match the updated component aria-label.
ammar-agent
force-pushed
the
fix-chat-controls-shrinking
branch
from
85db394 to
f75bb50
Compare
- Replace justify-between with gap-x-3 gap-y-2 for consistent spacing - gap-y-2 adds vertical spacing when controls wrap to new lines - Restore ml-auto on mode toggles to push them to the right - Model-related controls (selector, thinking, context) group naturally on left
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
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
Chat controls under ChatInput (ModelSelector, ThinkingSlider, Context1MCheckbox, mode toggles) don't adapt properly to constrained viewports, causing horizontal overflow or awkward wrapping.
Root Cause
The individual control components have hardcoded left margins (
ThinkingSliderhasml-5,Context1MCheckboxhasml-2) that are part of their content size. These margins prevent proper flex wrapping behavior.Solution
Changed from a wrapping approach to progressive hiding with overflow scrolling as a fallback:
Container
overflow-x-auto- allows horizontal scroll as last resortoverflow-y-hidden- prevents vertical scrollProgressive Hiding (using container queries)
Controls are hidden based on viewport width, from least to most critical:
max-@[700px]:hidden) - hide below 700px (existing)max-@[600px]:hidden) - hide below 600px (new)max-@[500px]:hidden) - hide below 500px (new)Benefits
data-componentattribute for easy debuggingChanges
ChatInput.tsxflex-wrapwithoverflow-x-automin-w-0flex hacks (no longer needed)Generated with
cmux