From 030710afa9d51810294ba20966bbd5792983d757 Mon Sep 17 00:00:00 2001
From: Deluan <deluan@navidrome.org>
Date: Mon, 26 May 2025 18:21:55 -0400
Subject: [PATCH] fix(ui): enhance external link display with consistent
 minimum heights

Signed-off-by: Deluan <deluan@navidrome.org>
---
 ui/src/artist/ArtistExternalLink.jsx   | 10 +++++++++-
 ui/src/artist/DesktopArtistDetails.jsx |  1 +
 2 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/ui/src/artist/ArtistExternalLink.jsx b/ui/src/artist/ArtistExternalLink.jsx
index 9efa3925..1b6d7456 100644
--- a/ui/src/artist/ArtistExternalLink.jsx
+++ b/ui/src/artist/ArtistExternalLink.jsx
@@ -6,8 +6,16 @@ import { ImLastfm2 } from 'react-icons/im'
 import MusicBrainz from '../icons/MusicBrainz'
 import { intersperse } from '../utils'
 import config from '../config'
+import { makeStyles } from '@material-ui/core/styles'
+
+const useStyles = makeStyles({
+  linkBar: {
+    minHeight: '1.875em',
+  },
+})
 
 const ArtistExternalLinks = ({ artistInfo, record }) => {
+  const classes = useStyles()
   const translate = useTranslate()
   let linkButtons = []
   const lastFMlink = artistInfo?.biography?.match(
@@ -52,7 +60,7 @@ const ArtistExternalLinks = ({ artistInfo, record }) => {
       <MusicBrainz className="musicbrainz-icon" />,
     )
 
-  return <div>{intersperse(linkButtons, ' ')}</div>
+  return <div className={classes.linkBar}>{intersperse(linkButtons, ' ')}</div>
 }
 
 export default ArtistExternalLinks
diff --git a/ui/src/artist/DesktopArtistDetails.jsx b/ui/src/artist/DesktopArtistDetails.jsx
index b21005fc..bff2c090 100644
--- a/ui/src/artist/DesktopArtistDetails.jsx
+++ b/ui/src/artist/DesktopArtistDetails.jsx
@@ -29,6 +29,7 @@ const useStyles = makeStyles(
       float: 'left',
       wordBreak: 'break-word',
       cursor: 'pointer',
+      minHeight: '4.5em',
     },
     content: {
       flex: '1 0 auto',