WildDragonLLC/dragon-iso
1
0
Fork 0
Code Issues 1 Pull requests Projects Releases 2 Packages Wiki Activity Actions

fix(preview): drawer uses display:none + animation when opened
Some checks failed
CI / build-and-test (push) Failing after 27s
Details

Browse source 
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.
This commit is contained in:
Zac Gaetano 2026-05-13 00:26:02 -04:00
parent 46b1ca5874
commit 6b45c398e0
1 changed files with 13 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
docs/preview/redesigned-mainwindow.html
View file

@ -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;