From 3b4ded2fabc074730229a5bb56110e64af586eca Mon Sep 17 00:00:00 2001
From: josh <josh.dredge@outlook.com>
Date: Fri, 21 Aug 2026 21:45:52 +1000
Subject: [PATCH] Fixed notification menu on mobile

---
 .../FlightsGoneBy/NotificationMenu.vue        | 29 +++++++++++++++++--
 1 file changed, 27 insertions(+), 2 deletions(-)

diff --git a/resources/js/Components/FlightsGoneBy/NotificationMenu.vue b/resources/js/Components/FlightsGoneBy/NotificationMenu.vue
index b65d9c5..8c77a13 100644
--- a/resources/js/Components/FlightsGoneBy/NotificationMenu.vue
+++ b/resources/js/Components/FlightsGoneBy/NotificationMenu.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, watch, onMounted } from 'vue'
+import { ref, watch, onMounted, onUnmounted } from 'vue'
 import axios from "axios";
 import { Notification } from "@/Types/types";
 import { Link } from "@inertiajs/vue3";
@@ -18,6 +18,7 @@ onMounted(() => {
 const open = ref(false)
 const notifications = ref<Notification[]>([])
 const loading = ref(false)
+const wrapperRef = ref<HTMLElement | null>(null)
 
 const markAllRead = async (notifications: Notification[]) => {
     const unread = notifications.filter(n => !n.read_at)
@@ -27,6 +28,20 @@ const markAllRead = async (notifications: Notification[]) => {
     unread.forEach(n => n.read_at = new Date().toISOString())
 }
 
+const handleClickOutside = (event: MouseEvent) => {
+    if (open.value && wrapperRef.value && !wrapperRef.value.contains(event.target as Node)) {
+        open.value = false
+    }
+}
+
+onMounted(() => {
+    document.addEventListener('click', handleClickOutside)
+})
+
+onUnmounted(() => {
+    document.removeEventListener('click', handleClickOutside)
+})
+
 watch(open, async (isOpen) => {
     if (!isOpen) return
 
@@ -43,7 +58,7 @@ watch(open, async (isOpen) => {
 </script>
 
 <template>
-    <div class="notif-wrapper">
+    <div class="notif-wrapper" ref="wrapperRef">
         <v-btn icon variant="text" @click="open = !open" aria-label="Notifications">
             <v-badge :content="store.unreadCount" :model-value="store.unreadCount > 0" color="primary">
                 <v-icon>mdi-bell-outline</v-icon>
@@ -106,6 +121,16 @@ watch(open, async (isOpen) => {
     overflow: hidden;
 }
 
+@media (max-width: 480px) {
+    .notif-menu {
+        position: fixed;
+        top: 4.5rem; /* adjust to sit just below your navbar height */
+        left: 50%;
+        transform: translateX(-50%);
+        width: min(320px, calc(100vw - 1.5rem));
+    }
+}
+
 .notif-header {
     display: flex;
     align-items: center;