feat: very basic mobile layout

agrc · May 4, 2023 · 5d42fd3 · 5d42fd3
1 parent 68dc947
commit 5d42fd3
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 14 deletions.
diff --git a/index.html b/index.html
@@ -15,8 +15,10 @@
 
     <title>Utah DEQ Environmental Interactive Map</title>
   </head>
-  <body class="h-full w-full utah-design-system">
-    <div id="root"></div>
+    <div
+      id="root"
+      class="absolute bottom-0 left-0 right-0 top-[60px] md:top-[78px]"
+    ></div>
     <script type="module" src="/src/main.jsx"></script>
   </body>
 </html>
diff --git a/src/App.jsx b/src/App.jsx
@@ -14,7 +14,7 @@ function App() {
       // domLocationTarget: {
       //   element: headerRef.current,
       // },
-      title: 'Utah Environmental Interactive Map',
+      title: 'Environmental Interactive Map',
       titleURL: null,
       logo: '<img src="/deq_logo.png" alt="DEQ Logo" />',
       utahId: false,
@@ -50,11 +50,11 @@ function App() {
 
   return (
     <AnalyticsProvider sdk={getAnalytics(app)}>
-      <div className="flex h-full w-full">
-        <div className="flex-1 border-r border-gray-300">
+      <div className="flex h-full w-full flex-col md:flex-row">
+        <div className="flex-1 border-b border-gray-300 md:border-r">
           <MapComponent />
         </div>
-        <div className="w-80 overflow-y-auto">
+        <div className="overflow-y-auto md:w-80">
           <RemoteConfig>
             <SearchWizard />
           </RemoteConfig>

diff --git a/src/index.css b/src/index.css
@@ -2,14 +2,6 @@
 @tailwind components;
 @tailwind utilities;
 
-#root {
-  position: absolute;
-  top: 78px;
-  bottom: 0;
-  left: 0;
-  right: 0;
-}
-
 .utah-design-system.main-menu__outer {
   display: none;
 }