(Too) much Space in Sections

[nicknol]

Sections left the experimental status
and hence, I wanted to try them. And I started with my simplest view, it shows some basic information about my network.
It consists out of

• mushroom chips card for the navigation bar at the top
  • Home - to get back to main page
  • spacer
  • icon to indicate the contents of the page
• mushroom title card for the title
• tile cards
  • which I put into a grid when using Masonry

The distance between the navigation bar and the title (mushroom chips and title) is way bigger when using sections.

Sections Layout

Masonry Layout

Is this a feature/shortcoming of the Sections Layout? or built-in into the mushroom cards? @piitaya

[sender]

Same noticed. There is this

Customize gap between new "sections" dashboard layout

Looking at the page CSS you can see the gap between sections is controlled by the --grid-gap CSS variable. Changing that from the default of 32px allows for a smaller gap between sections so there is more room for content. But what is the correct way to change that variable value, or simply overwrite the selector, with a theme? After reading Home Assistant frontend docs, my configuration yaml below should work but it’s not doing anything. frontend: themes: skinny: grid-gap: 16px …

[nicknol]

I’ve read that post, and I think it deals with the space between sections.
the following snippet is affecting the space between sections

my_theme:
  ha-view-sections-column-gap: 8px
  ha-view-sections-row-gap: 7px

But my issue is related to the space between the (mushroom) cards within a section.
But for this I am not able to figure out which CSS selectors to use.

[piitaya (Paul)]

Looks like your chips card take to much space. Try restoring your card to the default size. By default chips-card takes 36px height but if you play with the grid editor, it will takes 56px to be aligned to the grid. Try restoring the default size (or remove grid_options or layout_options from yaml)

Left : no grid options (default)
Right: grid options with row = 1

grid_options:
  columns: 12
  rows: 1

Putting rows = 1 will enforce your card to take one row height (56px) even if it can be smaller.

[nicknol]

@piitaya Thanks a lot for your quick reply
I thought am using the mushroom chips card without any modification.

type: custom:mushroom-chips-card
chips:
  - type: action
    tap_action:
      action: navigate
      navigation_path: /lovelace-mushroom
    icon: mdi:home
  - type: spacer
  - type: template
    icon: mdi:wifi
grid_options:
  columns: 12
  rows: 1

But then I noticed grid_options, as you were mentioning.
I removed the line rows: 1 and voila, the space got smaller.

type: custom:mushroom-chips-card
chips:
  - type: action
    tap_action:
      action: navigate
      navigation_path: /lovelace-mushroom
    icon: mdi:home
  - type: spacer
  - type: template
    icon: mdi:wifi
grid_options:
  columns: 12

The section view is now looking pretty close to the Masonry one

Thanks a lot!!!