I’m trying to reduce the spacing between the icons used as tab headers in the top navigation bar of my Home Assistant dashboard.
To clarify:
I’m referring to the top row of icons that appear when you have multiple views configured in Lovelace, each with an icon: set and no title: — so that the tab bar displays only icons (e.g., mdi:home, mdi:lightbulb, etc.) with no text labels.
On my phone, I have 5 views/tabs using icons only. On some devices all 5 icons fit without scrolling. But on others only 4 fit and the tab bar scrolls horizontally. I’d like to decrease the spacing between these tab icons so that all 5 fit cleanly across the top of the screen.
Here’s what I’ve tried so far:
Using a custom theme and card-mod-root to change --mdc-tab-min-width — but this had no effect
Inspecting with browser dev tools — I found that the icons are rendered inside <sl-tab-group> and the spacing is controlled by --sl-spacing-large
Disabling --sl-spacing-large in the browser does shrink the spacing nicely, but I haven’t found a way to override it persistently (themes and card-mod can’t reach into the shadow DOM)
Is there currently any supported or recommended way to reduce the spacing between these icons in the tab bar? Or is this something that could potentially be exposed via a theme variable in the future?
Place --sl-spacing-large in sl-tab-group style in card-mod-root in your theme. This will be applied at the correct level and override the :host styles included by sl-tab-group.
Hi, thanks so much for the suggestion! I tried adding --sl-spacing-large to sl-tab-group inside card-mod-root in my theme just as you specified, but unfortunately it didn’t have any effect on the icon spacing.
Just to be sure, I verified that the theme was applied correctly (other values like primary-color are working), and I confirmed in the browser inspector that the spacing only changes when I manually adjust --sl-spacing-large on <sl-tab-group>. But it seems like the injected CSS from the theme isn’t reaching that element, possibly due to shadow DOM isolation.
If you have any other ideas or workarounds, I’d love to hear them! Thanks again for taking the time to help.
I can confirm this is working for me. You can check that card-mod is working by inspecting hui-root and seeing that is has loaded the style there. If not then it’s card-mod not working correctly.
Thanks again for your help but I can’t get it to work. I’ve put your code into the my themes.yaml as show below:
tight-tabs:
# Custom theme to reduce spacing between icons in dashboard
primary-color: "#9911cc"
background-color: "#111111"
card-mod-root: |
sl-tab-group {
--sl-spacing-large: 0.5em;
}
After restarting Home Assistant and hard-refreshing the browser, I inspected the DOM. I don’t see a <style data-style="card-mod"> tag anywhere near <hui-root>. Instead, I see this in the <html> element’s inline styles:
So it looks like card-mod-root is being treated as a literal CSS variable rather than being injected as a real stylesheet which means it never affects sl-tab-group like it should.
The theme is definitely loading (primary color is applied), and I’m in YAML mode. Not sure why it’s behaving this way on my setup, but thought I’d share what I’m seeing in case it helps narrow it down.
Thank you, that solved it!
Adding card mod theme: tight tabs made everything work as expected. The spacing is now applying correctly. I really appreciate your help and sticking with me through the troubleshooting.