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