fix tabbar issue on ipad

Author: Idrimi

src/app/tabs/tabs.page.html

@@ -1,4 +1,4 @@
-<ion-tabs>
+<ion-tabs >
   <div class="page-padding-bottom">
     </div>
   <ion-tab-bar class="tabbar" slot="bottom" color="dark">

src/app/tabs/tabs.page.scss

@@ -1,35 +0,0 @@
-.bottom-sheet {
-    position: fixed;
-    left: 0;
-    right: 0;
-    bottom: 40px;                // stays under the tab-bar
-    height: 90vh;                // <-- max-height breakpoint
-    background: var(--ion-color-dark);
-    border-radius: 16px 16px 0 0;
-    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.15);
-    transition: transform 0.3s ease;
-    z-index: 10;
-    will-change: transform;
-    /* Optional, avoids flash of full sheet before TS runs */
-    transform: translateY(calc(90vh - 120px));   // collapsed offset (min-height)
-  }
-  
-  .drag-handle {
-    width: 40px;
-    height: 5px;
-    background: #ccc;
-    border-radius: 5px;
-    margin: 10px auto;
-  }
-  
-  .backdrop {
-    position: fixed;
-    inset: 0;                                   // shorthand for top/left/right/bottom
-    background: rgba(0,0,0,.3);
-    z-index: 5;
-  }
-
-  .page-padding-bottom {
-    margin-bottom: 300px; // Adjust as needed to ensure content is not obscured by the tab bar
-  }
-  

src/global.scss

@@ -55,12 +55,14 @@
     // --height: 50%;
     --border-radius: 16px;
     // --box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
-    margin-bottom: calc(50px + var(--ion-safe-area-bottom, 0));
+    margin-bottom: calc(8vh + var(--ion-safe-area-bottom, 12px)); // Adjust for tab bar and safe area
     // margin-bottom: (var(--ion-safe-area-bottom, 0) + 50px);
     --width: 100%;
   }
 
-  /* src/global.scss */
+ion-tab-bar {
+  height: 8vh; /* Sets height to 8% of the viewport's height */
+}
 
 /* Regular */
 @font-face {