Move star to end of album title. Use flex for album details

ui/src/album/AlbumDetails.js

@@ -7,7 +7,6 @@ import {
   Collapse,
   makeStyles,
   IconButton,
-  Fab,
   useMediaQuery,
 } from '@material-ui/core'
 import classnames from 'classnames'
@@ -26,7 +25,7 @@ import {
 } from '../common'
 
 const useStyles = makeStyles((theme) => ({
-  container: {
+  root: {
     [theme.breakpoints.down('xs')]: {
       padding: '0.7em',
       minWidth: '24em',
@@ -36,47 +35,42 @@ const useStyles = makeStyles((theme) => ({
       minWidth: '32em',
     },
   },
-  starButton: {
-    bottom: theme.spacing(-1.5),
-    right: theme.spacing(-1.5),
+  cardContents: {
+    display: 'flex',
   },
-  albumCover: {
-    display: 'inline-flex',
-    justifyContent: 'flex-end',
-    alignItems: 'flex-end',
-    cursor: 'pointer',
-
+  details: {
+    display: 'flex',
+    flexDirection: 'column',
+  },
+  content: {
+    flex: '2 0 auto',
+  },
+  coverParent: {
     [theme.breakpoints.down('xs')]: {
       height: '8em',
       width: '8em',
+      minWidth: '8em',
     },
     [theme.breakpoints.up('sm')]: {
       height: '10em',
       width: '10em',
+      minWidth: '10em',
     },
     [theme.breakpoints.up('lg')]: {
       height: '15em',
       width: '15em',
+      minWidth: '15em',
     },
   },
-
-  albumDetails: {
-    display: 'inline-block',
-    verticalAlign: 'top',
-    [theme.breakpoints.down('xs')]: {
-      width: '14em',
-    },
-    [theme.breakpoints.up('sm')]: {
-      width: '26em',
-    },
-    [theme.breakpoints.up('lg')]: {
-      width: '43em',
-    },
+  cover: {
+    cursor: 'pointer',
+    display: 'block',
+    width: '100%',
+    height: 'auto',
   },
-  albumTitle: {
-    whiteSpace: 'nowrap',
-    overflow: 'hidden',
-    textOverflow: 'ellipsis',
+  starButton: {
+    top: theme.spacing(-0.2),
+    left: theme.spacing(0.5),
   },
   comment: {
     whiteSpace: 'nowrap',
@@ -194,54 +188,62 @@ const AlbumDetails = ({ record }) => {
     []
   )
   return (
-    <Card className={classes.container}>
-      <CardMedia
-        image={imageUrl}
-        className={classes.albumCover}
-        onClick={handleOpenLightbox}
-      >
-        <StarButton
-          className={classes.starButton}
-          record={record}
-          resource={'album'}
-          size={isDesktop ? 'default' : 'small'}
-          aria-label="star"
-          color="primary"
-          component={Fab}
-        />
-      </CardMedia>
-      <CardContent className={classes.albumDetails}>
-        <Typography variant="h5" className={classes.albumTitle}>
-          {record.name}
-        </Typography>
-        <Typography component="h6">
-          <ArtistLinkField record={record} />
-        </Typography>
-        <Typography component="p">{genreYear(record)}</Typography>
-        <Typography component="p">
-          {record.songCount}{' '}
-          {translate('resources.song.name', { smart_count: record.songCount })}
-          {' · '} <DurationField record={record} source={'duration'} /> {' · '}
-          <SizeField record={record} source="size" />
-        </Typography>
-        {isDesktop && record['comment'] && (
-          <AlbumComment
-            classes={classes}
-            record={record}
-            commentNumLines={commentNumLines}
-          />
-        )}
-      </CardContent>
-      {!isDesktop && record['comment'] && (
-        <div>
-          <AlbumComment
-            classes={classes}
-            record={record}
-            commentNumLines={commentNumLines}
+    <Card className={classes.root}>
+      <div className={classes.cardContents}>
+        <div className={classes.coverParent}>
+          <CardMedia
+            component={'img'}
+            src={imageUrl}
+            width="400"
+            height="400"
+            className={classes.cover}
+            onClick={handleOpenLightbox}
+            title={record.name}
           />
         </div>
+        <div className={classes.details}>
+          <CardContent className={classes.content}>
+            <Typography variant="h5">
+              {record.name}
+              <StarButton
+                className={classes.starButton}
+                record={record}
+                resource={'album'}
+                size={isDesktop ? 'default' : 'small'}
+                aria-label="star"
+                color="primary"
+              />
+            </Typography>
+            <Typography component="h6">
+              <ArtistLinkField record={record} />
+            </Typography>
+            <Typography component="p">{genreYear(record)}</Typography>
+            <Typography component="p">
+              {record.songCount}{' '}
+              {translate('resources.song.name', {
+                smart_count: record.songCount,
+              })}
+              {' · '} <DurationField record={record} source={'duration'} />{' '}
+              {' · '}
+              <SizeField record={record} source="size" />
+            </Typography>
+            {isDesktop && record['comment'] && (
+              <AlbumComment
+                classes={classes}
+                record={record}
+                commentNumLines={commentNumLines}
+              />
+            )}
+          </CardContent>
+        </div>
+      </div>
+      {!isDesktop && record['comment'] && (
+        <AlbumComment
+          classes={classes}
+          record={record}
+          commentNumLines={commentNumLines}
+        />
       )}
-
       {isLightboxOpen && (
         <Lightbox
           imagePadding={50}