only show playlist tracks' context menu on hover

ui/src/album/AlbumSongs.js

@@ -49,6 +49,7 @@ const useStyles = makeStyles(
     noResults: { padding: 20 },
     columnIcon: {
       marginLeft: '3px',
+      marginTop: '-2px',
       verticalAlign: 'text-top',
     },
   }),

ui/src/playlist/PlaylistSongs.js

@@ -4,8 +4,6 @@ import {
   DatagridLoading,
   ListToolbar,
   TextField,
-  DatagridBody,
-  Datagrid,
   useListController,
   useRefresh,
 } from 'react-admin'
@@ -16,7 +14,7 @@ import {
   DurationField,
   SongDetails,
   SongContextMenu,
-  SongDatagridRow,
+  SongDatagrid,
 } from '../common'
 import AddToPlaylistDialog from '../dialogs/AddToPlaylistDialog'
 
@@ -56,14 +54,6 @@ const useStylesListToolbar = makeStyles({
   },
 })
 
-const SongsDatagridBody = (props) => (
-  <DatagridBody {...props} row={<SongDatagridRow contextVisible={true} />} />
-)
-
-const SongsDatagrid = ({ contextVisible, ...rest }) => {
-  return <Datagrid {...rest} body={<SongsDatagridBody />} />
-}
-
 const PlaylistSongs = (props) => {
   const classes = useStyles(props)
   const classesToolbar = useStylesListToolbar(props)
@@ -120,11 +110,12 @@ const PlaylistSongs = (props) => {
               size={'small'}
             />
           ) : (
-            <SongsDatagrid
+            <SongDatagrid
               expand={!isXsmall && <SongDetails />}
               rowClick={null}
               {...controllerProps}
               hasBulkActions={hasBulkActions}
+              contextVisible={isXsmall}
             >
               {isDesktop && <TextField source="id" label={'#'} />}
               <TextField source="title" />
@@ -134,7 +125,7 @@ const PlaylistSongs = (props) => {
                 onAddToPlaylist={onAddToPlaylist}
                 showStar={false}
               />
-            </SongsDatagrid>
+            </SongDatagrid>
           )}
         </Card>
       </div>

ui/src/song/SongList.js

@@ -28,6 +28,7 @@ import AddToPlaylistDialog from '../dialogs/AddToPlaylistDialog'
 const useStyles = makeStyles({
   columnIcon: {
     marginLeft: '3px',
+    marginTop: '-2px',
     verticalAlign: 'text-top',
   },
 })