ali
/
jey_theme
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

css: fix child-table row edit blocked by freeze backdrop 

The jey-section-in keyframe animated opacity + transform with
animation-fill-mode: both, which leaves a persistent stacking context on
.section-body in Firefox. That trapped Frappe's .form-in-grid (z-index
1021) under #freeze.modal-backdrop (z-index 1020), so every mouse click
on the row-edit form got captured by #freeze and closed the form. Tab
and typing still worked. Slide via top instead of transform, drop the
opacity keyframe entirely. Also stop lifting .form-section on
focus-within (same trap mechanism); lift the awesomplete listbox itself
instead so Link-field dropdowns still escape sibling sections.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Ali 2026-05-14 12:41:05 +00:00
parent 3dd6c325f5
commit e79cea96b7
1 changed files with 23 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
jey_theme/public/css/shared.css
View File

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