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,21 +85,23 @@ const AlbumGridTile = ({ record }) => {
         setVisible(false)
       }}
     >
-      <Cover album={record} />
-      {(!isDesktop || visible) && (
-        <GridListTileBar
-          className={classes.tileBar}
-          title={record.name}
-          subtitle={
-            <div className={classes.albumArtistName}>
-              <ArtistLinkField record={record} className={classes.artistLink}>
-                {record.albumArtist}
-              </ArtistLinkField>
-            </div>
-          }
-          actionIcon={<AlbumContextMenu record={record} color={'white'} />}
-        />
-      )}
+      <Link to={linkToRecord(basePath, record.id, 'show')}>
+        <Cover album={record} />
+        {(!isDesktop || visible) && (
+          <GridListTileBar
+            className={classes.tileBar}
+            title={record.name}
+            subtitle={
+              <div className={classes.albumArtistName}>
+                <ArtistLinkField record={record} className={classes.artistLink}>
+                  {record.albumArtist}
+                </ArtistLinkField>
+              </div>
+            }
+            actionIcon={<AlbumContextMenu record={record} color={'white'} />}
+          />
+        )}
+      </Link>
     </div>
   )
 }
@@ -116,13 +118,8 @@ const LoadedAlbumGrid = ({ ids, data, basePath, width }) => {
         spacing={20}
       >
         {ids.map((id) => (
-          <GridListTile
-            className={classes.gridListTile}
-            component={Link}
-            key={id}
-            to={linkToRecord(basePath, id, 'show')}
-          >
-            <AlbumGridTile record={data[id]} />
+          <GridListTile className={classes.gridListTile} key={id}>
+            <AlbumGridTile record={data[id]} basePath={basePath} />
           </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}
       >