From e79cea96b7b78c31fe852baddfdf70c68e281aa3 Mon Sep 17 00:00:00 2001
From: Ali <010109ali@gmail.com>
Date: Thu, 14 May 2026 12:41:05 +0000
Subject: [PATCH] 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>
---
 jey_theme/public/css/shared.css | 38 ++++++++++++++++++++-------------
 1 file changed, 23 insertions(+), 15 deletions(-)

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