diff --git a/ui/src/album/AlbumDetails.js b/ui/src/album/AlbumDetails.js index 9eca3b626..165522117 100644 --- a/ui/src/album/AlbumDetails.js +++ b/ui/src/album/AlbumDetails.js @@ -206,6 +206,7 @@ const Details = (props) => { const AlbumDetails = (props) => { const record = useRecordContext(props) + const isXsmall = useMediaQuery((theme) => theme.breakpoints.down('xs')) const isDesktop = useMediaQuery((theme) => theme.breakpoints.up('lg')) const classes = useStyles() const [isLightboxOpen, setLightboxOpen] = React.useState(false) @@ -270,7 +271,7 @@ const AlbumDetails = (props) => { ) : ( {record.genre} )} - {isDesktop && ( + {!isXsmall && ( diff --git a/ui/src/artist/ArtistExternalLink.js b/ui/src/artist/ArtistExternalLink.js index 3d0d315cf..aafd74f1d 100644 --- a/ui/src/artist/ArtistExternalLink.js +++ b/ui/src/artist/ArtistExternalLink.js @@ -1,6 +1,6 @@ import React from 'react' import { useTranslate } from 'react-admin' -import { IconButton, Tooltip, Link, useMediaQuery } from '@material-ui/core' +import { IconButton, Tooltip, Link } from '@material-ui/core' import { ImLastfm2 } from 'react-icons/im' import MusicBrainz from '../icons/MusicBrainz' @@ -21,8 +21,6 @@ const ArtistExternalLinks = ({ artistInfo, record }) => { links.push(`https://musicbrainz.org/artist/${artistInfo.musicBrainzId}`) } - const isDesktop = useMediaQuery((theme) => theme.breakpoints.up('sm')) - const addLink = (url, title, icon) => { const translatedTitle = translate(title) const link = ( @@ -38,13 +36,11 @@ const ArtistExternalLinks = ({ artistInfo, record }) => { linkButtons.push({link}) } - isDesktop && addLink(links[0], 'message.openIn.lastfm', ) - - isDesktop && - artistInfo?.musicBrainzId && + addLink(links[0], 'message.openIn.lastfm', ) + artistInfo?.musicBrainzId && addLink(links[1], 'message.openIn.musicbrainz', ) - return isDesktop &&
{intersperse(linkButtons, ' ')}
+ return
{intersperse(linkButtons, ' ')}
} export default ArtistExternalLinks