diff --git a/jey_theme/public/css/shared.css b/jey_theme/public/css/shared.css index 7dd3d15..a5d2767 100644 --- a/jey_theme/public/css/shared.css +++ b/jey_theme/public/css/shared.css @@ -467,20 +467,24 @@ input.list-header-checkbox:checked::after { ========================================================================== */ @keyframes jey-section-in { - from { - opacity: 0; - transform: translateY(-12px); - } - to { - opacity: 1; - } + from { top: -12px; } + to { top: 0; } } -/* Note: `to` intentionally omits `transform` — leaving `translateY(0)` in the - final frame would keep a stacking context on every section after animation - completes, clipping Link-field autocomplete dropdowns behind later sections. */ +/* Slide-only entrance — animating `opacity` here would create a persistent + stacking context on .section-body (Firefox keeps the compositing layer + alive after the animation completes when `fill-mode: both` keeps opacity + fill-forward, even though opacity reaches 1). That stacking context traps + Frappe's child-table row form (.form-in-grid, z-index 1021) under the + freeze backdrop (#freeze.modal-backdrop, z-index 1020): the row form + visually disappears behind the backdrop, every mouse click is captured by + #freeze (whose handler closes the row form), and only keyboard nav works. + Same reason we slide via `top` instead of `transform: translateY()` — + `transform` would also leave behind a stacking context. + `position: relative` alone (without z-index) does NOT create one. */ .form-layout .form-section .section-head, .form-layout .form-section .section-body { + position: relative; animation: jey-section-in 0.7s cubic-bezier(0.22, 1, 0.36, 1) both; } @@ -817,11 +821,15 @@ input.list-header-checkbox:checked::after { to { opacity: 0; } } -/* Lift the section containing an open autocomplete above its siblings so the - dropdown can spill past the section boundary without being painted over by - later sections (which naturally paint above earlier ones in DOM order). */ -.form-layout .form-section:focus-within { - position: relative; +/* Lift the open autocomplete listbox above its siblings so the dropdown can + spill past the section boundary without being painted over by later + sections (which naturally paint above earlier ones in DOM order). + Lift only the listbox itself, NOT the surrounding .form-section, because a + z-index on the section creates a stacking context that traps Frappe's + child-table row form (.form-in-grid, z-index 1021) below the freeze + backdrop (#freeze.modal-backdrop, z-index 1020), leaving the screen + unclickable when editing a row. */ +.awesomplete > ul[role="listbox"]:not([hidden]) { z-index: 10; }