From 06b1a1a25c4a9c323e2c752907e5bee232c4eefa Mon Sep 17 00:00:00 2001
From: Salman Inayat <45660519+Salman-Inayat@users.noreply.github.com>
Date: Thu, 9 Sep 2021 20:56:48 +0500
Subject: [PATCH] Album size overflow fixed (#1071)

* Added back button

* Added back button

* Added back button

* Fixed Album size overflow

* Fixed Album size overflow

* Fixed album size overflowing

* Fixed album size overflowing

* Fixed album size overflowing

* Fixed album size overflow on small screen

* Changes reverted in PlayerEdit.js

* prettier formatting issue resolved

Co-authored-by: Deluan <deluan@navidrome.org>
---
 ui/src/common/SizeField.js | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/ui/src/common/SizeField.js b/ui/src/common/SizeField.js
index 64eaaf888..b64e4b7cf 100644
--- a/ui/src/common/SizeField.js
+++ b/ui/src/common/SizeField.js
@@ -2,10 +2,18 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import { formatBytes } from '../utils'
 import { useRecordContext } from 'react-admin'
+import { makeStyles } from '@material-ui/core'
+
+const useStyles = makeStyles((theme) => ({
+  root: {
+    display: 'inline-block',
+  },
+}))
 
 export const SizeField = ({ source, ...rest }) => {
+  const classes = useStyles()
   const record = useRecordContext(rest)
-  return <span>{formatBytes(record[source])}</span>
+  return <span className={classes.root}>{formatBytes(record[source])}</span>
 }
 
 SizeField.propTypes = {