From fb7a1538d009ac02cf99ad5af6f21fbc658d93eb Mon Sep 17 00:00:00 2001
From: viown <48097677+viown@users.noreply.github.com>
Date: Tue, 28 Oct 2025 18:39:20 +0300
Subject: [PATCH] Fix tuner devices list

---
 .../livetv/components/TunerDeviceCard.tsx     |   1 -
 src/apps/dashboard/routes/livetv/index.tsx    | 109 ++++++++++--------
 2 files changed, 61 insertions(+), 49 deletions(-)

diff --git a/src/apps/dashboard/features/livetv/components/TunerDeviceCard.tsx b/src/apps/dashboard/features/livetv/components/TunerDeviceCard.tsx
index cd253f2b8a..a531185ed7 100644
--- a/src/apps/dashboard/features/livetv/components/TunerDeviceCard.tsx
+++ b/src/apps/dashboard/features/livetv/components/TunerDeviceCard.tsx
@@ -78,7 +78,6 @@ const TunerDeviceCard = ({ tunerHost }: TunerDeviceCardProps) => {
                 title={tunerHost.FriendlyName || getTunerName(tunerHost.Type) || ''}
                 text={tunerHost.Url || ''}
                 icon={<DvrIcon sx={{ fontSize: 70 }} />}
-                width={340}
                 action={true}
                 actionRef={actionRef}
                 onActionClick={onActionClick}
diff --git a/src/apps/dashboard/routes/livetv/index.tsx b/src/apps/dashboard/routes/livetv/index.tsx
index d061b10328..afe230b225 100644
--- a/src/apps/dashboard/routes/livetv/index.tsx
+++ b/src/apps/dashboard/routes/livetv/index.tsx
@@ -12,7 +12,7 @@ import useLiveTasks from 'apps/dashboard/features/tasks/hooks/useLiveTasks';
 import Button from '@mui/material/Button';
 import RefreshIcon from '@mui/icons-material/Refresh';
 import AddIcon from '@mui/icons-material/Add';
-import { Form, Link, useNavigate } from 'react-router-dom';
+import { Link, useNavigate } from 'react-router-dom';
 import { useStartTask } from 'apps/dashboard/features/tasks/api/useStartTask';
 import { TaskState } from '@jellyfin/sdk/lib/generated-client/models/task-state';
 import TaskProgress from 'apps/dashboard/features/tasks/components/TaskProgress';
@@ -22,6 +22,7 @@ import ListItemText from '@mui/material/ListItemText';
 import Alert from '@mui/material/Alert';
 import List from '@mui/material/List';
 import Provider from 'apps/dashboard/features/livetv/components/Provider';
+import Grid from '@mui/material/Grid';
 
 const CONFIG_KEY = 'livetv';
 
@@ -81,33 +82,44 @@ export const Component = () => {
             className='mainAnimatedPage type-interior'
         >
             <Box className='content-primary'>
-                <Form>
-                    {(isConfigError || isTasksError) ? (
-                        <Alert severity='error'>{globalize.translate('HeaderError')}</Alert>
-                    ) : (
-                        <Stack spacing={3}>
-                            <Typography variant='h2'>{globalize.translate('HeaderTunerDevices')}</Typography>
+                {(isConfigError || isTasksError) ? (
+                    <Alert severity='error'>{globalize.translate('HeaderError')}</Alert>
+                ) : (
+                    <Stack spacing={3}>
+                        <Typography variant='h2'>{globalize.translate('HeaderTunerDevices')}</Typography>
 
-                            <Button
-                                sx={{ alignSelf: 'flex-start' }}
-                                startIcon={<AddIcon />}
-                                component={Link}
-                                to='/dashboard/livetv/tuner'
-                            >
-                                {globalize.translate('ButtonAddTunerDevice')}
-                            </Button>
+                        <Button
+                            sx={{ alignSelf: 'flex-start' }}
+                            startIcon={<AddIcon />}
+                            component={Link}
+                            to='/dashboard/livetv/tuner'
+                        >
+                            {globalize.translate('ButtonAddTunerDevice')}
+                        </Button>
 
-                            <Stack direction='row' spacing={2}>
-                                { config.TunerHosts?.map(tunerHost => (
-                                    <TunerDeviceCard
+                        <Box>
+                            <Grid container spacing={2}>
+                                {config.TunerHosts?.map(tunerHost => (
+                                    <Grid
                                         key={tunerHost.Id}
-                                        tunerHost={tunerHost}
-                                    />
-                                )) }
-                            </Stack>
+                                        item
+                                        xs={12}
+                                        sm={6}
+                                        md={3}
+                                        lg={2.4}
+                                    >
+                                        <TunerDeviceCard
+                                            key={tunerHost.Id}
+                                            tunerHost={tunerHost}
+                                        />
+                                    </Grid>
+                                ))}
+                            </Grid>
+                        </Box>
 
-                            <Typography variant='h2'>{globalize.translate('HeaderGuideProviders')}</Typography>
+                        <Typography variant='h2'>{globalize.translate('HeaderGuideProviders')}</Typography>
 
+                        <Stack sx={{ alignSelf: 'flex-start' }} spacing={2}>
                             <Stack direction='row' spacing={1.5}>
                                 <Button
                                     sx={{ alignSelf: 'flex-start' }}
@@ -132,32 +144,33 @@ export const Component = () => {
                             {(refreshGuideTask && refreshGuideTask.State === TaskState.Running) && (
                                 <TaskProgress task={refreshGuideTask} />
                             )}
-                            <Menu
-                                anchorEl={anchorEl}
-                                open={isMenuOpen}
-                                onClose={onMenuClose}
-                            >
-                                <MenuItem onClick={navigateToSchedulesDirect}>
-                                    <ListItemText>Schedules Direct</ListItemText>
-                                </MenuItem>
-                                <MenuItem onClick={navigateToXMLTV}>
-                                    <ListItemText>XMLTV</ListItemText>
-                                </MenuItem>
-                            </Menu>
-
-                            {(config.ListingProviders && config.ListingProviders?.length > 0) && (
-                                <List sx={{ backgroundColor: 'background.paper' }}>
-                                    {config.ListingProviders?.map(provider => (
-                                        <Provider
-                                            key={provider.Id}
-                                            provider={provider}
-                                        />
-                                    ))}
-                                </List>
-                            )}
                         </Stack>
-                    )}
-                </Form>
+
+                        <Menu
+                            anchorEl={anchorEl}
+                            open={isMenuOpen}
+                            onClose={onMenuClose}
+                        >
+                            <MenuItem onClick={navigateToSchedulesDirect}>
+                                <ListItemText>Schedules Direct</ListItemText>
+                            </MenuItem>
+                            <MenuItem onClick={navigateToXMLTV}>
+                                <ListItemText>XMLTV</ListItemText>
+                            </MenuItem>
+                        </Menu>
+
+                        {(config.ListingProviders && config.ListingProviders?.length > 0) && (
+                            <List sx={{ backgroundColor: 'background.paper' }}>
+                                {config.ListingProviders?.map(provider => (
+                                    <Provider
+                                        key={provider.Id}
+                                        provider={provider}
+                                    />
+                                ))}
+                            </List>
+                        )}
+                    </Stack>
+                )}
             </Box>
         </Page>
     );