Use 100dvh in h-screen. As a fallback use 100vh

nimiq · Sep 7, 2023 · 2d3b899 · 2d3b899
1 parent ed80889
commit 2d3b899
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 1 deletion.
diff --git a/src/components/MobileView.vue b/src/components/MobileView.vue
@@ -30,7 +30,7 @@ watch(selectedUuid, (uuid) => {
 </script>
 
 <template>
-  <div class="flex flex-col h-screen min-h-[100dvh] max-h-[100dvh]">
+  <div class="flex flex-col h-screen">
     <InteractionBar />
     <TheMapInstance class="relative flex-1" />
     <!-- Shadow -->

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -21,6 +21,9 @@ module.exports = {
         4.5: '18px',
         6.5: '26px',
       },
+      height: {
+        screen: ['100dvh', '100vh'],
+      },
       overflow: {
         initial: 'initial',
       },