Changes

resources/js/Components/Dropdown.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { computed, onMounted, onUnmounted, ref } from 'vue';
+import { computed, nextTick, onMounted, onUnmounted, ref, watch } from 'vue';
 
 const props = defineProps({
     align: {
@@ -17,6 +17,9 @@ const props = defineProps({
 });
 
 let open = ref(false);
+const triggerEl = ref(null);
+const panelEl = ref(null);
+const panelStyle = ref({ top: '0px', left: '0px' });
 
 const closeOnEscape = (e) => {
     if (open.value && e.key === 'Escape') {
@@ -24,8 +27,54 @@ const closeOnEscape = (e) => {
     }
 };
 
+const updatePosition = () => {
+    const t = triggerEl.value;
+    const p = panelEl.value;
+    if (!t || !p) return;
+    const rect = t.getBoundingClientRect();
+    // Ensure we have updated width
+    const pw = p.offsetWidth || 0;
+    const ph = p.offsetHeight || 0;
+    const margin = 8; // small spacing from trigger
+    let left = rect.left;
+    if (props.align === 'right') {
+        left = rect.right - pw;
+    } else if (props.align === 'left') {
+        left = rect.left;
+    }
+    // Clamp within viewport
+    const maxLeft = Math.max(0, window.innerWidth - pw - margin);
+    left = Math.min(Math.max(margin, left), maxLeft);
+    let top = rect.bottom + margin;
+    // If not enough space below, place above the trigger
+    if (top + ph > window.innerHeight) {
+        top = Math.max(margin, rect.top - ph - margin);
+    }
+    panelStyle.value = { top: `${top}px`, left: `${left}px` };
+};
+
+const onWindowChange = () => {
+    updatePosition();
+};
+
+watch(open, async (val) => {
+    if (val) {
+        await nextTick();
+        updatePosition();
+        window.addEventListener('resize', onWindowChange);
+        window.addEventListener('scroll', onWindowChange, true);
+    } else {
+        window.removeEventListener('resize', onWindowChange);
+        window.removeEventListener('scroll', onWindowChange, true);
+    }
+});
+
 onMounted(() => document.addEventListener('keydown', closeOnEscape));
-onUnmounted(() => document.removeEventListener('keydown', closeOnEscape));
+onUnmounted(() => {
+    document.removeEventListener('keydown', closeOnEscape);
+    window.removeEventListener('resize', onWindowChange);
+    window.removeEventListener('scroll', onWindowChange, true);
+});
 
 const widthClass = computed(() => {
     return {
@@ -47,33 +96,35 @@ const alignmentClasses = computed(() => {
 </script>
 
 <template>
-    <div class="relative">
+    <div class="relative" ref="triggerEl">
         <div @click="open = ! open">
             <slot name="trigger" />
         </div>
 
-        <!-- Full Screen Dropdown Overlay -->
-        <div v-show="open" class="fixed inset-0 z-40" @click="open = false" />
+        <teleport to="body">
+            <!-- Full Screen Dropdown Overlay at body level -->
+            <div v-show="open" class="fixed inset-0 z-[2147483646]" @click="open = false" />
 
-        <transition
-            enter-active-class="transition ease-out duration-200"
-            enter-from-class="transform opacity-0 scale-95"
-            enter-to-class="transform opacity-100 scale-100"
-            leave-active-class="transition ease-in duration-75"
-            leave-from-class="transform opacity-100 scale-100"
-            leave-to-class="transform opacity-0 scale-95"
-        >
-            <div
-                v-show="open"
-                class="absolute z-50 mt-2 rounded-md shadow-lg"
-                :class="[widthClass, alignmentClasses]"
-                style="display: none;"
-                @click="open = false"
+            <transition
+                enter-active-class="transition ease-out duration-200"
+                enter-from-class="transform opacity-0 scale-95"
+                enter-to-class="transform opacity-100 scale-100"
+                leave-active-class="transition ease-in duration-75"
+                leave-from-class="transform opacity-100 scale-100"
+                leave-to-class="transform opacity-0 scale-95"
             >
-                <div class="rounded-md ring-1 ring-black ring-opacity-5" :class="contentClasses">
-                    <slot name="content" />
+                <div
+                    v-show="open"
+                    ref="panelEl"
+                    class="fixed z-[2147483647] rounded-md shadow-lg"
+                    :class="[widthClass]"
+                    :style="[panelStyle]"
+                >
+                    <div class="rounded-md ring-1 ring-black ring-opacity-5" :class="contentClasses" @click="open = false">
+                        <slot name="content" />
+                    </div>
                 </div>
-            </div>
-        </transition>
+            </transition>
+        </teleport>
     </div>
 </template>