farmcontrol/farmcontrol-ui
farmcontrol/farmcontrol-ui
2
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

Enhance notification drawer responsiveness by adjusting width based on mobile screen size.

Browse Source
This commit is contained in:
Tom Butcher 2026-03-06 23:43:03 +00:00
parent e4255443a0
commit 62f0e047e2
1 changed files with 4 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/components/Dashboard/context/NotificationContext.jsx
View File

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