index: Fix layout break on smaller viewports.

src/components/client/campaigns/CampaignCard/CampaignCard.tsx

@@ -2,7 +2,7 @@ import { useMemo } from 'react'
 import { useTranslation, i18n } from 'next-i18next'
 import { CampaignResponse } from 'gql/campaigns'
 
-import { Box, CardMedia } from '@mui/material'
+import { Box } from '@mui/material'
 
 import { routes } from 'common/routes'
 import { campaignListPictureUrl } from 'common/util/campaignImageUrls'

src/components/client/campaigns/CampaignProgress.tsx

@@ -27,7 +27,7 @@ export default function CampaignProgress({ campaignId, raised, target }: Props)
       labelSize={theme.spacing(1.5)}
       labelAlignment={percentageRound < 10 ? 'left' : 'right'}
       customLabelStyles={{ fontWeight: 400 }}
-      animateOnRender={true}
+      transitionDuration={'0s'}
     />
   )
 }

src/components/client/index/sections/ActiveCampaignsSection/ActiveCampaignCard/ActiveCampaignCard.tsx

@@ -1,7 +1,7 @@
 import { useTranslation, i18n } from 'next-i18next'
 import { CampaignResponse } from 'gql/campaigns'
 
-import { Box, CardMedia } from '@mui/material'
+import { Box } from '@mui/material'
 
 import Link from 'components/common/Link'
 import CampaignProgress from 'components/client/campaigns/CampaignProgress'
@@ -39,16 +39,11 @@ export default function ActiveCampaignCard({ campaign, index }: Props) {
         <Box
           position={'relative'}
           sx={{
-            // aspectRatio: 4 / 3,
-            // [theme.breakpoints.up('lg')]: {
-            //   aspectRatio: 0,
-            //   height: index === 0 ? theme.spacing(71.6) : theme.spacing(27.85),
-            // },
             width: '100%',
             aspectRatio: 1.5,
             [theme.breakpoints.up('lg')]: {
-              maxHeight: index === 0 ? theme.spacing(71.6) : theme.spacing(27.85),
-              aspectRatio: index === 0 ? 1.24 : 1.55,
+              maxHeight: index === 0 ? theme.spacing(71.2) : theme.spacing(27.65),
+              aspectRatio: index === 0 ? 0.9 : 1,
             },
           }}>
           <Image

src/components/client/index/sections/CompletedCampaignsSection/CompletedCampaignsSection.tsx

@@ -53,7 +53,7 @@ export default function CompletedCampaignsSection() {
             <CompletedCampaignLink
               onMouseDown={onLinkMouseDown}
               href={routes.campaigns.viewCampaignBySlug(campaign.slug)}
-              sx={{ position: 'relative', aspectRatio: 1, height: (theme) => theme.spacing(37.5) }}>
+              sx={{ position: 'relative', width: '100%', aspectRatio: 1 }}>
               <Image
                 fill
                 alt={campaign.title}

src/components/client/layout/AppNavBar.tsx

@@ -4,7 +4,7 @@ import Link from 'next/link'
 import { useRouter } from 'next/router'
 import { Menu } from '@mui/icons-material'
 import useScrollTrigger from '@mui/material/useScrollTrigger'
-import { AppBar, Toolbar, IconButton, Grid, Hidden, ButtonBase } from '@mui/material'
+import { AppBar, Toolbar, IconButton, Grid, ButtonBase } from '@mui/material'
 
 import { routes } from 'common/routes'
 import PodkrepiLogo from 'components/common/brand/PodkrepiLogo'

src/components/client/layout/Footer/LogoSocialIcons.tsx

@@ -6,7 +6,7 @@ import { Grid } from '@mui/material'
 import { routes } from 'common/routes'
 import PodkrepiLogo from 'components/common/brand/PodkrepiLogo'
 import { SocialIcons } from './SocialIcons'
-import { SubscribeBtn } from './SubscribeBtn'
+// import { SubscribeBtn } from './SubscribeBtn'
 
 export const LogoSocialIcons = () => {
   const { locale } = useRouter()

src/components/client/layout/nav/DonationMenuMobile.tsx

@@ -48,7 +48,7 @@ export default function DonationMenuMobile() {
       <AccordionSummary
         className={classes.accordionSummary}
         expandIcon={<ExpandMoreIcon />}
-        aria-controls="panel1a-content">
+        aria-controls="campaign-panel-content">
         {t('nav.campaigns.index')}
       </AccordionSummary>
       <AccordionDetails>

src/components/client/layout/nav/MobileNav/MobileNav.tsx

@@ -4,7 +4,7 @@ import { useRouter } from 'next/router'
 import { useTranslation } from 'next-i18next'
 import Link from 'next/link'
 
-import { SwipeableDrawer, Hidden, Grid } from '@mui/material'
+import { SwipeableDrawer, Grid } from '@mui/material'
 import FavoriteIcon from '@mui/icons-material/Favorite'
 
 import PodkrepiLogo from 'components/common/brand/PodkrepiLogo'
@@ -44,7 +44,7 @@ export default function MobileNav({ mobileOpen, setMobileOpen }: NavDeckProps) {
   }, [])
 
   return (
-    <Hidden mdUp implementation="css">
+    <Grid sx={{ display: { xs: 'flex', md: 'none' } }}>
       <SwipeableDrawer
         anchor="right"
         open={mobileOpen}
@@ -80,6 +80,6 @@ export default function MobileNav({ mobileOpen, setMobileOpen }: NavDeckProps) {
           </Grid>
         </NavMenuWrapper>
       </SwipeableDrawer>
-    </Hidden>
+    </Grid>
   )
 }

src/components/client/layout/nav/ProjectMenuMobile.tsx

@@ -47,7 +47,7 @@ export default function ProjectMenuMobile() {
     <StyledAccordion className={classes.accordionWrapper}>
       <AccordionSummary
         expandIcon={<ExpandMoreIcon />}
-        aria-controls="panel1a-content"
+        aria-controls="aboutus-panel-content"
         className={classes.accordionSummary}>
         {t('nav.about.about-us')}
       </AccordionSummary>

src/components/client/layout/nav/PublicMenu.tsx

@@ -58,6 +58,7 @@ export default function PublicMenu() {
         onClick={handleMenu}
         size="medium"
         color="inherit"
+        aria-label="authentication"
         classes={{ endIcon: classes.dropdownArrowIcon }}
         endIcon={
           open ? <ArrowDropUpIcon color="primary" /> : <ArrowDropDownIcon color="primary" />