Fix tree logo position for pages with banner

src/components/PageLayout/PageLayout.tsx

@@ -41,7 +41,7 @@ export const PageLayout: FC<PageLayoutProps> = ({contentWidth = 2, title = '', c
         <BannerContainer.Provider>
           <Stack sx={{minHeight: '100dvh'}}>
             <TopGrid />
-            <Grid container sx={{flex: 1}}>
+            <Grid container disableEqualOverflow sx={{flex: 1}}>
               <Grid xs={0} md={3} sx={{position: 'relative', display: {xs: 'none', md: 'block'}}}>
                 <StromLogo />
               </Grid>

src/components/PageLayout/StromLogo/StromLogo.tsx

@@ -1,31 +1,35 @@
 import {Box} from '@mui/material'
 import {FC} from 'react'
 
+import Strom from '@/svg/strom.svg'
+
 export const StromLogo: FC = () => {
   return (
     <Box
       sx={{
         position: 'fixed',
-        // tieto cisla su take dost ad-hoc, ale aj tak ten strom nebude vidno
-        top: {md: '204px', lg: '186px', xl: '222px'},
+        // tieto cisla su take dost ad-hoc
+        // je potrebne doratat este podla toho ze ci sa zobrazuje alebo nezobrazuje baner
+        // taktiez pri sirke 900 - 1100px sa niektore nadpisy zalomuju a rozbijaju zarovnanie stromu
+        // - problem toho je ze to je rozlisenie vacsinu tabletov na vysku, takze to bude treba fixnut
+        top: {md: '213px', lg: '265px', xl: '301px'},
         left: 0,
         bottom: 0,
         width: '25%',
         paddingTop: 2,
+        overflow: 'hidden',
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'end',
         zIndex: -1,
       }}
     >
-      <Box
-        sx={{
-          height: '100%',
-          width: '100%',
-          backgroundColor: 'black',
-          // toto je stary tomaskov stromcek
-          // clip-path: 'polygon(100% 0%, 100% 100%, 45% 100%, 96% 63%, 55% 63%, 96% 30%, 65% 30%)'
-          // toto je novy stromcek od Matusa Libaka
-          clipPath: 'polygon(100% 0, 100% 100%, 90% 100%, 90% 80%, 35% 80%, 90% 35%, 56% 35%)',
-        }}
-      />
+      <Box>
+        <Strom width="100%" height="auto" preserveAspectRatio="xMaxYMin" />
+      </Box>
+      <Box>
+        <Strom width="100%" height="auto" preserveAspectRatio="xMaxYMin" />
+      </Box>
     </Box>
   )
 }