From 252c649c4515e409be480e6ba0cfe7376b253f6a Mon Sep 17 00:00:00 2001
From: Andreas Reinhold / reini <reini@kadenpartner.ch>
Date: Wed, 16 Sep 2026 21:02:48 +0200
Subject: [PATCH] Keep a closing docked search above the page until its view
 has gone

The docked search raised itself to z-index 50 only while open, so the
moment it closed, positioned content later on the page could cover the
view while it faded out. The root now keeps the stacking for as long as
its view carries the `md-transition` class Alpine's x-transition sets
for the length of the exit. The browser test samples the view part-way
through its fade and counts it only while the root is still at 50; it
fails without the change and passes in Chrome, Firefox and Safari.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 resources/css/components/search.css |  6 ++++--
 tests/Browser/PickingTest.php       | 13 +++++++++++++
 2 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/resources/css/components/search.css b/resources/css/components/search.css
index 51c8678d..56366c05 100644
--- a/resources/css/components/search.css
+++ b/resources/css/components/search.css
@@ -45,8 +45,10 @@
         position: relative;
     }
 
-    /* Full screen, through its exit too: the fixed view and bar stay above the page while they leave. */
-    [data-md-search]:is([data-md-open], [data-md-full-screen]) {
+    /* Above the page while open, and while the view leaves: full screen through `data-md-full-screen`,
+       docked through the `md-transition` class Alpine's `x-transition` carries for the length of the
+       view's exit, so later positioned content on the page never covers the fading view. */
+    [data-md-search]:is([data-md-open], [data-md-full-screen], :has(> [data-md-search-view].md-transition)) {
         z-index: 50;
     }
 
diff --git a/tests/Browser/PickingTest.php b/tests/Browser/PickingTest.php
index 780ce7f5..1eec3edb 100644
--- a/tests/Browser/PickingTest.php
+++ b/tests/Browser/PickingTest.php
@@ -212,6 +212,19 @@ it('fades the docked search\'s scrim out on close, rather than making it vanish'
     $page->assertScript("getComputedStyle({$root}.querySelector('[data-md-search-scrim]')).display === 'none'");
 });
 
+it('keeps the docked search above the page while its view closes', function () {
+    $view = "document.querySelector('#find-view')";
+
+    $page = pickProbe()
+        ->click('#find')
+        ->assertScript("getComputedStyle({$view}).display !== 'none' && getComputedStyle({$view}).opacity === '1'");
+
+    // The view caught part-way through its fade only counts while the root is still at z-index 50.
+    expect($page->script(searchCloseSample('[data-md-search-view]', "getComputedStyle(root).zIndex === '50' ? parseFloat(getComputedStyle(element).opacity) : 0")))->toBeTrue();
+
+    $page->assertScript("getComputedStyle({$view}).display === 'none' && getComputedStyle(document.querySelector('[data-md-search]:has(#find)')).zIndex !== '50'");
+});
+
 it('closes the docked search view back into its bar, rather than making it vanish', function () {
     $view = "document.querySelector('#find-view')";