fix zoom buttons rendering below viewport in iOS

spacehackers · Jul 31, 2022 · 366c565 · 366c565
1 parent 725141e
commit 366c565
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 3 deletions.
diff --git a/src/App.scss b/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;

diff --git a/src/Homepage.js b/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}
           />

diff --git a/src/components/InfoBox.js b/src/components/InfoBox.js
@@ -56,7 +56,7 @@ 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`;