From f55469c177a8cc7893e44aa54c6809ce63d2f83c Mon Sep 17 00:00:00 2001
From: Aitor Urrutia <aitor.urrutia@biko2.com>
Date: Mon, 21 Mar 2022 17:02:51 +0100
Subject: [PATCH] Nabigazioa konpontzen du zoom egiten denean

---
 .../Gainburua/DesktopNabigazioa.tsx           |  6 ++--
 front/src/components/Gainburua/Gainburua.tsx  | 31 +++++++++++++------
 2 files changed, 23 insertions(+), 14 deletions(-)

diff --git a/front/src/components/Gainburua/DesktopNabigazioa.tsx b/front/src/components/Gainburua/DesktopNabigazioa.tsx
index 9f7fc0d..6dcbdff 100644
--- a/front/src/components/Gainburua/DesktopNabigazioa.tsx
+++ b/front/src/components/Gainburua/DesktopNabigazioa.tsx
@@ -22,10 +22,8 @@ export const DesktopNabigazioa: React.FC<{
 };
 
 export const Nabigazioa = styled.nav`
-  width: 100%;
-  position: absolute;
-  bottom: ${rem(size.tiny)};
-  left: 0;
+  display: flex;
+  justify-content: center;
 `;
 
 export const EstekaZerrenda = styled.ul`
diff --git a/front/src/components/Gainburua/Gainburua.tsx b/front/src/components/Gainburua/Gainburua.tsx
index 82a2234..0a4c612 100644
--- a/front/src/components/Gainburua/Gainburua.tsx
+++ b/front/src/components/Gainburua/Gainburua.tsx
@@ -55,24 +55,28 @@ export const Gainburua: React.FC<Props> = ({
         </GainburuWrapper>
       </MediaQuery>
 
-      <Container>
-        <main>
+      <Nagusia>
+        <Container>
           <Deskribapena>{deskribapena}</Deskribapena>
 
           <IzenburuWrapper>
             <Marra />
             <Izenburua>{izenburua}</Izenburua>
           </IzenburuWrapper>
-        </main>
+        </Container>
+      </Nagusia>
 
-        <MediaQuery minWidth={breakpoints.tablet}>
-          <DesktopNabigazioa atala={atala} />
-        </MediaQuery>
-      </Container>
+      <MediaQuery minWidth={breakpoints.tablet}>
+        <DesktopNabigazioa atala={atala} />
+      </MediaQuery>
     </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;
-  padding-bottom: 0;
+  /* HACK: Hasiera orriak edukirik ez duenez, gainburuak altuera osoa hartuko du */
+  min-height: ${({ atala }) => (atala === 'hasiera' ? '100vh' : '0')};
+
+  ${media.desktop`
+    min-height: 100vh;  
+  `}
 `;
 
 const LogoWrapper = styled.div`