From 8c073a598a48112a9438bc629c7c40b90065c948 Mon Sep 17 00:00:00 2001
From: Tom Butcher <tom@tombutcher.work>
Date: Sun, 9 Aug 2026 19:21:24 +0100
Subject: [PATCH] Enhance modal and drawer styling in App.css for improved UI
 consistency

- Added styling for `.ant-drawer-mask` to match the existing `.ant-modal-mask` backdrop filter.
- Updated the positioning of `.electron-body .ant-drawer` to align with modal adjustments, ensuring a cohesive layout across components.
---
 assets/stylesheets/App.css                               | 6 ++++--
 src/components/Dashboard/context/NotificationContext.jsx | 4 ----
 2 files changed, 4 insertions(+), 6 deletions(-)

diff --git a/assets/stylesheets/App.css b/assets/stylesheets/App.css
index 6a3737d..773bbb2 100644
--- a/assets/stylesheets/App.css
+++ b/assets/stylesheets/App.css
@@ -344,7 +344,8 @@ body {
   overflow: hidden;
 }
 
-.ant-modal-mask {
+.ant-modal-mask,
+.ant-drawer-mask {
   backdrop-filter: blur(3px);
 }
 
@@ -967,7 +968,8 @@ span.ant-skeleton-input.ant-skeleton-input-sm.text-skeleton {
 }
 
 .electron-body .ant-modal-wrap,
-.electron-body .ant-modal-mask {
+.electron-body .ant-modal-mask,
+.electron-body .ant-drawer {
   top: 41px;
 }
 
diff --git a/src/components/Dashboard/context/NotificationContext.jsx b/src/components/Dashboard/context/NotificationContext.jsx
index 4e5c472..5e15bbb 100644
--- a/src/components/Dashboard/context/NotificationContext.jsx
+++ b/src/components/Dashboard/context/NotificationContext.jsx
@@ -13,7 +13,6 @@ import { ApiServerContext } from './ApiServerContext'
 import NotificationCenter from '../common/NotificationCenter'
 import Notification from '../common/Notification'
 import { useMediaQuery } from 'react-responsive'
-import { ElectronContext } from './ElectronContext'
 
 const NotificationContext = createContext()
 
@@ -36,8 +35,6 @@ const NotificationProvider = ({ children }) => {
   const [notifications, setNotifications] = useState([])
   const [notificationsLoading, setNotificationsLoading] = useState(false)
 
-  const { isElectron } = useContext(ElectronContext)
-
   const isMobile = useMediaQuery({ maxWidth: 768 })
 
   const fetchNotifications = useCallback(async () => {
@@ -183,7 +180,6 @@ const NotificationProvider = ({ children }) => {
         title='Notifications'
         placement='right'
         width={isMobile ? '100%' : 460}
-        style={{ marginTop: isElectron ? '40px' : '0px' }}
         onClose={() => setNotificationCenterVisible(false)}
         open={notificationCenterVisible}
       >