From aa4b744b1862010aab76e403091acc8d941edfcd Mon Sep 17 00:00:00 2001
From: isaacclad <sense.corporate@gmail.com>
Date: Sat, 4 Jul 2026 22:42:18 +0000
Subject: [PATCH] Fix modal flash when opening Events unlink dialog.

Teleport modals to body, hide until Alpine is ready, use a single fade transition, and lock scroll on html with stable scrollbar gutter.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 resources/css/app.css                      |   1 +
 resources/views/components/modal.blade.php | 137 +++++++++++----------
 2 files changed, 71 insertions(+), 67 deletions(-)

diff --git a/resources/css/app.css b/resources/css/app.css
index 57cfd06..c5d33af 100644
--- a/resources/css/app.css
+++ b/resources/css/app.css
@@ -24,6 +24,7 @@
 /* App shell: always light (ignore OS dark mode). Live meeting keeps dark UI. */
 html.app-shell {
     color-scheme: light;
+    scrollbar-gutter: stable;
 }
 
 @media (max-width: 1023px) {
diff --git a/resources/views/components/modal.blade.php b/resources/views/components/modal.blade.php
index a823707..accdafe 100644
--- a/resources/views/components/modal.blade.php
+++ b/resources/views/components/modal.blade.php
@@ -14,75 +14,78 @@ $maxWidth = [
 ][$maxWidth];
 @endphp
 
-<div
-    x-data="{
-        show: @js($show),
-        focusables() {
-            let selector = 'a, button, input:not([type=\'hidden\']), textarea, select, details, [tabindex]:not([tabindex=\'-1\'])'
-            return [...$el.querySelectorAll(selector)]
-                .filter(el => ! el.hasAttribute('disabled'))
-        },
-        firstFocusable() { return this.focusables()[0] },
-        lastFocusable() { return this.focusables().slice(-1)[0] },
-        nextFocusable() { return this.focusables()[this.nextFocusableIndex()] || this.firstFocusable() },
-        prevFocusable() { return this.focusables()[this.prevFocusableIndex()] || this.lastFocusable() },
-        nextFocusableIndex() { return (this.focusables().indexOf(document.activeElement) + 1) % (this.focusables().length + 1) },
-        prevFocusableIndex() { return Math.max(0, this.focusables().indexOf(document.activeElement)) -1 },
-    }"
-    x-init="$watch('show', value => {
-        if (value) {
-            document.body.classList.add('overflow-y-hidden');
-            {{ $attributes->has('focusable') ? 'setTimeout(() => firstFocusable().focus(), 100)' : '' }}
-        } else {
-            setTimeout(() => { if (!show) document.body.classList.remove('overflow-y-hidden'); }, 200);
-        }
-    })"
-    x-on:open-modal.window="String($event.detail) === @js($name) ? show = true : null"
-    data-modal-name="{{ $name }}"
-    x-on:close-modal.window="String($event.detail) === @js($name) ? show = false : null"
-    x-on:close.stop="show = false"
-    x-on:keydown.escape.window="show = false"
-    x-on:keydown.tab.prevent="$event.shiftKey || nextFocusable().focus()"
-    x-on:keydown.shift.tab.prevent="prevFocusable().focus()"
-    x-show="show"
-    x-cloak
-    x-transition:enter="transition-opacity ease-out duration-200"
-    x-transition:enter-start="opacity-0"
-    x-transition:enter-end="opacity-100"
-    x-transition:leave="transition-opacity ease-in duration-150"
-    x-transition:leave-start="opacity-100"
-    x-transition:leave-end="opacity-0"
-    class="fixed inset-0 z-50 flex items-end sm:items-center sm:justify-center"
-    style="background: rgba(0,0,0,0.45); backdrop-filter: blur(3px);"
->
-    {{-- Backdrop click to close --}}
-    <div class="absolute inset-0" x-on:click="show = false" data-close-modal="{{ $name }}"></div>
-
-    {{-- Panel: bottom-sheet on mobile, centered card on sm+ --}}
+<template x-teleport="body">
     <div
+        x-data="{
+            show: @js($show),
+            lockScroll() {
+                document.documentElement.classList.add('overflow-hidden');
+            },
+            unlockScroll() {
+                document.documentElement.classList.remove('overflow-hidden');
+            },
+            focusables() {
+                let selector = 'a, button, input:not([type=\'hidden\']), textarea, select, details, [tabindex]:not([tabindex=\'-1\'])'
+                return [...$el.querySelectorAll(selector)]
+                    .filter(el => ! el.hasAttribute('disabled'))
+            },
+            firstFocusable() { return this.focusables()[0] },
+            lastFocusable() { return this.focusables().slice(-1)[0] },
+            nextFocusable() { return this.focusables()[this.nextFocusableIndex()] || this.firstFocusable() },
+            prevFocusable() { return this.focusables()[this.prevFocusableIndex()] || this.lastFocusable() },
+            nextFocusableIndex() { return (this.focusables().indexOf(document.activeElement) + 1) % (this.focusables().length + 1) },
+            prevFocusableIndex() { return Math.max(0, this.focusables().indexOf(document.activeElement)) -1 },
+        }"
+        x-init="$watch('show', value => {
+            if (value) {
+                lockScroll();
+                {{ $attributes->has('focusable') ? 'setTimeout(() => firstFocusable().focus(), 100)' : '' }}
+            } else {
+                unlockScroll();
+            }
+        })"
+        x-on:open-modal.window="String($event.detail) === @js($name) ? show = true : null"
+        data-modal-name="{{ $name }}"
+        x-on:close-modal.window="String($event.detail) === @js($name) ? show = false : null"
+        x-on:close.stop="show = false"
+        x-on:keydown.escape.window="show = false"
+        x-on:keydown.tab.prevent="$event.shiftKey || nextFocusable().focus()"
+        x-on:keydown.shift.tab.prevent="prevFocusable().focus()"
         x-show="show"
-        class="relative z-10 w-full max-h-[90vh] overflow-y-auto rounded-t-3xl bg-white shadow-2xl sm:mb-6 sm:max-h-[85vh] sm:rounded-2xl {{ $maxWidth }} sm:border sm:border-gray-200"
-        x-transition:enter="ease-out duration-300"
-        x-transition:enter-start="translate-y-full sm:translate-y-0 sm:opacity-0 sm:scale-95"
-        x-transition:enter-end="translate-y-0 sm:opacity-100 sm:scale-100"
-        x-transition:leave="ease-in duration-200"
-        x-transition:leave-start="translate-y-0 sm:opacity-100 sm:scale-100"
-        x-transition:leave-end="translate-y-full sm:translate-y-0 sm:opacity-0 sm:scale-95"
-        x-on:click.stop
+        x-cloak
+        style="display: none;"
+        x-transition:enter="transition ease-out duration-200"
+        x-transition:enter-start="opacity-0"
+        x-transition:enter-end="opacity-100"
+        x-transition:leave="transition ease-in duration-150"
+        x-transition:leave-start="opacity-100"
+        x-transition:leave-end="opacity-0"
+        class="fixed inset-0 z-50 flex items-end sm:items-center sm:justify-center bg-black/45 backdrop-blur-[3px]"
+        role="dialog"
+        aria-modal="true"
     >
-        {{-- Drag handle (mobile only) --}}
-        <div class="flex justify-center pb-1 pt-3 sm:hidden">
-            <div class="h-1 w-10 rounded-full bg-slate-200"></div>
+        {{-- Backdrop click to close --}}
+        <div class="absolute inset-0" x-on:click="show = false" data-close-modal="{{ $name }}"></div>
+
+        {{-- Panel: bottom-sheet on mobile, centered card on sm+ --}}
+        <div
+            class="relative z-10 w-full max-h-[90vh] overflow-y-auto rounded-t-3xl bg-white shadow-2xl sm:mb-6 sm:max-h-[85vh] sm:rounded-2xl {{ $maxWidth }} sm:border sm:border-gray-200"
+            x-on:click.stop
+        >
+            {{-- Drag handle (mobile only) --}}
+            <div class="flex justify-center pb-1 pt-3 sm:hidden">
+                <div class="h-1 w-10 rounded-full bg-slate-200"></div>
+            </div>
+
+            {{-- Close button (desktop only) --}}
+            <button @click="show = false" data-close-modal="{{ $name }}" type="button"
+                    class="absolute right-3 top-3 z-10 hidden h-8 w-8 items-center justify-center rounded-full text-gray-400 transition hover:bg-gray-100 hover:text-gray-600 sm:flex">
+                <svg class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"/>
+                </svg>
+            </button>
+
+            {{ $slot }}
         </div>
-
-        {{-- Close button (desktop only) --}}
-        <button @click="show = false" data-close-modal="{{ $name }}" type="button"
-                class="absolute right-3 top-3 z-10 hidden h-8 w-8 items-center justify-center rounded-full text-gray-400 transition hover:bg-gray-100 hover:text-gray-600 sm:flex">
-            <svg class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
-                <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"/>
-            </svg>
-        </button>
-
-        {{ $slot }}
     </div>
-</div>
+</template>