Link is not on the album cover, leaving a gap between albums.

Other small improvements

ui/src/album/AlbumGridView.js

@@ -71,7 +71,7 @@ const Cover = withContentRect('bounds')(
   }
 )
 
-const AlbumGridTile = ({ record }) => {
+const AlbumGridTile = ({ record, basePath }) => {
   const isDesktop = useMediaQuery((theme) => theme.breakpoints.up('md'))
   const classes = useStyles()
   const [visible, setVisible] = useState(false)
@@ -85,6 +85,7 @@ const AlbumGridTile = ({ record }) => {
         setVisible(false)
       }}
     >
+      <Link to={linkToRecord(basePath, record.id, 'show')}>
         <Cover album={record} />
         {(!isDesktop || visible) && (
           <GridListTileBar
@@ -100,6 +101,7 @@ const AlbumGridTile = ({ record }) => {
             actionIcon={<AlbumContextMenu record={record} color={'white'} />}
           />
         )}
+      </Link>
     </div>
   )
 }
@@ -116,13 +118,8 @@ const LoadedAlbumGrid = ({ ids, data, basePath, width }) => {
         spacing={20}
       >
         {ids.map((id) => (
-          <GridListTile
+          <GridListTile className={classes.gridListTile} key={id}>
-            className={classes.gridListTile}
+            <AlbumGridTile record={data[id]} basePath={basePath} />
-            component={Link}
-            key={id}
-            to={linkToRecord(basePath, id, 'show')}
-          >
-            <AlbumGridTile record={data[id]} />
           </GridListTile>
         ))}
       </GridList>

ui/src/album/styles.js

@@ -36,7 +36,7 @@ export const useStyles = makeStyles((theme) => ({
       width: '26em',
     },
     [theme.breakpoints.up('lg')]: {
-      width: '38em',
+      width: '43em',
     },
   },
   albumTitle: {

ui/src/common/SongDatagrid.js

@@ -26,14 +26,14 @@ const useStyles = makeStyles({
 
 const DiscSubtitleRow = ({
   record,
-  onClickDiscSubtitle,
+  onClick,
   colSpan,
   contextAlwaysVisible,
 }) => {
   const classes = useStyles()
   const [visible, setVisible] = useState(false)
   const handlePlayDisc = (discNumber) => () => {
-    onClickDiscSubtitle(discNumber)
+    onClick(discNumber)
   }
   return (
     <TableRow
@@ -79,14 +79,14 @@ export const SongDatagridRow = ({
       {multiDisc && record.trackNumber === 1 && (
         <DiscSubtitleRow
           record={record}
-          onClickDiscSubtitle={onClickDiscSubtitle}
+          onClick={onClickDiscSubtitle}
           contextAlwaysVisible={contextAlwaysVisible}
           colSpan={childCount + (rest.expand ? 1 : 0)}
         />
       )}
       <DatagridRow
         record={record}
-        onMouseEnter={() => setVisible(true)}
+        onMouseMove={() => setVisible(true)}
         onMouseLeave={() => setVisible(false)}
         {...rest}
       >