Skip to content

Commit 9dc863d

Browse files
authored
🤖 fix: restore vertical token meter on mobile collapsed state (#525)
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`_
1 parent 1aec053 commit 9dc863d

File tree

1 file changed

+1
-1
lines changed

1 file changed

+1
-1
lines changed

src/components/RightSidebar.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -52,8 +52,8 @@ const SidebarContainer: React.FC<SidebarContainerProps> = ({
5252
"bg-separator border-l border-border-light flex flex-col overflow-hidden flex-shrink-0",
5353
customWidth ? "" : "transition-[width] duration-200",
5454
collapsed && "sticky right-0 z-10 shadow-[-2px_0_4px_rgba(0,0,0,0.2)]",
55+
// Mobile: Show vertical meter when collapsed (20px), full width when expanded
5556
"max-md:border-l-0 max-md:border-t max-md:border-border-light",
56-
collapsed && "max-md:w-0 max-md:absolute max-md:bottom-0",
5757
!collapsed && "max-md:w-full max-md:relative max-md:max-h-[50vh]"
5858
)}
5959
style={{ width }}

0 commit comments

Comments
 (0)