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:
@@ -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;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user