From 158282e84df27e48fc849048cccdb8f157db35f9 Mon Sep 17 00:00:00 2001
From: PunGrumpy <108584943+PunGrumpy@users.noreply.github.com>
Date: Sat, 8 Aug 2026 00:21:04 +0700
Subject: [PATCH] fix(web): stop the zoom pill width jump when Reset appears

The Reset button was conditionally mounted, so the floating zoom pill
snapped wider and narrower every time zoom crossed 100%. The button now
stays in the DOM inside a grid wrapper whose columns animate 0fr to 1fr
(with an opacity fade), so the pill expands smoothly, collapses to zero
width when idle, and the transition retargets mid-flight. While hidden
the wrapper is inert, keeping the button out of the tab order and the
accessibility tree; under reduced motion the safe-list snaps the width
and keeps the fade.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 apps/web/components/optimizer-preview.tsx | 36 +++++++++++++++--------
 1 file changed, 23 insertions(+), 13 deletions(-)

diff --git a/apps/web/components/optimizer-preview.tsx b/apps/web/components/optimizer-preview.tsx
index 3d6bbc6..7d3282b 100644
--- a/apps/web/components/optimizer-preview.tsx
+++ b/apps/web/components/optimizer-preview.tsx
@@ -73,19 +73,29 @@ const ZoomControls = ({ zoom, setTransform }: ZoomControlsProps) => (
     >
       <ZoomIn className="size-3 text-gray-800" />
     </Button>
-    {zoom > 1 && (
-      <Button
-        className="ml-1 text-[11px] px-2 h-8 flex items-center gap-1 cursor-pointer rounded-full opacity-100 translate-x-0 scale-100 transition-[opacity,translate,scale] duration-150 ease-out starting:opacity-0 starting:-translate-x-2 starting:scale-95"
-        size="sm"
-        variant="ghost"
-        onClick={() => {
-          setTransform({ pan: { x: 0, y: 0 }, zoom: 1 });
-        }}
-      >
-        <RotateCcw className="size-3 text-gray-800" />
-        Reset
-      </Button>
-    )}
+    <div
+      className={cn(
+        "grid transition-[grid-template-columns] duration-150 ease-out",
+        zoom > 1 ? "grid-cols-[1fr]" : "grid-cols-[0fr]"
+      )}
+    >
+      <div className="min-w-0 overflow-hidden" inert={zoom <= 1}>
+        <Button
+          className={cn(
+            "ml-1 flex h-8 cursor-pointer items-center gap-1 whitespace-nowrap rounded-full px-2 text-[11px] transition-opacity duration-150 ease-out",
+            zoom > 1 ? "opacity-100" : "opacity-0"
+          )}
+          size="sm"
+          variant="ghost"
+          onClick={() => {
+            setTransform({ pan: { x: 0, y: 0 }, zoom: 1 });
+          }}
+        >
+          <RotateCcw className="size-3 text-gray-800" />
+          Reset
+        </Button>
+      </div>
+    </div>
   </div>
 );