style: cleaning up some mobile styling (#1405)

web/src/App.tsx

@@ -224,7 +224,7 @@ export function Root({ children }: { children?: React.ReactNode }) {
             mb: ['56px', 4],
             px: [undefined, 5],
             pb: [4, undefined],
-            maxWidth: 'calc(100vw - 80px)',
+            maxWidth: 'calc(100vw - 25px)',
           }}
         >
           {version?.ffmpeg === 'unknown' ? (

web/src/components/Breadcrumbs.tsx

@@ -1,10 +1,19 @@
 import type { BreadcrumbsProps } from '@mui/material';
-import { Link, Breadcrumbs as MUIBreadcrumbs, Typography } from '@mui/material';
+import {
+  Link,
+  Breadcrumbs as MUIBreadcrumbs,
+  Typography,
+  useMediaQuery,
+  useTheme,
+} from '@mui/material';
 import { Link as RouterLink, useLocation } from '@tanstack/react-router';
 import { isEmpty, map, reject } from 'lodash-es';
 import { useGetRouteDetails } from '../hooks/useRouteName.ts';
 
 export default function Breadcrumbs(props: BreadcrumbsProps) {
+  const theme = useTheme();
+  const smallViewport = useMediaQuery(theme.breakpoints.down('sm'));
+
   const { sx = { mb: 2 }, separator = '›', ...restProps } = props;
 
   const location = useLocation();
@@ -14,6 +23,7 @@ export default function Breadcrumbs(props: BreadcrumbsProps) {
     (part) => part === 'web',
   );
   const getRoute = useGetRouteDetails();
+  const MAX_LENGTH = smallViewport ? 20 : 50;
 
   return (
     <>
@@ -32,15 +42,19 @@ export default function Breadcrumbs(props: BreadcrumbsProps) {
             return null;
           }
 
+          const trimmedText =
+            route.name.substring(0, MAX_LENGTH) +
+            (route.name.length + 3 >= MAX_LENGTH ? '...' : '');
+
           // Don't link the last item in a breadcrumb because you are on that page
           // Don't display crumbs for pages that aren't excplicely defined in useRouteNames hook
           return isLast || !route?.isLink ? (
             <Typography color="text.primary" key={to}>
-              {route.name ?? ''}
+              {trimmedText ?? ''}
             </Typography>
           ) : (
             <Link component={RouterLink} to={to} key={to}>
-              {route.name}
+              {trimmedText}
             </Link>
           );
         })}

web/src/components/custom-shows/EditCustomShowForm.tsx

@@ -127,11 +127,19 @@ export function EditCustomShowsForm({
         />
         <Divider />
         <Box>
-          <Box sx={{ display: 'flex', alignItems: 'center', mb: 2 }}>
-            <Typography variant="h6" sx={{ flex: 1 }}>
-              Programming
-            </Typography>
-            <Stack direction="row" spacing={2}>
+          <Box>
+            <Stack
+              direction="row"
+              sx={{ alignItems: 'center', mb: 2, flexWrap: 'wrap' }}
+              gap={2}
+            >
+              <Typography
+                variant="h6"
+                sx={{ flex: 1, flexBasis: ['100%', 'auto'] }}
+              >
+                Programming
+              </Typography>
+
               <CustomShowSortToolsMenu />
               {customShowProgrammingChanged && (
                 <Tooltip title="Reset programming to most recently saved state">

web/src/components/filler/EditFillerListForm.tsx

@@ -138,8 +138,15 @@ export function EditFillerListForm({
         <Divider />
 
         <Box>
-          <Stack direction="row" sx={{ alignItems: 'center', mb: 2 }} gap={2}>
-            <Typography variant="h6" sx={{ flex: 1 }}>
+          <Stack
+            direction="row"
+            sx={{ alignItems: 'center', mb: 2, flexWrap: 'wrap' }}
+            gap={2}
+          >
+            <Typography
+              variant="h6"
+              sx={{ flex: 1, flexBasis: ['100%', 'auto'] }}
+            >
               Programming
             </Typography>
             <Button

web/src/components/settings/general/GeneralSettingsForm.tsx

@@ -223,7 +223,9 @@ export function GeneralSettingsForm({
             rules={{ validate: { isValidUrl: (s) => isValidUrl(s, true) } }}
             render={({ field, fieldState: { error } }) => (
               <TextField
-                fullWidth
+                sx={{
+                  width: ['100%', '50%'],
+                }}
                 label="Tunarr Backend URL"
                 slotProps={{
                   input: {
@@ -251,7 +253,11 @@ export function GeneralSettingsForm({
           />
         </Box>
         <Box>
-          <FormControl sx={{ width: '50%' }}>
+          <FormControl
+            sx={{
+              width: ['100%', '50%'],
+            }}
+          >
             <InputLabel id="log-level-label">Log Level</InputLabel>
             <Controller
               name="logLevel"
@@ -291,7 +297,11 @@ export function GeneralSettingsForm({
             Caching
           </Typography>
           <Box>
-            <FormControl sx={{ width: '50%' }}>
+            <FormControl
+              sx={{
+                width: ['100%', '50%'],
+              }}
+            >
               <FormControlLabel
                 control={
                   <Controller

web/src/pages/channels/ChannelSummaryPage.tsx

@@ -6,7 +6,9 @@ import {
   Stack,
   Tooltip,
   Typography,
+  useTheme,
 } from '@mui/material';
+import useMediaQuery from '@mui/material/useMediaQuery';
 import { Link } from '@tanstack/react-router';
 import { Suspense } from 'react';
 import Breadcrumbs from '../../components/Breadcrumbs.tsx';
@@ -24,23 +26,27 @@ export const ChannelSummaryPage = () => {
     data: { channel },
   } = useChannelAndProgramming(channelId);
 
+  const theme = useTheme();
+  const smallViewport = useMediaQuery(theme.breakpoints.down('sm'));
+
   return (
     <Stack spacing={2}>
       <Breadcrumbs />
       <Stack direction="row" alignItems="center" spacing={1}>
         <Box>
           {isNonEmptyString(channel.icon.path) ? (
-            <Box component="img" width={132} src={channel.icon.path} />
+            <Box component="img" width={[32, 132]} src={channel.icon.path} />
           ) : (
-            <TunarrLogo style={{ width: '132px' }} />
+            <TunarrLogo style={{ width: smallViewport ? '32px' : '132px' }} />
           )}
         </Box>
 
         <Box sx={{ flex: 1 }}>
-          <Typography variant="h3">{channel.name}</Typography>
+          <Typography variant="h4">{channel.name}</Typography>
           <Typography variant="subtitle1">Channel #{channel.number}</Typography>
         </Box>
-
+      </Stack>
+      <Stack direction="row" spacing={1} justifyContent="right">
         <Tooltip title="Edit" placement="top">
           <IconButton component={Link} from={Route.fullPath} to="./edit">
             <Settings />

web/src/pages/settings/SettingsLayout.tsx

@@ -19,12 +19,17 @@ export function SettingsLayout({ currentTab = '/general' }: Props) {
       <Typography variant="h3" mb={2}>
         Settings
       </Typography>
-      <Paper sx={{ p: 2 }}>
+      <Paper sx={{ p: [1, 2] }}>
         <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
           <Tabs
             value={currentTab}
             variant="scrollable"
             allowScrollButtonsMobile
+            sx={{
+              '& .MuiTabs-scrollButtons.Mui-disabled': {
+                opacity: 0.2,
+              },
+            }}
           >
             <Tab
               label="General"
@@ -65,7 +70,7 @@ export function SettingsLayout({ currentTab = '/general' }: Props) {
           </Tabs>
         </Box>
 
-        <Box sx={{ p: 3 }}>
+        <Box sx={{ p: [1, 3] }}>
           <Suspense fallback={<LinearProgress />}>
             <Outlet />
           </Suspense>

web/src/pages/settings/XmlTvSettingsPage.tsx

@@ -111,7 +111,7 @@ export default function XmlTvSettingsPage() {
           )}
         />
       </FormControl>
-      <Stack spacing={2} direction={{ sm: 'column', md: 'row' }} sx={{ mt: 2 }}>
+      <Stack spacing={2} direction={{ sm: 'column', md: 'row' }} sx={{ my: 2 }}>
         <NumericFormControllerText
           control={control}
           name="programmingHours"
@@ -120,6 +120,7 @@ export default function XmlTvSettingsPage() {
             id: 'epg-hours',
             label: 'EPG (Hours)',
             helperText: 'Number of hours to include in the XMLTV file',
+            sx: { mb: 2 },
           }}
         />
         <NumericFormControllerText