remove useless scrollbars

NINAnor · Sep 4, 2024 · f691528 · f691528
1 parent 04df47f
commit f691528
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 19 deletions.
diff --git a/src/pages/viewer/components/TabNav.jsx b/src/pages/viewer/components/TabNav.jsx
@@ -9,7 +9,11 @@ import { mapStore, selectors } from "../mapStore";
 function Description() {
   const description = useStore(mapStore, selectors.getMapDescription);
 
-  return <Content px={2}>{parse(description)}</Content>;
+  return (
+    <div className="description">
+      <Content px={2}>{parse(description)}</Content>
+    </div>
+  );
 }
 
 const TABS = {
@@ -31,14 +35,19 @@ export default function TabNav({ top = 0 }) {
 
   return (
     <>
-      <Tabs fullwidth mt={3} domRef={ref}>
+      <Tabs fullwidth domRef={ref}>
         {Object.keys(TABS).map((k) => (
           <Tabs.Tab active={k === active} key={k} onClick={() => setActive(k)}>
             {TABS[k].label}
           </Tabs.Tab>
         ))}
       </Tabs>
-      <div style={{ height: `calc(100vh - ${height + top}px)` }}>{render}</div>
+      <div
+        className="max-wrapper"
+        style={{ height: `calc(100vh - ${height + top}px)` }}
+      >
+        {render}
+      </div>
     </>
   );
 }
diff --git a/src/pages/viewer/index.jsx b/src/pages/viewer/index.jsx
@@ -48,7 +48,7 @@ export function Viewer() {
       <Toaster position="top center" />
       <MapContextProvider mapSlug={mapSlug}>
         <ModalContextProvider>
-          <div id="app-wrap" style={{ display: "flex" }}>
+          <div id="app-wrap">
             <Sidebar />
             <Element id="content">
               <Map />

diff --git a/src/styles/app.scss b/src/styles/app.scss
@@ -10,6 +10,10 @@ $link: $nina-secondary;
 $family-primary: "Open Sans", Helvetica, Arial;
 $family-secondary: "Open Sans", Helvetica, Arial;
 
+$desktop-size: 960px;
+$hd-size: 1200px;
+$tablet-size: 770px;
+
 @import "../node_modules/bulma/bulma.sass";
 
 @import "maplibre-gl/dist/maplibre-gl.css";
@@ -18,8 +22,12 @@ $family-secondary: "Open Sans", Helvetica, Arial;
 
 html,
 body {
+  width: 100%;
   height: 100%;
+  padding: 0;
   margin: 0;
+  overflow-x: auto !important;
+  overflow-y: auto !important;
 }
 
 $footer-height: 40px;
@@ -35,13 +43,16 @@ $footer-height: 40px;
 }
 
 #app-wrap {
-  height: 100vh;
-  overflow-y: hidden;
+  height: 100%;
+  display: grid;
+  grid-template-columns: auto;
+
+  @media (min-width: $desktop-size) {
+    grid-template-columns: 400px auto;
+  }
 
   #sidebar {
-    width: 400px;
-    overflow-y: auto;
-    overflow-x: hidden;
+    height: 100%;
   }
 
   #footer {
@@ -53,9 +64,8 @@ $footer-height: 40px;
   }
 
   #content {
-    display: flex;
-    flex-direction: column;
     flex-grow: 1;
+    width: 100%;
   }
 
   .map {
@@ -64,7 +74,8 @@ $footer-height: 40px;
   }
 
   .map-wrap {
-    flex-grow: 1;
+    width: 100%;
+    height: calc(100vh - $footer-height);
   }
 
   .maplibregl-popup {
@@ -76,8 +87,13 @@ $footer-height: 40px;
     padding: 0 0.5rem;
   }
 
+  .tabs:not(:last-child) {
+    margin-bottom: 0 !important;
+  }
+
   .layers {
     padding: 0 8px;
+    width: 100%;
     height: 100%;
   }
 }
@@ -96,7 +112,7 @@ $footer-height: 40px;
   bottom: 25px + $footer-height;
   right: 10px;
 
-  max-height: calc(100vh - 200px);
+  max-height: calc(100% - 200px);
   overflow-y: auto;
 
   text-wrap: wrap;
@@ -145,10 +161,10 @@ $footer-height: 40px;
 }
 
 #basemap {
-  position: relative;
-  bottom: 5px + 72px;
-  left: 5px;
-  max-width: calc(100vw - (400px + 5px));
+  position: absolute;
+  bottom: 5px + $footer-height;
+  margin-left: 5px;
+  width: calc(100% - (400px + 5px));
   display: flex;
 
   .basemap-el {
@@ -201,8 +217,7 @@ $footer-height: 40px;
 #sidebar-mobile {
   position: absolute;
   z-index: 500;
-  width: 100vw;
-  height: 100vh;
+  width: 100%;
   left: 0;
   top: 0;
   background-color: white;
@@ -224,4 +239,9 @@ $footer-height: 40px;
   position: absolute;
   top: 1rem;
   right: 1rem;
+  z-index: 10;
+}
+
+.max-wrapper {
+  overflow-y: auto;
 }