Sub buttons too high on Large & 2 Row

[StaleLoafOfBread]

Describe the bug
When not set to normal the sub button icons are higher than before the beta. See screenshots. Also ideally when there is only one icon, the icon wouldn't get squished but that's more a FR than a bug/regression report.

Likely occurred as part of @MrBearPresident's #1172

To Reproduce
See Yaml

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots
Top images are from the beta, bottom are from v2.4.0

Normal:

Large:

Large 2 Rows:

YAML
Edit the entity to be a valid one to get the coloring to make it easier to see but otherwise irrelevant as its all about the placement.

type: custom:bubble-card
card_type: separator
modules:
  - default
name: Example
grid_options:
  columns: 12
  rows: 2
sub_button:
  - name: ""
    icon: mdi:home
    show_name: false
    entity: person.me
card_layout: normal

Information:

• OS: Windows 11
• Browser/App: Chrome
• Bubble Card version: v2.5.0-beta.7
• Home Assistant version: v2025.2.4

[MrBearPresident]

Is this also present when you use 1 row?
Because I didn't extensively test the separator because who needs a 2 row separator???

[Clooos]

Maybe just disabling this possibility for the separator? Or just centering it inside the rows? This probably make more sense.

[MrBearPresident]

The sub-button styling is a global change thing.
So we could add that for separators yes.

[StaleLoafOfBread]

Is this also present when you use 1 row? Because I didn't extensively test the separator because who needs a 2 row separator???

I'm not sure what you mean by "1 row". If you mean when I use a separator set to large, then yes, I included screenshots of all three variants (normal, large, and large-2-rows). If you mean something else please let me know and I'll test.

I will also test if it just occurs with the separator.

Haha yeah a two row separator does sound funny when you put it like that. I'm using it as a header for my people view. My sub buttons are their location and how far from home they are measured in time. On mobile it can get too squished so I use 2 rows on mobile (by modifying some code you provided someone else, thank you!). I can give a screenshot later to make this use case more clear. Currently on mobile.

[MrBearPresident]

Hey I'm about to fix this, but if I fix it to be in line with the rest, your use-case will still break.
The fix is enlarging the actual card.

[StaleLoafOfBread]

Is this also present when you use 1 row? Because I didn't extensively test the separator because who needs a 2 row separator???

I'm not sure what you mean by "1 row". If you mean when I use a separator set to large, then yes, I included screenshots of all three variants (normal, large, and large-2-rows). If you mean something else please let me know and I'll test.

I will also test if it just occurs with the separator.

Haha yeah a two row separator does sound funny when you put it like that. I'm using it as a header for my people view. My sub buttons are their location and how far from home they are measured in time. On mobile it can get too squished so I use 2 rows on mobile (by modifying some code you provided someone else, thank you!). I can give a screenshot later to make this use case more clear. Currently on mobile.

Oh I understand now. By "2 row" you meant

grid_options:
  columns: 12
  rows: 2

as opposed to large-2-rows. I was actually only using rows: 2 to better illustrate the issue. My actual use case does use large-2-rows but not rows: 2. It actually uses rows: 0.75 to tighten up the bottom margin (probably not the the best method of doing so but it works, open to ideas though). To be honest, I don't know how I discovered this issue as when I checked against all the versions of the beta, it doesn't show up in my normal card header. I must have been playing around and noticed it. Glad I found a bug but apologize for originally stating it was breaking my use case. I think it was when I testing out effectively recreating the mushroom chips but with subbuttons then confused myself into thinking it affected my header.

Regardless, thank you so much for the quick fix! I downloaded https://github.com/MrBearPresident/Bubble-Card/tree/Fixes-for-sections-on-large-layout and tested it out.

type: custom:bubble-card
card_type: separator
name: ""
icon: none
sub_button:
  - show_icon: true
    icon: mdi:alpha-a
  - show_icon: true
    icon: mdi:alpha-b
  - show_icon: true
    icon: mdi:alpha-c
  - show_icon: true
    icon: mdi:alpha-d
  - show_icon: true
    icon: mdi:alpha-e
  - show_icon: true
    icon: mdi:alpha-f
  - show_icon: true
    icon: mdi:alpha-g
  - show_icon: true
    icon: mdi:alpha-h
  - show_icon: true
    icon: mdi:alpha-i
  - show_icon: true
    icon: mdi:alpha-j
  - show_icon: true
    icon: mdi:alpha-k
  - show_icon: true
    icon: mdi:alpha-l
  - show_icon: true
    icon: mdi:alpha-m
  - show_icon: true
    icon: mdi:alpha-n
  - show_icon: true
    icon: mdi:alpha-o
  - show_icon: true
    icon: mdi:alpha-p
  - show_icon: true
    icon: mdi:alpha-q
  - show_icon: true
    icon: mdi:alpha-r
  - show_icon: true
    icon: mdi:alpha-s
  - show_icon: true
    icon: mdi:alpha-t
  - show_icon: true
    icon: mdi:alpha-u
  - show_icon: true
    icon: mdi:alpha-v
  - show_icon: true
    icon: mdi:alpha-w
  - show_icon: true
    icon: mdi:alpha-x
  - show_icon: true
    icon: mdi:alpha-y
  - show_icon: true
    icon: mdi:alpha-z
card_layout: large
styles: |
  .card-content {
      width: 100%;
      margin: 0 !important;
    }
      .bubble-line {
      opacity: 0;
    }
modules:
  - default
  - colorize
grid_options:
  columns: 12
  rows: 3

Before:

After:

[MrBearPresident]

No problem.
I knew there probably were going to be some issues.
So I'm happy this came out. From all the things I fixed this and the one about the cards in the pop-up I consider real bugs.

I just hope I know tackeled most.

But looking at your screenshot everything works.