fix: mobile viewports, leaflet orientation tiles. (#167)

morganney · Jan 9, 2024 · 9d5c4f5 · 9d5c4f5
1 parent 14425d3
commit 9d5c4f5
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 2 deletions.
diff --git a/packages/ui/src/global.css b/packages/ui/src/global.css
@@ -49,7 +49,8 @@
   font-family: Roboto, Arial, sans-serif;
 }
 html {
-  height: 100vh;
+  height: -webkit-fill-available;
+  height: fill-available;
   display: grid;
   box-sizing: border-box;
 }
@@ -87,7 +88,8 @@ a:hover {
 }
 main {
   display: flex;
-  height: 100vh;
+  height: 100dvh;
+  width: 100%;
   justify-content: center;
 }
 #map {

diff --git a/packages/ui/src/layout.tsx b/packages/ui/src/layout.tsx
@@ -34,16 +34,25 @@ const Layout: FC<LayoutProps> = ({ children }) => {
         document.body.classList.remove('busmap-mapmove')
       }, 250)
     }
+    const orientationListener = () => {
+      setTimeout(() => {
+        if (map) {
+          map.invalidateSize()
+        }
+      }, 100)
+    }
 
     if (map) {
       map.on('move', moveListener)
       map.on('moveend', moveEndListener)
+      screen.orientation.addEventListener('change', orientationListener)
     }
 
     return () => {
       if (map) {
         map.off('move', moveListener)
         map.off('moveend', moveEndListener)
+        screen.orientation.removeEventListener('change', orientationListener)
       }
     }
   }, [map])