Allow reducing the space between column in the Sections layout type

[bleuthoot-sven]

Compared to the Masonry layout, the new Sections layout has a lot of space between the columns. I would like an option to change the spacing between the cards.

This would help when displaying multiple columns on a single, small display. Currently I am using a Google Nest Hub as a display for my Home Assistant dashboard. With the Masonry view type, I get 3 columns of space. With the new Sections view type, I only get 2 columns of space.

Below are some simulated examples of my desired result using the inspect element tool with the display resolution of the Google Nest Hub

Masonry layout on a Google Nest Hub

Sections layout on a Google Nest Hub

Desired result

[noxhirsch]

This theme variable should help: ha-view-sections-column-gap: 8px
Here are all the available theme variables for sections: #20099

[bleuthoot-sven]

Thanks, added this option to a theme and seems to look fine now. Seems like a good alternative until something like this is implemented.

[noxhirsch]

I assume this is the implementation. I don't think there will be an UI setting for this.

[vbtrek]

Where do you put this variable to customise the spacing on a sections view?

[bleuthoot-sven]

You have to add it to a theme. Easiest way is to create a new theme in the themes folder and add the following.

Reduced spacing theme:
     ha-view-sections-column-gap: 8px

[vbtrek]

Awesome, got it thanks.

[Stooovie]

"Add it to a theme" as in, edit the themes yaml? Because that doesn't do anything even after reseting the UI cache. I use Noctis or Metro.

[gio-dot]

Do HA system complete reboot or use service reload_theme. It must work

[TestNamePleaseIgnoreMe]

Any way to increase the columns on the Google Nest Hub from 2 columns to 3?