fix(adminui): modal backdrop offset came from .rise's retained transform, not 100vw (#631)

Live-measured on docker-dev: the backdrop was viewport-wide (1911px) but started at the
panel's left edge (241px) because the theme's .rise animation (fill-mode both) leaves an
identity transform on section.panel, re-basing position:fixed descendants. Override the
fill mode to backwards; drops the speculative backdrop/dialog sizing overrides.

Claude-Session: https://claude.ai/code/session_01Ef2ozxS7QPanGT8uoATbTe
This commit is contained in:
Joseph Doherty
2026-10-08 14:22:32 -04:00
parent c9fdcc3ea6
commit da203d5d7e
@@ -49,21 +49,13 @@
width: 18px;
}
/* Modal sizing (#631). Bootstrap sizes .modal-backdrop with 100vw/100vh, and 100vw includes the
scrollbar gutter, so on a tall form (Configure driver / Modbus) the backdrop overran the viewport
and produced a page-level horizontal scrollbar. Pin it with inset:0 instead (no vw/vh), and keep
the dialog inside the viewport. These modals are hand-rolled (display:block, no Bootstrap JS). */
.modal-backdrop {
inset: 0;
width: auto;
height: auto;
}
.modal {
overflow-x: hidden;
overflow-y: auto;
}
.modal-dialog {
max-width: min(var(--bs-modal-width, 500px), calc(100vw - 2rem));
/* Modal backdrop overran the viewport on /raw (#631). The theme's `.rise` entrance animation runs with
`animation-fill-mode: both`, which keeps its final keyframe's transform applied for good — and ANY
transform (even the identity it leaves) makes that section the containing block for position:fixed
descendants. A modal rendered inside a `.panel.rise` therefore had its fixed backdrop offset by the
panel's left edge, so it ran 240px past the viewport and the page grew a horizontal scrollbar.
`backwards` keeps the hidden start state during the stagger delay but drops the transform once the
animation ends. (Upstream fix belongs in ZB.MOM.WW.Theme's theme.css.) */
.rise {
animation-fill-mode: backwards;
}