fix zoom buttons rendering below viewport in iOS

Author: basilleaf

src/App.scss

@@ -63,10 +63,13 @@ body {
 // customize zoom button styles
 $border-radius: 6px;
 
+.leaflet-bottom.leaflet-right {
+  position: fixed;
+}
 .leaflet-bottom .leaflet-control {
   box-shadow: -6px 7px 15px #242424;
   margin-right: 28px;
-  margin-bottom: 80px;
+  margin-bottom: 32px;
 }
 .leaflet-container .leaflet-bar {
   border: unset;

src/Homepage.js

@@ -241,9 +241,9 @@ class Homepage extends React.Component {
             />
           </Map>
         )}
+
         {this.state.currentVideo && this.state.videosPlaying > 0 && (
           <InfoBox
-            hidden={false}
             {...this.state.currentVideo.info()}
             displayMode={this.props.displayMode}
           />

src/components/InfoBox.js

@@ -56,10 +56,10 @@ export default function InfoBox({ desc, displayMode, title, url }) {
 
     if (closed) {
       intro.style.transition = "margin 300ms";
-      intro.style.marginBottom = "80px"; // .leaflet-bottom .leaflet-control in App.scss
+      intro.style.marginBottom = "32px"; // .leaflet-bottom .leaflet-control in App.scss
     } else {
       intro.style.transition = "margin 300ms 200ms";
-      intro.style.marginBottom = `${height + 64}px`;
+      intro.style.marginBottom = `${height + 24}px`;
     }
   }, [closed]);