🤖 fix: restore vertical token meter on mobile collapsed state #525
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
Collaborator
Author
|
✅ All relevant checks passed The integration test failure in
Passing checks:
The UI fix removes |
Removed the problematic `position: absolute; bottom: 0` styling for collapsed mobile sidebar that caused a strange rectangle to appear at the bottom of the screen on small viewports. ## Problem On mobile (max-width: 768px), when the right sidebar was collapsed, it used `position: absolute; bottom: 0; width: 0` which created a visible rectangular artifact at the bottom of the viewport. This was introduced in commit 4d7ba60 (Oct 21, 2025) during the initial mobile responsive implementation. ## Solution Let mobile collapsed state behave like desktop - show the 20px vertical token meter bar. Removed the mobile-specific override that was forcing `width: 0` and `position: absolute; bottom: 0`. Now on mobile: - Collapsed: Shows 20px vertical token meter (same as desktop) - Expanded: Full width at bottom with 50vh max height The vertical token meter is always useful context, and this approach matches user expectations from the desktop experience. _Generated with `cmux`_
ammar-agent
force-pushed
the
fix-costbar
branch
from
4fd821a to
d7a2819
Compare
ibetitsmike
pushed a commit
that referenced
this pull request
Nov 7, 2025
Fixes the strange rectangle that appeared at the bottom of the screen on mobile viewports when the right sidebar was collapsed. ## Problem On mobile (max-width: 768px), the collapsed right sidebar used `position: absolute; bottom: 0; width: 0` which created a visible rectangular artifact at the bottom of the viewport. This bug was introduced in commit 4d7ba60 (Oct 21, 2025) during the initial mobile responsive implementation and has been present since then. ## Solution Removed the mobile-specific override that forced collapsed sidebar to `width: 0` with absolute positioning at the bottom. Now mobile behavior matches desktop: **Before:** - Collapsed: `width: 0; position: absolute; bottom: 0` → Strange visible rectangle - Expanded: Full width, 50vh max height **After:** - Collapsed: 20px vertical token meter bar (same as desktop) - Expanded: Full width, 50vh max height The vertical token meter provides useful context about token usage and this approach matches user expectations from the desktop experience. ## Testing Verify at various viewport widths: - Desktop (>768px): Vertical meter shows when collapsed ✓ - Tablet/Mobile (≤768px): Vertical meter shows when collapsed (no more weird rectangle) ✓ - Mobile expanded: Full width panel at bottom with proper max-height ✓ _Generated with `cmux`_
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.
Fixes the strange rectangle that appeared at the bottom of the screen on mobile viewports when the right sidebar was collapsed.
Problem
On mobile (max-width: 768px), the collapsed right sidebar used
position: absolute; bottom: 0; width: 0which created a visible rectangular artifact at the bottom of the viewport.This bug was introduced in commit 4d7ba60 (Oct 21, 2025) during the initial mobile responsive implementation and has been present since then.
Solution
Removed the mobile-specific override that forced collapsed sidebar to
width: 0with absolute positioning at the bottom. Now mobile behavior matches desktop:Before:
width: 0; position: absolute; bottom: 0→ Strange visible rectangleAfter:
The vertical token meter provides useful context about token usage and this approach matches user expectations from the desktop experience.
Testing
Verify at various viewport widths:
Generated with
cmux