View Tabs Layout on 2025.5.1

Configuration Frontend
1

Hi everyone,

I’m having an issue with the View Tabs in the new Home Assistant version 2025.5.0 and 2025.5.1.

On a small screen like the Shelly Wall Display, the tab layout now takes up more space, and I see scroll arrows instead of all the views fitting in one row like before.

Is there any way to reduce the spacing between the tabs to make better use of the available screen space?

Thanks in advance!

2

I’m having a similar problem, except the spacing between text lines in cards has increased and what used to fit in a single card no longer fits.

1 Like
3

Hi, you can try and change the padding between the tab elements using card mod. With Home Assistant 2025.0 some changes were made regarding the tab paddings, which are way too large and just don’t make sense on mobile or small screens. If you want to use card mod, you can simply add this into your custom theme.

  # Navigation bar padding
  card-mod-theme: "YourTheme"
  card-mod-root: |
    sl-tab {
      --sl-spacing-large: 0.5rem !important;
    }

Unfortunately, some issues with this can still appear, like in my case, that the tab navigation button on the right still seems to be using the old padding. So, it is sometimes displayed even though it is not needed, like demonstrated in the picture with a very small padding.

demonstration
demonstration744×1270 50.5 KB

4

I don’t use themes.
How can i add this to the standard theme?

5

If you mean a card-mode-theme code - you cannot do it without creating a custom theme.
If you a mean ANY css variable - same, you cannot.
The only way to add own css stuff without a custom theme - external js which might be more complex for you.

6

I have exactly the same issue. I’m using IOS themes and tried to modified them with card-mod-theme but without luck.

7

For all of you that are still in search for a solution: I’ve opened this issue a couple of weeks ago and with the release of 2025.6.0 you can now change the tab spacing without the need for card mod! Much thanks again to @bramkragten for the quick fix.
You just have to add the following CSS variables to your custom themes file and reload your frontend theme. If you are not familiar with custom themes, you can get more information on how to set them up via the official documentation here.

# Navigation bar padding
ha-tab-padding-start: "0.5rem"
ha-tab-padding-end: "0.5rem"

With this, the previous issue with the misaligned/orphan navigation button (where the padding wasn’t calculated correctly for all elements) is also fixed, as Home Assistant now properly implements these CSS variables before the calculation of the tab padding – unlike the card mod fix mentioned before.

2 Likes