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;
|
width: 18px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Modal sizing (#631). Bootstrap sizes .modal-backdrop with 100vw/100vh, and 100vw includes the
|
/* Modal backdrop overran the viewport on /raw (#631). The theme's `.rise` entrance animation runs with
|
||||||
scrollbar gutter, so on a tall form (Configure driver / Modbus) the backdrop overran the viewport
|
`animation-fill-mode: both`, which keeps its final keyframe's transform applied for good — and ANY
|
||||||
and produced a page-level horizontal scrollbar. Pin it with inset:0 instead (no vw/vh), and keep
|
transform (even the identity it leaves) makes that section the containing block for position:fixed
|
||||||
the dialog inside the viewport. These modals are hand-rolled (display:block, no Bootstrap JS). */
|
descendants. A modal rendered inside a `.panel.rise` therefore had its fixed backdrop offset by the
|
||||||
.modal-backdrop {
|
panel's left edge, so it ran 240px past the viewport and the page grew a horizontal scrollbar.
|
||||||
inset: 0;
|
`backwards` keeps the hidden start state during the stagger delay but drops the transform once the
|
||||||
width: auto;
|
animation ends. (Upstream fix belongs in ZB.MOM.WW.Theme's theme.css.) */
|
||||||
height: auto;
|
.rise {
|
||||||
}
|
animation-fill-mode: backwards;
|
||||||
|
|
||||||
.modal {
|
|
||||||
overflow-x: hidden;
|
|
||||||
overflow-y: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal-dialog {
|
|
||||||
max-width: min(var(--bs-modal-width, 500px), calc(100vw - 2rem));
|
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user