From d7a2819ddb69622606b1df275106cac9c0dcf880 Mon Sep 17 00:00:00 2001 From: Ammar Date: Fri, 7 Nov 2025 15:43:31 +0000 Subject: [PATCH] =?UTF-8?q?=F0=9F=A4=96=20fix:=20restore=20vertical=20toke?= =?UTF-8?q?n=20meter=20on=20mobile=20collapsed=20state?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 4d7ba600 (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`_ --- src/components/RightSidebar.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/RightSidebar.tsx b/src/components/RightSidebar.tsx index 3eb7cd7a5..e99b8929b 100644 --- a/src/components/RightSidebar.tsx +++ b/src/components/RightSidebar.tsx @@ -52,8 +52,8 @@ const SidebarContainer: React.FC = ({ "bg-separator border-l border-border-light flex flex-col overflow-hidden flex-shrink-0", customWidth ? "" : "transition-[width] duration-200", collapsed && "sticky right-0 z-10 shadow-[-2px_0_4px_rgba(0,0,0,0.2)]", + // Mobile: Show vertical meter when collapsed (20px), full width when expanded "max-md:border-l-0 max-md:border-t max-md:border-border-light", - collapsed && "max-md:w-0 max-md:absolute max-md:bottom-0", !collapsed && "max-md:w-full max-md:relative max-md:max-h-[50vh]" )} style={{ width }}