From 6dbbe0e78bc1cb003d30fd3c7fae6dbeccf6c387 Mon Sep 17 00:00:00 2001
From: viown <48097677+viown@users.noreply.github.com>
Date: Sat, 19 Jul 2025 12:11:50 +0300
Subject: [PATCH] Use legacy grid on dashboard page

---
 src/apps/dashboard/components/BaseCard.tsx    |  2 +-
 .../components/widgets/ServerInfoWidget.tsx   |  6 ++--
 .../backups/components/BackupInfoDialog.tsx   |  6 ++--
 src/apps/dashboard/routes/index.tsx           | 32 ++++++-------------
 4 files changed, 16 insertions(+), 30 deletions(-)

diff --git a/src/apps/dashboard/components/BaseCard.tsx b/src/apps/dashboard/components/BaseCard.tsx
index 891db06373..e97edbab58 100644
--- a/src/apps/dashboard/components/BaseCard.tsx
+++ b/src/apps/dashboard/components/BaseCard.tsx
@@ -64,7 +64,7 @@ const BaseCard = ({ title, secondaryTitle, text, image, icon, to, onClick, actio
             </CardActionArea>
             <CardHeader
                 title={
-                    <Stack direction='row' gap={1} alignItems='center'>
+                    <Stack direction='row' spacing={1} alignItems='center'>
                         <Typography sx={{
                             overflow: 'hidden',
                             whiteSpace: 'nowrap',
diff --git a/src/apps/dashboard/components/widgets/ServerInfoWidget.tsx b/src/apps/dashboard/components/widgets/ServerInfoWidget.tsx
index 04977ba162..da98da16c4 100644
--- a/src/apps/dashboard/components/widgets/ServerInfoWidget.tsx
+++ b/src/apps/dashboard/components/widgets/ServerInfoWidget.tsx
@@ -27,13 +27,13 @@ const ServerInfoWidget = ({ onScanLibrariesClick, onRestartClick, onShutdownClic
                     padding: 2
                 }}>
                     <Stack direction='row'>
-                        <Stack flexGrow={1} gap={1}>
+                        <Stack flexGrow={1} spacing={1}>
                             <Typography fontWeight='bold'>{globalize.translate('LabelServerName')}</Typography>
                             <Typography fontWeight='bold'>{globalize.translate('LabelServerVersion')}</Typography>
                             <Typography fontWeight='bold'>{globalize.translate('LabelWebVersion')}</Typography>
                             <Typography fontWeight='bold'>{globalize.translate('LabelBuildVersion')}</Typography>
                         </Stack>
-                        <Stack flexGrow={5} gap={1}>
+                        <Stack flexGrow={5} spacing={1}>
                             {isPending ? (
                                 <>
                                     <Skeleton />
@@ -53,7 +53,7 @@ const ServerInfoWidget = ({ onScanLibrariesClick, onRestartClick, onShutdownClic
                     </Stack>
                 </Paper>
 
-                <Stack direction='row' gap={1.5} flexWrap={'wrap'}>
+                <Stack direction='row' spacing={1.5}>
                     <Button
                         onClick={onScanLibrariesClick}
                         sx={{
diff --git a/src/apps/dashboard/features/backups/components/BackupInfoDialog.tsx b/src/apps/dashboard/features/backups/components/BackupInfoDialog.tsx
index d83a768fb2..db0a3c8d67 100644
--- a/src/apps/dashboard/features/backups/components/BackupInfoDialog.tsx
+++ b/src/apps/dashboard/features/backups/components/BackupInfoDialog.tsx
@@ -44,11 +44,11 @@ const BackupInfoDialog: FunctionComponent<IProps> = ({ backup, open, onClose }:
             </DialogTitle>
 
             <DialogContent>
-                <Stack gap={2}>
+                <Stack spacing={2}>
                     <Box>
                         <Stack
                             direction='row'
-                            gap={2}
+                            spacing={2}
                         >
                             <Typography fontWeight='bold'>{globalize.translate('LabelPath')}</Typography>
                             <Stack direction='row'>
@@ -60,7 +60,7 @@ const BackupInfoDialog: FunctionComponent<IProps> = ({ backup, open, onClose }:
                         </Stack>
                         <Stack
                             direction='row'
-                            gap={2}
+                            spacing={2}
                         >
                             <Typography fontWeight='bold'>{globalize.translate('LabelVersion')}</Typography>
                             <Typography color='text.secondary'>{backup.ServerVersion}</Typography>
diff --git a/src/apps/dashboard/routes/index.tsx b/src/apps/dashboard/routes/index.tsx
index 76b1d076b1..78071200d8 100644
--- a/src/apps/dashboard/routes/index.tsx
+++ b/src/apps/dashboard/routes/index.tsx
@@ -2,13 +2,11 @@ import React, { useCallback, useState } from 'react';
 import Page from 'components/Page';
 import globalize from 'lib/globalize';
 import Box from '@mui/material/Box';
-import Grid from '@mui/material/Grid2';
+import Grid from '@mui/material/Grid';
 import ServerPathWidget from '../components/widgets/ServerPathWidget';
 import ServerInfoWidget from '../components/widgets/ServerInfoWidget';
 import ActivityLogWidget from '../components/widgets/ActivityLogWidget';
 import AlertsLogWidget from '../components/widgets/AlertsLogWidget';
-import useTheme from '@mui/material/styles/useTheme';
-import useMediaQuery from '@mui/material/useMediaQuery';
 import Stack from '@mui/material/Stack';
 import useShutdownServer from '../features/system/api/useShutdownServer';
 import useRestartServer from '../features/system/api/useRestartServer';
@@ -20,9 +18,6 @@ import { useStartTask } from '../features/tasks/api/useStartTask';
 import ItemCountsWidget from '../components/widgets/ItemCountsWidget';
 
 export const Component = () => {
-    const theme = useTheme();
-    const isMedium = useMediaQuery(theme.breakpoints.only('md'));
-    const isExtraLarge = useMediaQuery(theme.breakpoints.only('xl'));
     const [ isRestartConfirmDialogOpen, setIsRestartConfirmDialogOpen ] = useState(false);
     const [ isShutdownConfirmDialogOpen, setIsShutdownConfirmDialogOpen ] = useState(false);
     const startTask = useStartTask();
@@ -93,7 +88,7 @@ export const Component = () => {
             />
             <Box className='content-primary'>
                 <Grid container spacing={3}>
-                    <Grid size={{ xs: 12, md: 12, lg: 8, xl: 6 }}>
+                    <Grid item xs={12} md={7} lg={7} xl={6}>
                         <Stack spacing={3}>
                             <ServerInfoWidget
                                 onScanLibrariesClick={onScanLibraries}
@@ -105,24 +100,15 @@ export const Component = () => {
                             <DevicesWidget />
                         </Stack>
                     </Grid>
-                    <Grid size={{ xs: 12, md: 6, lg: 4, xl: 3 }}>
+                    <Grid item xs={12} md={5} lg={5} xl={3}>
                         <ActivityLogWidget />
                     </Grid>
-                    {isMedium || isExtraLarge ? (
-                        <Grid size={{ md: 6, xl: 3 }}>
-                            <Stack spacing={3}>
-                                <AlertsLogWidget />
-                                <ServerPathWidget />
-                            </Stack>
-                        </Grid>
-                    ) : (
-                        <Grid size={12}>
-                            <Stack spacing={3}>
-                                <AlertsLogWidget />
-                                <ServerPathWidget />
-                            </Stack>
-                        </Grid>
-                    )}
+                    <Grid item xs={12} md={6} lg={12} xl={3}>
+                        <Stack spacing={3}>
+                            <AlertsLogWidget />
+                            <ServerPathWidget />
+                        </Stack>
+                    </Grid>
                 </Grid>
             </Box>
         </Page>