From 0fe5f4dea2cf5dfb090ea54c0b1dead877e82a4e Mon Sep 17 00:00:00 2001
From: Gabriele Dal Cengio <dalcengio.gabriele@gmail.com>
Date: Mon, 23 Oct 2023 12:33:34 -0700
Subject: [PATCH] Make sure button container doesn't just float on panel
 toggles

---
 appv2/src/UI/Map/Buttons/ButtonContainer.css |  2 +-
 appv2/src/UI/Overlay/Overlay.tsx             | 15 ++++++++++++++-
 appv2/src/UI/Overlay/OverlayHeader.tsx       |  4 +++-
 3 files changed, 18 insertions(+), 3 deletions(-)

diff --git a/appv2/src/UI/Map/Buttons/ButtonContainer.css b/appv2/src/UI/Map/Buttons/ButtonContainer.css
index c82d9281c..2c8849eeb 100644
--- a/appv2/src/UI/Map/Buttons/ButtonContainer.css
+++ b/appv2/src/UI/Map/Buttons/ButtonContainer.css
@@ -9,7 +9,7 @@
   justify-content: center;
   position: absolute;
   bottom: 0;
-  margin-bottom: 200px;
+  /* margin-bottom: 200px; */
   width: 100vw;
   left: 50%;
   transform: translateX(-50%);
diff --git a/appv2/src/UI/Overlay/Overlay.tsx b/appv2/src/UI/Overlay/Overlay.tsx
index 304e0ca1c..60201ac49 100644
--- a/appv2/src/UI/Overlay/Overlay.tsx
+++ b/appv2/src/UI/Overlay/Overlay.tsx
@@ -1,10 +1,23 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { useSelector } from 'react-redux';
 import './Overlay.css';
 
 const Overlay = (props) => {
   const panelOpen = useSelector((state: any) => state.AppMode.panelOpen);
   const fullScreen = useSelector((state: any) => state.AppMode?.panelFullScreen);
+
+  useEffect(() => {
+    if (!fullScreen) {
+      const buttonContainer = document.getElementById('map-btn-container');
+      if(!panelOpen) {
+        if (buttonContainer) buttonContainer.style.marginBottom = 0 + 'vh';
+      } else {
+        const overlayDiv = document.getElementById('overlaydiv');
+        if (overlayDiv) buttonContainer.style.marginBottom = overlayDiv.style.height;
+      }
+    }
+  }, [panelOpen, fullScreen]);
+
   return (
     <div
     id='overlaydiv'
diff --git a/appv2/src/UI/Overlay/OverlayHeader.tsx b/appv2/src/UI/Overlay/OverlayHeader.tsx
index e6c4686dc..993943d59 100644
--- a/appv2/src/UI/Overlay/OverlayHeader.tsx
+++ b/appv2/src/UI/Overlay/OverlayHeader.tsx
@@ -1,5 +1,5 @@
 import { Button } from '@mui/material';
-import React from 'react';
+import React, { useEffect } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { useHistory } from 'react-router';
 
@@ -22,7 +22,9 @@ const maximize = (e) => {
 
 const minimize = (e) => {
   const elementWeWant = document.getElementById('overlaydiv');
+  const buttonContainer = document.getElementById('map-btn-container');
   elementWeWant.style.height = '0px';
+  buttonContainer.style.marginBottom = 5 + 'vh';
 };
 
 const debouncedDrag = debounce((e) => {