refactor(tab-bar): update padding and positions

Author: thetaPC

core/src/components/tab-bar/tab-bar.ionic.scss

@@ -20,7 +20,9 @@
   min-height: calc(globals.$ionic-scale-1400 - calc(globals.$ionic-space-100 * 2));
 
   /* stylelint-disable */
+  padding-top: globals.$ionic-space-100;
   padding-bottom: calc(globals.$ionic-space-100 + var(--ion-safe-area-bottom, 0));
+
   padding-right: calc(globals.$ionic-space-400 + var(--ion-safe-area-right, 0));
   padding-left: calc(globals.$ionic-space-400 + var(--ion-safe-area-left, 0));
   /* stylelint-enable */
@@ -37,16 +39,20 @@
 /* Top */
 :host([slot="top"]) {
   padding-top: calc(globals.$ionic-space-100 + var(--ion-safe-area-top, 0));
-  padding-bottom: 0;
+  padding-bottom: globals.$ionic-space-100;
 }
 
 // Tab Bar Expand
 // --------------------------------------------------
 
 /* Compact */
 :host(.tab-bar-compact) {
+  @include globals.padding(globals.$ionic-space-100, globals.$ionic-space-400);
+
   position: absolute;
 
+  bottom: calc(globals.$ionic-space-100 + var(--ion-safe-area-bottom, 0));
+
   align-self: center;
 
   width: fit-content;
@@ -57,11 +63,11 @@
 }
 
 :host([slot="top"].tab-bar-compact) {
-  top: globals.$ionic-space-400;
+  top: calc(globals.$ionic-space-100 + var(--ion-safe-area-top, 0));
 }
 
 :host([slot="bottom"].tab-bar-compact) {
-  bottom: globals.$ionic-space-400;
+  bottom: calc(globals.$ionic-space-100 + var(--ion-safe-area-bottom, 0));
 }
 
 // Tab Bar Shapes