Fix: notification center width on mobile

safe-global · Sep 18, 2023 · e200a0e · e200a0e
1 parent d158e17
commit e200a0e
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 1 deletion.
diff --git a/src/components/notification-center/NotificationCenter/index.tsx b/src/components/notification-center/NotificationCenter/index.tsx
@@ -8,7 +8,6 @@ import IconButton from '@mui/material/IconButton'
 import BellIcon from '@/public/images/notifications/bell.svg'
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore'
 import ExpandLessIcon from '@mui/icons-material/ExpandLess'
-
 import { useAppDispatch, useAppSelector } from '@/store'
 import {
   selectNotifications,

diff --git a/src/components/notification-center/NotificationCenter/styles.module.css b/src/components/notification-center/NotificationCenter/styles.module.css
@@ -13,6 +13,12 @@
   border: 1px solid var(--color-border-light);
 }
 
+@media (max-width: 599.95px) {
+  .popoverContainer {
+    width: calc(100vw - 30px);
+  }
+}
+
 .popoverHeader {
   display: flex;
   align-items: center;