fix: disable CSS transition on tab switch to eliminate jank

Author: ibetitsmike

src/browser/components/RightSidebar.tsx

@@ -57,11 +57,29 @@ const SidebarContainer: React.FC<SidebarContainerProps> = ({
         : "300px";
   console.log("[SidebarContainer] width calc:", { isCollapsed, customWidth, wide, computedWidth: width });
 
+  // Track previous width to detect tab switches vs resize drags
+  // Tab switches: large width jumps (e.g., 400→976) - no animation wanted
+  // Resize drags: small incremental changes - smooth animation wanted
+  const prevWidthRef = React.useRef<string>(width);
+  const widthDelta = Math.abs(
+    parseInt(width) - parseInt(prevWidthRef.current)
+  );
+  // Consider it a "tab switch" if width changes by more than 50px in one render
+  const isTabSwitch = !isNaN(widthDelta) && widthDelta > 50;
+  
+  React.useEffect(() => {
+    prevWidthRef.current = width;
+  }, [width]);
+
+  // Only animate during resize (small incremental changes), not tab switches
+  const shouldAnimate = !isResizing && !isTabSwitch;
+  console.log("[SidebarContainer] animation:", { width, prevWidth: prevWidthRef.current, widthDelta, isTabSwitch, shouldAnimate });
+
   return (
     <div
       className={cn(
         "bg-sidebar border-l border-border-light flex flex-col overflow-hidden flex-shrink-0",
-        !isResizing && "transition-[width] duration-200",
+        shouldAnimate && "transition-[width] duration-200",
         // Mobile: full width
         "max-md:border-l-0 max-md:border-t max-md:border-border-light max-md:w-full max-md:relative max-md:max-h-[50vh]"
       )}