From c588196580b3eb73bf38f4fd1f8e128badea6b60 Mon Sep 17 00:00:00 2001
From: Tom Butcher <thomasbutcher15@gmail.com>
Date: Sun, 26 Jul 2026 15:00:50 +0100
Subject: [PATCH] Refactor AlertsDisplay component to simplify layout and
 remove mobile-specific logic

- Removed the useMediaQuery hook and associated mobile rendering logic, streamlining the component's structure.
- Updated the return statement to consistently render alerts within a Flex container, enhancing layout consistency.
---
 .../Dashboard/common/AlertsDisplay.jsx        | 26 +++++--------------
 1 file changed, 6 insertions(+), 20 deletions(-)

diff --git a/src/components/Dashboard/common/AlertsDisplay.jsx b/src/components/Dashboard/common/AlertsDisplay.jsx
index b20f4bf..89b51aa 100644
--- a/src/components/Dashboard/common/AlertsDisplay.jsx
+++ b/src/components/Dashboard/common/AlertsDisplay.jsx
@@ -1,11 +1,10 @@
 import PropTypes from 'prop-types'
 import { createElement } from 'react'
-import { Flex, Alert, Button, Dropdown, Popover } from 'antd'
+import { Flex, Alert, Button, Dropdown } from 'antd'
 import ExclamationOctagonIcon from '../../Icons/ExclamationOctagonIcon'
 import InfoCircleIcon from '../../Icons/InfoCircleIcon'
 import { CaretDownOutlined } from '@ant-design/icons'
 
-import { useMediaQuery } from 'react-responsive'
 import { getModelByName } from '../../../database/ObjectModels'
 import { useNavigate } from 'react-router-dom'
 
@@ -15,7 +14,6 @@ const AlertsDisplay = ({
   showDismiss = true,
   showActions = true
 }) => {
-  const isMobile = useMediaQuery({ maxWidth: 768 })
   const getAlertType = (type, priority) => {
     if (type === 'error' || priority === '9') return 'error'
     if (type === 'warning' || priority === '8') return 'warning'
@@ -176,23 +174,11 @@ const AlertsDisplay = ({
     )
   })
 
-  if (isMobile) {
-    return (
-      <Popover
-        content={alertElements}
-        trigger='hover'
-        arrow={false}
-        placement='bottom'
-        classNames={{
-          root: 'printer-alerts-display-popover'
-        }}
-      >
-        <Button>Alerts</Button>
-      </Popover>
-    )
-  }
-
-  return <Flex gap='small'>{alertElements}</Flex>
+  return (
+    <Flex gap='small' style={{ width: '100%' }} vertical align='stretch'>
+      {alertElements}
+    </Flex>
+  )
 }
 
 AlertsDisplay.propTypes = {