fix(tab-bar): ui tweaks for ionic theme

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

@@ -9,6 +9,18 @@
   --color: #{globals.$tabbar-ionic-color};
   --color-selected: #{globals.$tabbar-ionic-color-selected};
 
+  /*
+   * In case there's scrolling, justify the content to the start.
+   */
+  justify-content: unset;
+
+  /*
+   * Ensure the tab bar does not grow larger than the viewport width.
+   * Useful for when the tab buttons have large labels, allowing the space
+   * to be evenly divided among the buttons.
+   */
+  max-width: 100%;
+
   /**
    * Tab bar has a box sizing of content-box to ensure the padding
    * is not included in the height. This is important for the
@@ -23,6 +35,12 @@
 
   box-shadow: #{globals.$ion-elevation-2};
 
+  /*
+   * In case there are more tab buttons than can fit in the tab bar, enable
+   * horizontal scrolling.
+   */
+  overflow: auto hidden;
+
   // TODO(ROU-10853): replace this value with a layer token
   z-index: 10;
 }
@@ -64,7 +82,7 @@
 }
 
 :host([slot="bottom"].tab-bar-compact) {
-  bottom: calc(globals.$ion-space-100 + var(--ion-safe-area-bottom, 0));
+  bottom: calc(globals.$ion-space-400 + var(--ion-safe-area-bottom, 0));
 }
 
 // Tab Bar Shapes

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

@@ -12,8 +12,12 @@
 
   position: relative;
 
+  flex: 1;
+
   align-content: center;
 
+  min-width: globals.$ion-scale-1200;
+
   min-height: globals.$ion-scale-1200;
   max-height: globals.$ion-scale-1800;
 }