@@ -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/CropFingerprint.vue b/vacs-map-app/src/components/CropFingerprint.vue
index 1307490..c0ddd3c 100644
--- a/vacs-map-app/src/components/CropFingerprint.vue
+++ b/vacs-map-app/src/components/CropFingerprint.vue
@@ -220,6 +220,7 @@ const arc = computed(() => {
}
.svg-wrapper {
height: 100%;
+ margin-top: 1rem;
}
svg {
diff --git a/vacs-map-app/src/components/ExploreSidebar.vue b/vacs-map-app/src/components/ExploreSidebar.vue
index 6a58999..5c117d4 100644
--- a/vacs-map-app/src/components/ExploreSidebar.vue
+++ b/vacs-map-app/src/components/ExploreSidebar.vue
@@ -115,7 +115,7 @@ const openScenarioModal = (s) => {
gap: 1rem;
justify-content: space-between;
height: 100%;
- margin-left: var(--page-horizontal-margin);
+ max-height: 50rem;
padding: 1.25rem;
width: 450px;
border: 1px solid var(--dark-gray);
diff --git a/vacs-map-app/src/components/MapLegend.vue b/vacs-map-app/src/components/MapLegend.vue
index 4a2d728..d1d95fe 100644
--- 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 {