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

@@ -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;
 }
 

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}
       >