fix(ui): enhance external link display with consistent minimum heights
Signed-off-by: Deluan <deluan@navidrome.org>
This commit is contained in:
@@ -6,8 +6,16 @@ import { ImLastfm2 } from 'react-icons/im'
|
|||||||
import MusicBrainz from '../icons/MusicBrainz'
|
import MusicBrainz from '../icons/MusicBrainz'
|
||||||
import { intersperse } from '../utils'
|
import { intersperse } from '../utils'
|
||||||
import config from '../config'
|
import config from '../config'
|
||||||
|
import { makeStyles } from '@material-ui/core/styles'
|
||||||
|
|
||||||
|
const useStyles = makeStyles({
|
||||||
|
linkBar: {
|
||||||
|
minHeight: '1.875em',
|
||||||
|
},
|
||||||
|
})
|
||||||
|
|
||||||
const ArtistExternalLinks = ({ artistInfo, record }) => {
|
const ArtistExternalLinks = ({ artistInfo, record }) => {
|
||||||
|
const classes = useStyles()
|
||||||
const translate = useTranslate()
|
const translate = useTranslate()
|
||||||
let linkButtons = []
|
let linkButtons = []
|
||||||
const lastFMlink = artistInfo?.biography?.match(
|
const lastFMlink = artistInfo?.biography?.match(
|
||||||
@@ -52,7 +60,7 @@ const ArtistExternalLinks = ({ artistInfo, record }) => {
|
|||||||
<MusicBrainz className="musicbrainz-icon" />,
|
<MusicBrainz className="musicbrainz-icon" />,
|
||||||
)
|
)
|
||||||
|
|
||||||
return <div>{intersperse(linkButtons, ' ')}</div>
|
return <div className={classes.linkBar}>{intersperse(linkButtons, ' ')}</div>
|
||||||
}
|
}
|
||||||
|
|
||||||
export default ArtistExternalLinks
|
export default ArtistExternalLinks
|
||||||
|
|||||||
@@ -29,6 +29,7 @@ const useStyles = makeStyles(
|
|||||||
float: 'left',
|
float: 'left',
|
||||||
wordBreak: 'break-word',
|
wordBreak: 'break-word',
|
||||||
cursor: 'pointer',
|
cursor: 'pointer',
|
||||||
|
minHeight: '4.5em',
|
||||||
},
|
},
|
||||||
content: {
|
content: {
|
||||||
flex: '1 0 auto',
|
flex: '1 0 auto',
|
||||||
|
|||||||
Reference in New Issue
Block a user