fix responsive cropping issue for ios

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;
+}

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"
     >
+      <div class="pt-16 pb-16">
         <router-view />
+      </div>
     </main>
   </div>
 

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">

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

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

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">

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

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

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

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

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

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
         >

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">

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
           >

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>