From 62f0e047e24c04b62a589619a31e371f9763819b Mon Sep 17 00:00:00 2001
From: Tom Butcher <thomasbutcher15@gmail.com>
Date: Fri, 6 Mar 2026 23:43:03 +0000
Subject: [PATCH] Enhance notification drawer responsiveness by adjusting width
 based on mobile screen size.

---
 src/components/Dashboard/context/NotificationContext.jsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/components/Dashboard/context/NotificationContext.jsx b/src/components/Dashboard/context/NotificationContext.jsx
index 8f0df30..49acb02 100644
--- a/src/components/Dashboard/context/NotificationContext.jsx
+++ b/src/components/Dashboard/context/NotificationContext.jsx
@@ -12,6 +12,7 @@ import { AuthContext } from './AuthContext'
 import { ApiServerContext } from './ApiServerContext'
 import NotificationCenter from '../common/NotificationCenter'
 import Notification from '../common/Notification'
+import { useMediaQuery } from 'react-responsive'
 
 const NotificationContext = createContext()
 
@@ -34,6 +35,8 @@ const NotificationProvider = ({ children }) => {
   const [notifications, setNotifications] = useState([])
   const [notificationsLoading, setNotificationsLoading] = useState(false)
 
+  const isMobile = useMediaQuery({ maxWidth: 768 })
+
   const fetchNotifications = useCallback(async () => {
     if (!authenticated) return []
     setNotificationsLoading(true)
@@ -174,7 +177,7 @@ const NotificationProvider = ({ children }) => {
       <Drawer
         title='Notifications'
         placement='right'
-        width={400}
+        width={isMobile ? '100%' : 460}
         onClose={() => setNotificationCenterVisible(false)}
         open={notificationCenterVisible}
       >