From ec2e0a9ea9cd7c2f08f930fc0579b991e1fe0900 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Deluan=20Quint=C3=A3o?= <deluan@navidrome.org>
Date: Fri, 23 Oct 2026 16:25:10 +0100
Subject: [PATCH] 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 | 16 +++++++++++++++-
 1 file changed, 15 insertions(+), 1 deletion(-)

diff --git a/ui/src/playlist/PlaylistList.jsx b/ui/src/playlist/PlaylistList.jsx
index be77672a9..c7d611f36 100644
--- a/ui/src/playlist/PlaylistList.jsx
+++ b/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 />