Adjust explore layout to not have overflow

earthrise-media · Dec 5, 2023 · 8f5cdbf · 8f5cdbf
1 parent bf1b0e6
commit 8f5cdbf
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 2 deletions.
diff --git a/vacs-map-app/src/MapExplorer.vue b/vacs-map-app/src/MapExplorer.vue
@@ -9,7 +9,7 @@
           </template>
         </component>
         <div class="overlay-wrapper">
-          <OverviewTop class="interactive" />
+          <OverviewTop class="interactive"/>
           <div class="map-overlay desktop">
             <div class="overlay-left">
               <ExploreSidebar class="interactive" ref="overlayLeftRef" />
@@ -123,6 +123,7 @@ onUnmounted(() => {
 }
 
 .map-overlay {
+  height: 1rem;
   flex-grow: 1;
   display: flex;
   justify-content: space-between;
@@ -131,8 +132,12 @@ onUnmounted(() => {
 }
 
 .overlay-left {
+  height: 100%;
+  margin-left: var(--page-horizontal-margin);
   display: flex;
-  flex-direction: row;
+  flex-direction: column;
+  flex-wrap: wrap;
+  justify-content: space-between;
   align-items: flex-end;
   gap: 2rem;
 }

diff --git a/vacs-map-app/src/components/MapLegend.vue b/vacs-map-app/src/components/MapLegend.vue
@@ -65,6 +65,7 @@ const openYieldRatioModal = () => {
   flex-direction: column;
   gap: 0.25rem;
   width: 18rem;
+  margin-top: auto;
 }
 
 .legend-title {