From 68e634c5fe22f4f2423691cffd012f62e469dcaf Mon Sep 17 00:00:00 2001
From: rug <rmfgoncalves@gmail.com>
Date: Tue, 11 Nov 2025 12:20:39 +0100
Subject: [PATCH] fix(tab-bar): ui tweaks for ionic theme (#30775)

Issue number: internal

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->
The current UI of the tab-bar and tab-button in the ionic theme is not
matching the expected, in edge use cases:
- tab-button:
- Long label: causes the size of the tab-button to increase and
eventually making other tab-buttons, not visible.
- size: in different scenarios the size of each tab-button could become
different.
- tab-bar:
   - Many tab-buttons: would case some of them to become inaccessible.
   - Floating: distance from the bottom, was incorrect.

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
The changes made allow to fix the issues described above, specifically
for ionic theme, containing this way, potential impacts:
- tab-button:
   - min-width: has been defined for the tab-button.
   - property was set to force each tab-button to have the same size.
- tab-bar:
- allow the ability for the content to overflow on the x axis - a scroll
will appear if needed.
- increased the distance from the bottom, to comply with latest design
trends.

## Does this introduce a breaking change?
- [ ] Yes
- [x] No

<!--
  If this introduces a breaking change:
1. Describe the impact and migration path for existing applications
below.
  2. Update the BREAKING.md file with the breaking change.
3. Add "BREAKING CHANGE: [...]" to the commit description when merging.
See
https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#footer
for more information.
-->


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->

---------

Co-authored-by: Brandy Smith <brandyscarney@users.noreply.github.com>
---
 .../src/components/tab-bar/tab-bar.ionic.scss | 20 ++++++++++++++++++-
 .../tab-button/tab-button.ionic.scss          |  2 ++
 2 files changed, 21 insertions(+), 1 deletion(-)

diff --git a/core/src/components/tab-bar/tab-bar.ionic.scss b/core/src/components/tab-bar/tab-bar.ionic.scss
index 759b8847d7..4fbece0a2d 100644
--- a/core/src/components/tab-bar/tab-bar.ionic.scss
+++ b/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
diff --git a/core/src/components/tab-button/tab-button.ionic.scss b/core/src/components/tab-button/tab-button.ionic.scss
index d3751e5862..d2a7760330 100644
--- a/core/src/components/tab-button/tab-button.ionic.scss
+++ b/core/src/components/tab-button/tab-button.ionic.scss
@@ -14,6 +14,8 @@
 
   align-content: center;
 
+  min-width: globals.$ion-scale-1200;
+
   min-height: globals.$ion-scale-1200;
   max-height: globals.$ion-scale-1800;
 }