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: {
+  cardContents: {
-    bottom: theme.spacing(-1.5),
+    display: 'flex',
-    right: theme.spacing(-1.5),
   },
-  albumCover: {
+  details: {
-    display: 'inline-flex',
+    display: 'flex',
-    justifyContent: 'flex-end',
+    flexDirection: 'column',
-    alignItems: 'flex-end',
+  },
-    cursor: 'pointer',
+  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',
     },
   },
-
+  cover: {
-  albumDetails: {
+    cursor: 'pointer',
-    display: 'inline-block',
+    display: 'block',
-    verticalAlign: 'top',
+    width: '100%',
-    [theme.breakpoints.down('xs')]: {
+    height: 'auto',
-      width: '14em',
   },
-    [theme.breakpoints.up('sm')]: {
+  starButton: {
-      width: '26em',
+    top: theme.spacing(-0.2),
-    },
+    left: theme.spacing(0.5),
-    [theme.breakpoints.up('lg')]: {
-      width: '43em',
-    },
-  },
-  albumTitle: {
-    whiteSpace: 'nowrap',
-    overflow: 'hidden',
-    textOverflow: 'ellipsis',
   },
   comment: {
     whiteSpace: 'nowrap',
@@ -194,12 +188,23 @@ const AlbumDetails = ({ record }) => {
     []
   )
   return (
-    <Card className={classes.container}>
+    <Card className={classes.root}>
+      <div className={classes.cardContents}>
+        <div className={classes.coverParent}>
           <CardMedia
-        image={imageUrl}
+            component={'img'}
-        className={classes.albumCover}
+            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}
@@ -207,12 +212,7 @@ const AlbumDetails = ({ record }) => {
                 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} />
@@ -220,8 +220,11 @@ const AlbumDetails = ({ record }) => {
             <Typography component="p">{genreYear(record)}</Typography>
             <Typography component="p">
               {record.songCount}{' '}
-          {translate('resources.song.name', { smart_count: record.songCount })}
+              {translate('resources.song.name', {
-          {' · '} <DurationField record={record} source={'duration'} /> {' · '}
+                smart_count: record.songCount,
+              })}
+              {' · '} <DurationField record={record} source={'duration'} />{' '}
+              {' · '}
               <SizeField record={record} source="size" />
             </Typography>
             {isDesktop && record['comment'] && (
@@ -232,16 +235,15 @@ const AlbumDetails = ({ record }) => {
               />
             )}
           </CardContent>
+        </div>
+      </div>
       {!isDesktop && record['comment'] && (
-        <div>
         <AlbumComment
           classes={classes}
           record={record}
           commentNumLines={commentNumLines}
         />
-        </div>
       )}
-
       {isLightboxOpen && (
         <Lightbox
           imagePadding={50}