More lines add more space at top and bottom - Beta 7

[HyperCriSiS]

Hi,

Just playing around with the new layout options. When the layout is changed to more lines it adds more space with every line at top and bottom.

Best regards
Hyper

[MrBearPresident]

Just curious what is your proposed solution?

[HyperCriSiS]

Is there no way to reduce the additional produced space? Maybe correction with CSS relative to added lines to have it to a fixed value no matter which size?

[MrBearPresident]

Sorry for closing if I answer on my phone it likes the bigger button for closing more than just commenting;

So the calculation I put in it are somewhat basic.
A bubble-card in a 1 row sections gets a 1 row bubble-card.
A 2 row sections get 2 row bubble cards.
A 3 row sections get 3 row bubble cards.

The space is created because sub-buttons get are 36px big and rows are 56px big with a extra gap between rows 8
The gap between sub-buttons are 8px.

So if we would have a 5 row section (I know big but it makes an easy example:

• 5x56 + 4x8 = 312px height of the card.
• 5x36 + 4x8 = 212px height of the sub-buttons.
  That makes a difference of 5x20 = 100px.

There are some option what we could go.

First option

Make the gap between sub-buttons bigger -> 28px gap. Than all space would be used.

Second option --> preferred way.

Find a way to calculate how many sub-buttons would fit in the whole card.
This is possible and also not possible in the same way.
Home assistant has the possibility to adjust row height and gap between rows through theming.
This is great because we could use this. But the only problem is that the variable has a unit -> px.
Calc (in .css) can work with units and even different units but it cannot as far as I know delete the unit from the variable.
The code that I use to define how many rows it will have can't have any units.

Bubble-Card/src/cards/button/styles.css

Line 174 in 8b81ae6

grid-template-rows: repeat(calc(2*var(--row-size,1)), 1fr);

So calculation of how many rows that are possible is almost possible but not yet.
But that doesn't mean that it will never happen. But this is a great start.

[HyperCriSiS]

If I understand this issue right, maybe a different approach could fit better.
If a module is created which makes it possible for the user to set the space at top and and bottom of the card?
Sorry if my idea is dumb. CSS styling is killing me 🤷‍♂️ 😅