diff --git a/.changelog/601.bugfix.md b/.changelog/601.bugfix.md new file mode 100644 index 000000000..39801f588 --- /dev/null +++ b/.changelog/601.bugfix.md @@ -0,0 +1 @@ +Fix info icon missing on mobile diff --git a/src/app/pages/HomePage/index.tsx b/src/app/pages/HomePage/index.tsx index 36b8e51a1..9e3fb9e34 100644 --- a/src/app/pages/HomePage/index.tsx +++ b/src/app/pages/HomePage/index.tsx @@ -102,11 +102,13 @@ const FooterStyled = styled(Box)(({ theme }) => ({ // needed to make footer elements clickable zIndex: zIndexHomePage.paraTimeSelector, }, - [theme.breakpoints.down('md')]: { - display: 'flex', - justifyContent: 'flex-end', - paddingRight: theme.spacing(2), - }, +})) + +const InfoScreenBtn = styled(IconButton)(({ theme }) => ({ + position: 'fixed', + right: theme.spacing(2), + bottom: theme.spacing(2), + zIndex: zIndexHomePage.paraTimeSelector, })) const localStore = storage() @@ -114,7 +116,7 @@ const localStore = storage() export const HomePage: FC = () => { const { t } = useTranslation() const infoAriaLabel = t('home.helpScreen.infoIconAria') - const { isMobile } = useScreenSize() + const { isMobile, isTablet } = useScreenSize() const { network } = useSearchQueryNetworkParam() const isApiReachable = useIsApiReachable(network).reachable @@ -171,15 +173,18 @@ export const HomePage: FC = () => { - - {showInfoScreenBtn && ( - - - - )} - {!isMobile &&