Unify status card styles

1 files changed, 18 insertions, 4 deletions

diff --git a/modern/src/common/components/StatusCard.js b/modern/src/common/components/StatusCard.js
index 6b8a9fd3..c6ab1f51 100644
--- a/modern/src/common/components/StatusCard.js
+++ b/modern/src/common/components/StatusCard.js
@@ -77,6 +77,20 @@ const useStyles = makeStyles((theme) => ({
   actions: {
     justifyContent: 'space-between',
   },
+  root: ({ desktopPadding }) => ({
+    position: 'fixed',
+    zIndex: 5,
+    left: '50%',
+    [theme.breakpoints.up('md')]: {
+      left: `calc(50% + ${desktopPadding} / 2)`,
+      bottom: theme.spacing(3),
+    },
+    [theme.breakpoints.down('md')]: {
+      left: '50%',
+      bottom: `calc(${theme.spacing(3)} + ${theme.dimensions.bottomBarHeight}px)`,
+    },
+    transform: 'translateX(-50%)',
+  }),
 }));
 
 const StatusRow = ({ name, content }) => {
@@ -94,8 +108,8 @@ const StatusRow = ({ name, content }) => {
   );
 };
 
-const StatusCard = ({ deviceId, position, onClose, disableActions }) => {
-  const classes = useStyles();
+const StatusCard = ({ deviceId, position, onClose, disableActions, desktopPadding = 0 }) => {
+  const classes = useStyles({ desktopPadding });
   const navigate = useNavigate();
   const dispatch = useDispatch();
   const t = useTranslation();
@@ -153,7 +167,7 @@ const StatusCard = ({ deviceId, position, onClose, disableActions }) => {
   }, [navigate]);
 
   return (
-    <>
+    <div className={classes.root}>
       {device && (
         <Draggable
           handle={`.${classes.media}, .${classes.header}`}
@@ -259,7 +273,7 @@ const StatusCard = ({ deviceId, position, onClose, disableActions }) => {
         itemId={deviceId}
         onResult={(removed) => handleRemove(removed)}
       />
-    </>
+    </div>
   );
 };