Replace expanded with a dialog (#1258)

* Replace expanded with a dialog

* Change `info` label to "Get Info"

* Rename things for consistency

Co-authored-by: Deluan <deluan@navidrome.org>

ui/src/album/AlbumSongs.js

@@ -19,7 +19,7 @@ import {
   SongBulkActions,
   SongContextMenu,
   SongDatagrid,
-  SongDetails,
+  SongInfo,
   SongTitleField,
   RatingField,
   QualityInfo,
@@ -28,6 +28,7 @@ import {
 } from '../common'
 import { AddToPlaylistDialog } from '../dialogs'
 import config from '../config'
+import ExpandInfoDialog from '../dialogs/ExpandInfoDialog'
 
 const useStyles = makeStyles(
   (theme) => ({
@@ -85,7 +86,6 @@ const useStyles = makeStyles(
 
 const AlbumSongs = (props) => {
   const { data, ids } = props
-  const isXsmall = useMediaQuery((theme) => theme.breakpoints.down('xs'))
   const isDesktop = useMediaQuery((theme) => theme.breakpoints.up('md'))
   const classes = useStyles({ isDesktop })
   const dispatch = useDispatch()
@@ -157,7 +157,6 @@ const AlbumSongs = (props) => {
             <SongBulkActions />
           </BulkActionsToolbar>
           <SongDatagrid
-            expand={isXsmall ? null : <SongDetails />}
             rowClick={(id) => dispatch(playTracks(data, ids, id))}
             {...props}
             hasBulkActions={true}
@@ -183,6 +182,7 @@ const AlbumSongs = (props) => {
         </Card>
       </div>
       <AddToPlaylistDialog />
+      <ExpandInfoDialog content={<SongInfo />} />
     </>
   )
 }