diff --git a/ui/src/album/AlbumSongs.js b/ui/src/album/AlbumSongs.js
index 72ff962db..bb34f6585 100644
--- a/ui/src/album/AlbumSongs.js
+++ b/ui/src/album/AlbumSongs.js
@@ -64,18 +64,18 @@ const useStyles = makeStyles(
       },
     },
     contextMenu: {
-      visibility: 'hidden',
+      visibility: (props) => (props.isDesktop ? 'hidden' : 'visible'),
     },
   }),
   { name: 'RaList' }
 )
 
 const AlbumSongs = (props) => {
-  const classes = useStyles(props)
   const { data, ids } = props
-  const dispatch = useDispatch()
   const isXsmall = useMediaQuery((theme) => theme.breakpoints.down('xs'))
   const isDesktop = useMediaQuery((theme) => theme.breakpoints.up('md'))
+  const classes = useStyles({ isDesktop })
+  const dispatch = useDispatch()
   const version = useVersion()
   return (
     <>
diff --git a/ui/src/playlist/PlaylistSongs.js b/ui/src/playlist/PlaylistSongs.js
index 22cb58186..2be7f823b 100644
--- a/ui/src/playlist/PlaylistSongs.js
+++ b/ui/src/playlist/PlaylistSongs.js
@@ -63,7 +63,7 @@ const useStyles = makeStyles(
       },
     },
     contextMenu: {
-      visibility: 'hidden',
+      visibility: (props) => (props.isDesktop ? 'hidden' : 'visible'),
     },
   }),
   { name: 'RaList' }
@@ -78,10 +78,10 @@ const ReorderableList = ({ readOnly, children, ...rest }) => {
 
 const PlaylistSongs = ({ playlistId, readOnly, ...props }) => {
   const { data, ids } = props
-  const classes = useStyles(props)
-  const dispatch = useDispatch()
   const isXsmall = useMediaQuery((theme) => theme.breakpoints.down('xs'))
   const isDesktop = useMediaQuery((theme) => theme.breakpoints.up('md'))
+  const classes = useStyles({ isDesktop })
+  const dispatch = useDispatch()
   const dataProvider = useDataProvider()
   const refresh = useRefresh()
   const notify = useNotify()