From 9e0bc83f193c048fd405d8587b3c6450c6330aad Mon Sep 17 00:00:00 2001
From: Paulo Gustavo Veiga <pveiga@wisemapping.com>
Date: Sun, 28 Feb 2021 20:04:51 -0800
Subject: [PATCH] bug: responsive layout for all except maps list

---
 .../src/components/layout/header/styled.ts    | 32 +++++++++++--------
 packages/webapp/src/theme/index.ts            |  3 +-
 2 files changed, 21 insertions(+), 14 deletions(-)

diff --git a/packages/webapp/src/components/layout/header/styled.ts b/packages/webapp/src/components/layout/header/styled.ts
index 4f0b4b7c..b41cff41 100644
--- a/packages/webapp/src/components/layout/header/styled.ts
+++ b/packages/webapp/src/components/layout/header/styled.ts
@@ -26,30 +26,36 @@ export const StyledNav = styled.nav`
         z-index: 2;
     }
 
-    /* Review ....*/
-    .header-middle {
-        grid-column-start: 2;
-    }
-
-    .header-area-right1 {
-        grid-column-start: 3;
-    }
-
     .header-area-right2 {
-        grid-column-start: 4;
+        grid-column-start: 3;
+        text-align: right;
     }
 
     .header-area-right1 span,
     .header-area-right2 span {
         font-size: 15px;
     }
+   
+  
     .header-area-content-span {
         grid-column-start: 2;
-        grid-column-end: 4;
+        grid-column-end: 3;
         text-align: right;
         font-size: 14px;
         padding: 10px;
     }
+
+    @media only screen and (max-width: 600px) {
+        .header-area-content-span {
+            display: none;
+            grid-column-start: 2;
+            grid-column-end: 3;
+            text-align: right;
+            font-size: 14px;
+            padding: 10px;
+        }
+    }
+    
 `;
 
 export const StyledDiv = styled.nav`
@@ -63,12 +69,12 @@ export const StyledDiv = styled.nav`
 
     display: grid;
     white-space: nowrap;
-    grid-template-columns: 200px 1fr 130px 160px 50px;
+    grid-template-columns: 150px 1fr 160px 20px;
 `;
 
 export const Logo = styled.span`
     grid-column-start: 1;
-    margin-left: 50px;
+    margin-left: 20px;
     margin-top: 0px;
 
     .header-logo a {
diff --git a/packages/webapp/src/theme/index.ts b/packages/webapp/src/theme/index.ts
index 12055584..bbfc5b28 100644
--- a/packages/webapp/src/theme/index.ts
+++ b/packages/webapp/src/theme/index.ts
@@ -6,7 +6,8 @@ const theme = createMuiTheme({
             '@global': {
                 body: {
                     backgroundColor: 'white',
-                    minWidth: '800px'
+                    // Important: This size is the min to diplay all pages except maps list. 
+                    minWidth: '450px'
                 },
             },
         },