fix(ui): stop the playlist list from overflowing on mobile (#6376)

On phone-width screens the playlist table needs about 473px (cover, name, duration, favourite and edit columns), so even a short playlist name made the whole page wider than a 390px viewport and pushed the app bar icons off screen. react-admin's layout root uses min-width: fit-content, so the page grows to fit its widest content. On xs screens the list card now has a max-width of 100vw and scrolls horizontally, keeping the page at screen width while the favourite and edit buttons stay reachable by swiping the table. Long playlist names without spaces can also wrap there. Desktop and tablet layouts are unchanged.

ui/src/playlist/PlaylistList.jsx

@@ -38,6 +38,18 @@ const useStyles = makeStyles((theme) => ({
   button: {
     color: theme.palette.type === 'dark' ? 'white' : undefined,
   },
+  // RA's layout root is min-width: fit-content; capping the card keeps the page width
+  content: {
+    [theme.breakpoints.down('xs')]: {
+      overflowX: 'auto',
+      maxWidth: '100vw',
+    },
+  },
+  name: {
+    [theme.breakpoints.down('xs')]: {
+      overflowWrap: 'anywhere',
+    },
+  },
 }))
 
 const PlaylistFilter = (props) => {
@@ -134,6 +146,7 @@ export const PlaylistLove = ({ record, className }) => (
 PlaylistLove.defaultProps = { source: 'starred', sortable: false }
 
 const PlaylistList = (props) => {
+  const classes = useStyles()
   const isXsmall = useMediaQuery((theme) => theme.breakpoints.down('xs'))
   const isDesktop = useMediaQuery((theme) => theme.breakpoints.up('md'))
   useResourceRefresh('playlist')
@@ -165,6 +178,7 @@ const PlaylistList = (props) => {
   return (
     <List
       {...props}
+      classes={{ content: classes.content }}
       exporter={false}
       sort={{ field: 'name', order: 'ASC' }}
       filters={<PlaylistFilter />}
@@ -173,7 +187,7 @@ const PlaylistList = (props) => {
     >
       <Datagrid rowClick="show" isRowSelectable={(r) => isWritable(r?.ownerId)}>
         <ArtworkAvatar source="id" variant="square" />
-        <TextField source="name" />
+        <TextField source="name" className={classes.name} />
         {columns}
         <Writable>
           <EditButton />