Wrap comment text. Fixes #637

ui/src/album/AlbumDetails.js

@@ -1,27 +1,23 @@
-import React, { useMemo } from 'react'
+import React, { useMemo, useCallback } from 'react'
 import {
   Card,
   CardContent,
   CardMedia,
-  Typography,
   Collapse,
   makeStyles,
-  IconButton,
+  Typography,
   useMediaQuery,
 } from '@material-ui/core'
-import classnames from 'classnames'
 import { useTranslate } from 'react-admin'
 import Lightbox from 'react-image-lightbox'
 import 'react-image-lightbox/style.css'
-import ExpandMoreIcon from '@material-ui/icons/ExpandMore'
 import subsonic from '../subsonic'
 import {
-  DurationField,
-  StarButton,
-  SizeField,
   ArtistLinkField,
+  DurationField,
   formatRange,
-  MultiLineTextField,
+  SizeField,
+  StarButton,
 } from '../common'
 
 const useStyles = makeStyles((theme) => ({
@@ -73,79 +69,45 @@ const useStyles = makeStyles((theme) => ({
     top: theme.spacing(-0.2),
     left: theme.spacing(0.5),
   },
-  comment: {
+  commentBlock: {
-    whiteSpace: 'nowrap',
-    marginTop: '1em',
     display: 'inline-block',
-    [theme.breakpoints.down('xs')]: {
+    marginTop: '1em',
-      width: '10em',
-    },
-    [theme.breakpoints.up('sm')]: {
-      width: '10em',
-    },
-    [theme.breakpoints.up('lg')]: {
-      width: '10em',
-    },
-  },
-  commentFirstLine: {
     float: 'left',
-    marginRight: '5px',
-    whiteSpace: 'nowrap',
-    overflow: 'hidden',
-    textOverflow: 'ellipsis',
-  },
-  expand: {
-    marginTop: '-5px',
-    transform: 'rotate(0deg)',
-    marginLeft: 'auto',
-    transition: theme.transitions.create('transform', {
-      duration: theme.transitions.duration.shortest,
-    }),
-  },
-  expandOpen: {
-    transform: 'rotate(180deg)',
   },
 }))
 
-const AlbumComment = ({ classes, record, commentNumLines }) => {
+const AlbumComment = ({ record }) => {
+  const classes = useStyles()
   const [expanded, setExpanded] = React.useState(false)
 
-  const handleExpandClick = React.useCallback(() => {
+  const formatted = useMemo(() => {
-    commentNumLines > 1 && setExpanded(!expanded)
+    return record.comment.split('\n').map((line) => (
-  }, [expanded, setExpanded, commentNumLines])
+      <>
+        {line}
+        <br />
+      </>
+    ))
+  }, [record.comment])
+
+  const handleExpandClick = useCallback(() => {
+    setExpanded(!expanded)
+  }, [expanded, setExpanded])
 
   return (
-    <div className={classes.comment}>
+    <Collapse
-      <div onClick={handleExpandClick}>
+      collapsedHeight={'1.5em'}
-        <MultiLineTextField
+      in={expanded}
-          record={record}
+      timeout={'auto'}
-          source={'comment'}
+      className={classes.commentBlock}
-          maxLines={1}
-          className={classes.commentFirstLine}
-        />
-      </div>
-      {commentNumLines > 1 && (
-        <IconButton
-          size={'small'}
-          className={classnames(classes.expand, {
-            [classes.expandOpen]: expanded,
-          })}
-          onClick={handleExpandClick}
-          aria-expanded={expanded}
-          aria-label="show more"
     >
-          <ExpandMoreIcon />
+      <Typography
-        </IconButton>
+        variant={'body1'}
-      )}
+        className={classes.commentText}
-      <Collapse in={expanded} timeout="auto" unmountOnExit>
+        onClick={handleExpandClick}
-        <MultiLineTextField
+      >
-          record={record}
+        {formatted}
-          source={'comment'}
+      </Typography>
-          firstLine={1}
-          className={classes.commentFirstLine}
-        />
     </Collapse>
-    </div>
   )
 }
 
@@ -155,11 +117,6 @@ const AlbumDetails = ({ record }) => {
   const [isLightboxOpen, setLightboxOpen] = React.useState(false)
   const translate = useTranslate()
 
-  const commentNumLines = useMemo(
-    () => record.comment && record.comment.split('\n').length,
-    [record]
-  )
-
   const genreYear = (record) => {
     let genreDateLine = []
     if (record.genre) {
@@ -228,23 +185,11 @@ const AlbumDetails = ({ record }) => {
               {' · '}
               <SizeField record={record} source="size" />
             </Typography>
-            {isDesktop && record['comment'] && (
+            {isDesktop && record['comment'] && <AlbumComment record={record} />}
-              <AlbumComment
-                classes={classes}
-                record={record}
-                commentNumLines={commentNumLines}
-              />
-            )}
           </CardContent>
         </div>
       </div>
-      {!isDesktop && record['comment'] && (
+      {!isDesktop && record['comment'] && <AlbumComment record={record} />}
-        <AlbumComment
-          classes={classes}
-          record={record}
-          commentNumLines={commentNumLines}
-        />
-      )}
       {isLightboxOpen && (
         <Lightbox
           imagePadding={50}