From 6b45c398e0b49338f263b477407940f433bee4d7 Mon Sep 17 00:00:00 2001
From: Zac Gaetano <zgaetano@wilddragon.net>
Date: Wed, 13 May 2026 00:26:02 -0400
Subject: [PATCH] fix(preview): drawer uses display:none + animation when
 opened

Replace the transform-only approach with display:none / display:flex
switching, plus a @keyframes drawer-slide-in for the entry animation.
The previous translateX trick let the drawer-head close button's SVG
bleed through somehow (likely a browser rendering quirk on a 4K display
with HiDPI scaling); display:none guarantees the hidden state stays
fully hidden across all browsers.

Visual is the same when the drawer is open; only the closed state is
hardened. Drawer still slides in on the rail settings button or the
banner "Open settings" CTA.
---
 docs/preview/redesigned-mainwindow.html | 18 +++++++++++++-----
 1 file changed, 13 insertions(+), 5 deletions(-)

diff --git a/docs/preview/redesigned-mainwindow.html b/docs/preview/redesigned-mainwindow.html
index 3bcde25..f6ca3da 100644
--- a/docs/preview/redesigned-mainwindow.html
+++ b/docs/preview/redesigned-mainwindow.html
@@ -427,16 +427,24 @@
   /* Settings drawer */
   .drawer {
     position: absolute;
-    top: 44px; right: 0; bottom: 0;
+    top: 44px;
+    right: 0;
+    bottom: 0;
     width: 400px;
     background: var(--bg-surface);
     border-left: 1px solid var(--border-subtle);
-    transform: translateX(100%);
-    transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1);
-    display: flex; flex-direction: column;
+    flex-direction: column;
     z-index: 5;
+    display: none;
+  }
+  .drawer.open {
+    display: flex;
+    animation: drawer-slide-in 220ms cubic-bezier(0.16, 1, 0.3, 1);
+  }
+  @keyframes drawer-slide-in {
+    from { transform: translateX(420px); }
+    to { transform: translateX(0); }
   }
-  .drawer.open { transform: translateX(0); }
   .drawer-head {
     height: 56px;
     padding: 0 12px 0 20px;