chore: format JSX components

Signed-off-by: Deluan <deluan@navidrome.org>

ui/src/album/AlbumDetails.jsx

@@ -351,7 +351,9 @@ const AlbumDetails = (props) => {
                   variant={'body1'}
                   onClick={() => setExpanded(!expanded)}
                 >
-                  <span><SafeHTML>{notes}</SafeHTML></span>
+                  <span>
+                    <SafeHTML>{notes}</SafeHTML>
+                  </span>
                 </Typography>
               </Collapse>
             )}
@@ -371,7 +373,9 @@ const AlbumDetails = (props) => {
               variant={'body1'}
               onClick={() => setExpanded(!expanded)}
             >
-              <span><SafeHTML>{notes}</SafeHTML></span>
+              <span>
+                <SafeHTML>{notes}</SafeHTML>
+              </span>
             </Typography>
           </Collapse>
         </div>

ui/src/artist/ArtistShow.jsx

@@ -71,7 +71,9 @@ const ArtistDetails = (props) => {
   }, [record.id])
 
   const Component = isDesktop ? DesktopArtistDetails : MobileArtistDetails
-  return <Component artistInfo={artistInfo} record={record} biography={biography} />
+  return (
+    <Component artistInfo={artistInfo} record={record} biography={biography} />
+  )
 }
 
 const ArtistShowLayout = (props) => {

ui/src/artist/DesktopArtistDetails.jsx

@@ -173,7 +173,9 @@ const DesktopArtistDetails = ({ artistInfo, record, biography }) => {
                 variant={'body1'}
                 onClick={() => setExpanded(!expanded)}
               >
-                <span><SafeHTML>{biography}</SafeHTML></span>
+                <span>
+                  <SafeHTML>{biography}</SafeHTML>
+                </span>
               </Typography>
             </Collapse>
           </CardContent>

ui/src/artist/MobileArtistDetails.jsx

@@ -169,7 +169,9 @@ const MobileArtistDetails = ({ artistInfo, biography, record }) => {
       <div className={classes.biography}>
         <Collapse collapsedHeight={'1.5em'} in={expanded} timeout={'auto'}>
           <Typography variant={'body1'} onClick={() => setExpanded(!expanded)}>
-            <span><SafeHTML>{biography}</SafeHTML></span>
+            <span>
+              <SafeHTML>{biography}</SafeHTML>
+            </span>
           </Typography>
         </Collapse>
       </div>

ui/src/common/MultiLineTextField.jsx

@@ -28,9 +28,7 @@ export const MultiLineTextField = memo(
         component="span"
         {...sanitizeFieldRestProps(rest)}
       >
-        {lines.length === 0 && emptyText
+        {lines.length === 0 && emptyText ? emptyText : lines}
-          ? emptyText
-          : lines}
       </Typography>
     )
   },

ui/src/common/SafeHTML.jsx

@@ -1,9 +1,7 @@
 import DOMPurify from 'dompurify'
 import { Fragment, useMemo } from 'react'
 
-export const SafeHTML = ({
+export const SafeHTML = ({ children }) => {
-  children,
-}) => {
   const purified = useMemo(() => {
     const purify = DOMPurify()