Nabigazioa konpontzen du zoom egiten denean

front/src/components/Gainburua/DesktopNabigazioa.tsx

@@ -22,10 +22,8 @@ export const DesktopNabigazioa: React.FC<{
 };
 
 export const Nabigazioa = styled.nav`
-  width: 100%;
+  display: flex;
-  position: absolute;
+  justify-content: center;
-  bottom: ${rem(size.tiny)};
-  left: 0;
 `;
 
 export const EstekaZerrenda = styled.ul`

front/src/components/Gainburua/Gainburua.tsx

@@ -55,24 +55,28 @@ export const Gainburua: React.FC<Props> = ({
         </GainburuWrapper>
       </MediaQuery>
 
-      <Container>
+      <Nagusia>
-        <main>
+        <Container>
           <Deskribapena>{deskribapena}</Deskribapena>
 
           <IzenburuWrapper>
             <Marra />
             <Izenburua>{izenburua}</Izenburua>
           </IzenburuWrapper>
-        </main>
+        </Container>
+      </Nagusia>
 
-        <MediaQuery minWidth={breakpoints.tablet}>
+      <MediaQuery minWidth={breakpoints.tablet}>
-          <DesktopNabigazioa atala={atala} />
+        <DesktopNabigazioa atala={atala} />
-        </MediaQuery>
+      </MediaQuery>
-      </Container>
     </Wrapper>
   );
 };
 
+const Nagusia = styled.main`
+  flex-grow: 1;
+`;
+
 const MugikorWrapper = styled.div`
   display: grid;
   grid-template-columns: repeat(3, 1fr);
@@ -99,14 +103,21 @@ const Wrapper = styled.div<{ atala: 'hasiera' | 'kafetegia' }>`
   --color: ${({ atala }) =>
     atala === 'hasiera' ? colors.zuria : colors.beltza};
 
+  display: flex;
+  flex-direction: column;
+
   background-color: ${({ atala }) =>
     atala === 'hasiera' ? colors.gorria : colors.horia};
   color: var(--color);
 
-  padding-bottom: ${rem(size.base)};
+  padding-bottom: ${rem(size.tiny)};
 
-  min-height: 100vh;
+  /* HACK: Hasiera orriak edukirik ez duenez, gainburuak altuera osoa hartuko du */
-  padding-bottom: 0;
+  min-height: ${({ atala }) => (atala === 'hasiera' ? '100vh' : '0')};
+
+  ${media.desktop`
+    min-height: 100vh;  
+  `}
 `;
 
 const LogoWrapper = styled.div`