DBC22-5493: Adjusting scroll for sidepanels at draggable breakpoints (#1241)

Author: minORC

src/frontend/src/Components/map/Map.js

@@ -1099,7 +1099,11 @@ export default function DriveBCMap(props) {
 
             <Drawer.Portal container={mapElement.current}>
               <Drawer.Overlay className="drawer-overlay" />
-              <Drawer.Content className="drawer-content" ref={drawerRef}>
+              <Drawer.Content
+                className="drawer-content"
+                ref={drawerRef}
+                style={{ '--drawer-snap-point': snap }}
+              >
                 {clickedFeature &&
                   <button
                     className="close-panel"

src/frontend/src/Components/map/Map.scss

@@ -497,6 +497,7 @@
 
     .popup__content {
       overflow-y: scroll;
+      height: calc(var(--drawer-snap-point, 100%) - 52px);
     }
   }
 

src/frontend/src/Components/map/panels/index.scss

@@ -5,12 +5,6 @@
   height: 100%;
   margin-bottom: 0;
 
-  @supports (-webkit-touch-callout: none) {
-    @media (max-width: 430px) {
-      margin-bottom: 270px;
-    }
-  }
-
   &__title {
     padding: 1rem 4rem 0.75rem 1rem;
     height: 52px;

src/frontend/src/Components/map/panels/weather/LocalWeatherPanel.js

@@ -252,9 +252,11 @@ export default function LocalWeatherPanel(props) {
             </div>
           )}
 
-          <div className="popup__content__forecasts">
-            <LocalForecastTabs forecasts={dailyForecastData} />
-          </div>
+          {dailyForecastData.length > 0 && (
+            <div className="popup__content__forecasts">
+              <LocalForecastTabs forecasts={dailyForecastData} />
+            </div>
+          )}
         </div>
 
         <div className="popup__content__footer">

src/frontend/src/Components/map/panels/weather/LocalWeatherPanel.scss

@@ -99,7 +99,6 @@
       }
 
       &__footer {
-        padding: 1rem;
         margin-top: auto;
 
         p {