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

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

Hide file tree

Showing 2 changed files with 5 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
@@ -13,6 +13,7 @@ module.exports = {
   theme: {
     ...tailwindTheme,
     extend: {
+
       screens: {
         desktop: tailwindTheme.screens[DESKTOP_LAYOUT],
       },
@@ -21,6 +22,9 @@ module.exports = {
         4.5: '18px',
         6.5: '26px',
       },
+      height: {
+        screen: ['100dvh', '100vh'],
+      },
       overflow: {
         initial: 'initial',
       },