Increased tab padding in 2025.5 causes unnecessary horizontal scroll

[marcelliebler]

Checklist

• I have updated to the latest available Home Assistant version.
• I have cleared the cache of my browser.
• I have tried a different browser to see if it is related to my browser.
• I have tried reproducing the issue in safe mode to rule out problems with unsupported custom resources.

Describe the issue you are experiencing

Since the Home Assistant 2025.5 update, the navigation bar tab paddings have increased significantly. On mobile devices with limited screen width, this increased padding causes a horizontal scrollbar to appear even when only a few (e.g., five) navigation icons are present. This not only requires unnecessary scrolling but also reduces the overall overview, as users need to scroll horizontally to see all the navigation options.

I already found a workaround by modifying a Home Assistant CSS variable (--sl-spacing-large) with card mod but unfortunately this solution creates a new problem. As it turns out on every reload of the dashboard, a scroll button for the navigation bar ">" appears, even if there is nothing to scroll, like shown in the video. Even though I modified the padding with card mod, this should not happen.

Behaviour.mov

Describe the behavior you expected

With a reasonable number of navigation icons (e.g., five), all icons should be visible without requiring horizontal scrolling on typical mobile screen widths, maximizing the immediate overview of available sections.

Regarding the problem shown with the modified spacing, there shouldn't be the this initial horizontal scroll button, as it don't serve any function.

Steps to reproduce the issue

1. Overwrite the CSS variable with card mod to value smaller than 1.25rem (e. g. 0.5rem)

card-mod-theme: "Theme"
card-mod-root: |
  sl-tab {
      --sl-spacing-large: 0.5rem !important;
  }

2. Reload the applied theme
3. Resize your browser window to a width close to that of a mobile device where the default theme (without the card-mod modification) would exhibit a horizontal scrollbar with your current number of navigation icons
4. Reload the webpage
5. Observe that the navigation bar still displays the visual indicator for horizontal scrolling, even though the reduced padding might now allow all icons to be visually accommodated without actual scrolling.

What version of Home Assistant Core has the issue?

2025.5

What was the last working version of Home Assistant Core?

2025.4

In which browser are you experiencing the issue?

No response

Which operating system are you using to run this browser?

No response

State of relevant entities

Problem-relevant frontend configuration

Javascript errors shown in your browser console/inspector

Additional information

The temporary appearance of the scroll button on reload, which then disappears upon resizing, suggests that the layout calculation might not be correctly accounting for the available width or the adjusted padding on initial load.