Update screeen sizing for mobile

umonkey · Apr 1, 2024 · d7aee60 · d7aee60
1 parent b8aef5a
commit d7aee60
Show file tree

Hide file tree

Showing 5 changed files with 17 additions and 10 deletions.
diff --git a/frontend/Makefile b/frontend/Makefile
@@ -17,7 +17,7 @@ lint:
 	npm run lint
 
 serve:
-	REACT_APP_API_ROOT=http://localhost:8000 npm run dev
+	REACT_APP_API_ROOT=http://localhost:8000 npm run dev -- --host
 
 storybook:
 	npm run storybook -- --no-open

diff --git a/frontend/src/App.css b/frontend/src/App.css
@@ -1,7 +1,11 @@
 #root {
-  width: 100vw;
-  height: 100vh;
+  width: 100%;
+  height: 100%;
+  min-height: 100%;
+  position: absolute;
+
   background-color: #e4f0e2;
   color: #222;
   line-height: 1.25em;
+  position: relative;
 }
diff --git a/frontend/src/components/maps/Map/styles.css b/frontend/src/components/maps/Map/styles.css
@@ -1,4 +1,4 @@
 .map {
-  width: 100vw;
-  height: 100vh;
+  width: 100%;
+  height: 100%;
 }
diff --git a/frontend/src/components/pages/HomePage/styles.css b/frontend/src/components/pages/HomePage/styles.css
@@ -1,7 +1,9 @@
 .HomePage {
   display: flex;
   flex-direction: row;
-  width: 100vw;
+
+  width: 100%;
+  height: 100%;
 }
 
 .map {

diff --git a/frontend/src/index.css b/frontend/src/index.css
@@ -11,6 +11,8 @@
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+
+  height: 100%;
 }
 
 a {
@@ -24,10 +26,9 @@ a:hover {
 
 body {
   margin: 0;
-  display: flex;
-  place-items: center;
-  min-width: 320px;
-  min-height: 100vh;
+
+  width: 100%;
+  height: 100%;
 }
 
 h1 {