[ADE-100] Improve Tab Navigation Styling and Platform Consistency

Author: jkestering-modus

frontend/src/common/components/Router/TabNavigation.scss

@@ -1,15 +1,23 @@
 .ls-tab-navigation {
   &__bar {
     border-radius: 2rem;
-    margin: 0 0.75rem 1.5rem;
+    margin: 0 0.75rem 0.75rem;
     box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.1);
-    height: 3.5rem;
+    height: var(--tab-bar-height, 3.5rem);
     --background: #ffffff;
 
+    /* Override default iOS padding */
+    padding-bottom: 0;
+    
     &-button {
       --color: #435FF0;
       --color-selected: #fd7bf4;
 
+      /* Ensure consistent alignment across platforms */
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      
       &-icon {
         margin: 0;
         font-size: 1.25rem;
@@ -35,10 +43,11 @@
           height: 3rem;
           border-radius: 50%;
           position: absolute;
-          top: 0.25rem;
+          bottom: calc(50% - 0.5rem);
           left: 50%;
           transform: translateX(-50%);
           box-shadow: 0 0.25rem 0.5rem rgba(71, 101, 255, 0.3);
+          z-index: 10;
 
           .ls-tab-navigation__bar-button-icon {
             color: white;

frontend/src/theme/theme-overrides.css

@@ -48,6 +48,9 @@
 
   /* Base toolbar height */
   --ion-toolbar-base-height: 2.75rem;
+  
+  /* Tab bar height */
+  --tab-bar-height: 3.5rem;
 } 
 
 /* Global safe area padding for all pages */
@@ -59,3 +62,34 @@ ion-content {
 ion-router-outlet {
   padding-top: 0;
 }
+
+/* Tab bar fixed size for all platforms */
+.ls-tab-navigation__bar {
+  height: var(--tab-bar-height);
+  max-height: var(--tab-bar-height);
+  padding-bottom: 0;
+  padding-top: 0;
+  contain: strict;
+}
+
+/* Fix for iOS tab bar bottom padding */
+.ios ion-tab-bar {
+  height: var(--tab-bar-height);
+  max-height: var(--tab-bar-height);
+  padding-bottom: 0;
+}
+
+/* Position tab bar items correctly for all platforms */
+.ls-tab-navigation__bar-button {
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* Ensure upload button is correctly positioned */
+.ls-tab-navigation__bar-button--upload .ls-tab-navigation__bar-button-upload-wrapper {
+  bottom: calc(50% - 1.5rem);
+  top: auto;
+  position: absolute;
+}