diff --git a/resources/sass/crater.scss b/resources/sass/crater.scss
index df8354e1..83f0fff7 100644
--- a/resources/sass/crater.scss
+++ b/resources/sass/crater.scss
@@ -53,3 +53,16 @@
 //----------------------------------
 
 @import "components/animation.scss";
+
+body {
+    min-height: 100vh;
+    min-height: -webkit-fill-available;
+}
+
+html {
+    height: -webkit-fill-available;
+}
+
+.h-screen-ios {
+    height: -webkit-fill-available;
+}
diff --git a/resources/scripts/admin/layouts/LayoutBasic.vue b/resources/scripts/admin/layouts/LayoutBasic.vue
index 21179981..5ed33910 100644
--- a/resources/scripts/admin/layouts/LayoutBasic.vue
+++ b/resources/scripts/admin/layouts/LayoutBasic.vue
@@ -9,17 +9,11 @@
     <ExchangeRateBulkUpdateModal />
 
     <main
-      class="
-        pt-16
-        pb-16
-        h-screen h-screen-ios
-        overflow-y-auto
-        md:pl-56
-        xl:pl-64
-        min-h-0
-      "
+      class="h-screen h-screen-ios overflow-y-auto md:pl-56 xl:pl-64 min-h-0"
     >
-      <router-view />
+      <div class="pt-16 pb-16">
+        <router-view />
+      </div>
     </main>
   </div>
 
diff --git a/resources/scripts/admin/layouts/LayoutInstallation.vue b/resources/scripts/admin/layouts/LayoutInstallation.vue
index b5225abc..951367be 100644
--- a/resources/scripts/admin/layouts/LayoutInstallation.vue
+++ b/resources/scripts/admin/layouts/LayoutInstallation.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="h-screen h-screen-ios overflow-y-auto text-base">
+  <div class="h-screen overflow-y-auto text-base">
     <NotificationRoot />
 
     <div class="container mx-auto px-4">
diff --git a/resources/scripts/admin/layouts/LayoutLogin.vue b/resources/scripts/admin/layouts/LayoutLogin.vue
index 653fd93f..1f31dbdb 100644
--- a/resources/scripts/admin/layouts/LayoutLogin.vue
+++ b/resources/scripts/admin/layouts/LayoutLogin.vue
@@ -1,13 +1,5 @@
 <template>
-  <div
-    class="
-      grid
-      h-screen h-screen-ios
-      grid-cols-12
-      overflow-y-hidden
-      bg-gray-100
-    "
-  >
+  <div class="grid h-screen grid-cols-12 overflow-y-hidden bg-gray-100">
     <NotificationRoot />
 
     <div
diff --git a/resources/scripts/admin/layouts/partials/TheSiteSidebar.vue b/resources/scripts/admin/layouts/partials/TheSiteSidebar.vue
index 3e540851..ee0f5b1d 100644
--- a/resources/scripts/admin/layouts/partials/TheSiteSidebar.vue
+++ b/resources/scripts/admin/layouts/partials/TheSiteSidebar.vue
@@ -115,7 +115,7 @@
     class="
       hidden
       w-56
-      h-screen h-screen-ios
+      h-screen
       pb-32
       overflow-y-auto
       bg-white
diff --git a/resources/scripts/admin/views/errors/404.vue b/resources/scripts/admin/views/errors/404.vue
index 9377da61..2137c657 100644
--- a/resources/scripts/admin/views/errors/404.vue
+++ b/resources/scripts/admin/views/errors/404.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="w-full h-screen h-screen-ios">
+  <div class="w-full h-screen">
     <div class="flex items-center justify-center w-full h-full">
       <div class="flex flex-col items-center justify-center">
         <h1 class="text-primary-500" style="font-size: 10rem">
diff --git a/resources/scripts/admin/views/reports/ExpensesReport.vue b/resources/scripts/admin/views/reports/ExpensesReport.vue
index 3493caf3..49401c59 100644
--- a/resources/scripts/admin/views/reports/ExpensesReport.vue
+++ b/resources/scripts/admin/views/reports/ExpensesReport.vue
@@ -50,7 +50,7 @@
         class="
           hidden
           w-full
-          h-screen h-screen-ios
+          h-screen
           border-gray-100 border-solid
           rounded
           md:flex
diff --git a/resources/scripts/admin/views/reports/ProfitLossReport.vue b/resources/scripts/admin/views/reports/ProfitLossReport.vue
index 58b473a3..da9a522f 100644
--- a/resources/scripts/admin/views/reports/ProfitLossReport.vue
+++ b/resources/scripts/admin/views/reports/ProfitLossReport.vue
@@ -50,7 +50,7 @@
         class="
           hidden
           w-full
-          h-screen h-screen-ios
+          h-screen
           border-gray-100 border-solid
           rounded
           md:flex
diff --git a/resources/scripts/admin/views/reports/SalesReports.vue b/resources/scripts/admin/views/reports/SalesReports.vue
index 969b9687..9c450088 100644
--- a/resources/scripts/admin/views/reports/SalesReports.vue
+++ b/resources/scripts/admin/views/reports/SalesReports.vue
@@ -63,7 +63,7 @@
         class="
           hidden
           w-full
-          h-screen h-screen-ios
+          h-screen
           border-gray-100 border-solid
           rounded
           md:flex
diff --git a/resources/scripts/admin/views/reports/TaxReport.vue b/resources/scripts/admin/views/reports/TaxReport.vue
index b1600fbd..ad3cfeab 100644
--- a/resources/scripts/admin/views/reports/TaxReport.vue
+++ b/resources/scripts/admin/views/reports/TaxReport.vue
@@ -49,7 +49,7 @@
         class="
           hidden
           w-full
-          h-screen h-screen-ios
+          h-screen
           border-gray-100 border-solid
           rounded
           md:flex
diff --git a/resources/scripts/components/InvoicePublicPage.vue b/resources/scripts/components/InvoicePublicPage.vue
index 9849f90e..1f2ffd9e 100644
--- a/resources/scripts/components/InvoicePublicPage.vue
+++ b/resources/scripts/components/InvoicePublicPage.vue
@@ -1,6 +1,6 @@
 I
 <template>
-  <div class="h-screen h-screen-ios overflow-y-auto min-h-0">
+  <div class="h-screen overflow-y-auto min-h-0">
     <div class="bg-gradient-to-r from-primary-500 to-primary-400 h-5"></div>
 
     <div
diff --git a/resources/scripts/components/base/BaseDialog.vue b/resources/scripts/components/base/BaseDialog.vue
index 39dae0f8..464b4d6a 100644
--- a/resources/scripts/components/base/BaseDialog.vue
+++ b/resources/scripts/components/base/BaseDialog.vue
@@ -12,7 +12,7 @@
           flex
           items-end
           justify-center
-          min-h-screen min-h-screen-ios
+          min-h-screen
           px-4
           pt-4
           pb-20
@@ -36,10 +36,7 @@
 
         <!-- This element is to trick the browser into centering the modal contents. -->
         <span
-          class="
-            hidden
-            sm:inline-block sm:align-middle sm:h-screen sm:h-screen-ios
-          "
+          class="hidden sm:inline-block sm:align-middle sm:h-screen"
           aria-hidden="true"
           >&#8203;</span
         >
diff --git a/resources/scripts/components/base/BaseGlobalLoader.vue b/resources/scripts/components/base/BaseGlobalLoader.vue
index 25aadced..f6c1dbd4 100644
--- a/resources/scripts/components/base/BaseGlobalLoader.vue
+++ b/resources/scripts/components/base/BaseGlobalLoader.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="flex flex-col items-center justify-center h-screen h-screen-ios">
+  <div class="flex flex-col items-center justify-center h-screen">
     <div class="loader loader-white">
       <div class="loader-spined">
         <div class="loader--icon">
diff --git a/resources/scripts/components/base/BaseModal.vue b/resources/scripts/components/base/BaseModal.vue
index 19bae79b..bb55fddc 100644
--- a/resources/scripts/components/base/BaseModal.vue
+++ b/resources/scripts/components/base/BaseModal.vue
@@ -13,7 +13,7 @@
             flex
             items-end
             justify-center
-            min-h-screen min-h-screen-ios
+            min-h-screen
             px-4
             text-center
             sm:block sm:px-2
@@ -35,10 +35,7 @@
 
           <!-- This element is to trick the browser into centering the modal contents. -->
           <span
-            class="
-              hidden
-              sm:inline-block sm:align-middle sm:h-screen sm:h-screen-ios
-            "
+            class="hidden sm:inline-block sm:align-middle sm:h-screen"
             aria-hidden="true"
             >&#8203;</span
           >
diff --git a/resources/scripts/customer/layouts/LayoutBasic.vue b/resources/scripts/customer/layouts/LayoutBasic.vue
index e08bca28..e37005b7 100644
--- a/resources/scripts/customer/layouts/LayoutBasic.vue
+++ b/resources/scripts/customer/layouts/LayoutBasic.vue
@@ -6,7 +6,7 @@
 
     <!-- <SiteSidebar /> -->
 
-    <main class="mt-16 pb-16 h-screen h-screen-ios overflow-y-auto min-h-0">
+    <main class="mt-16 pb-16 h-screen overflow-y-auto min-h-0">
       <router-view />
     </main>
   </div>