From 2c68ba39343485dab2a314550bba0ffce631b96c Mon Sep 17 00:00:00 2001
From: Deluan <deluan@deluan.com>
Date: Tue, 26 May 2020 16:18:28 -0400
Subject: [PATCH] only show playlist tracks' context menu on hover

---
 ui/src/album/AlbumSongs.js       |  1 +
 ui/src/playlist/PlaylistSongs.js | 17 ++++-------------
 ui/src/song/SongList.js          |  1 +
 3 files changed, 6 insertions(+), 13 deletions(-)

diff --git a/ui/src/album/AlbumSongs.js b/ui/src/album/AlbumSongs.js
index 9cdeafa479e..044fdeb5b8b 100644
--- a/ui/src/album/AlbumSongs.js
+++ b/ui/src/album/AlbumSongs.js
@@ -49,6 +49,7 @@ const useStyles = makeStyles(
     noResults: { padding: 20 },
     columnIcon: {
       marginLeft: '3px',
+      marginTop: '-2px',
       verticalAlign: 'text-top',
     },
   }),
diff --git a/ui/src/playlist/PlaylistSongs.js b/ui/src/playlist/PlaylistSongs.js
index a81c12ef5e7..f321b70cb93 100644
--- a/ui/src/playlist/PlaylistSongs.js
+++ b/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>
diff --git a/ui/src/song/SongList.js b/ui/src/song/SongList.js
index c9cd15125b8..5ee6dccacd5 100644
--- a/ui/src/song/SongList.js
+++ b/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',
   },
 })