Separator - Line length and spacing

[Shasdo]

Describe the bug
The separator line doesn't end with the right spacing when sub buttons are added.
The space gets longer with each sub-buttons added
The two purple line are the same length and are there to illustrate the uneven spacing.

Also the space after the text and before the subbutton is a bit longer to my taste, is there a styling option to change it ?

Subsidiary question: (can make another issue)
why "normal" card layout doesn't reduce the height of the cell used by each bubble card ?
Is it a fixed minimal height linked to the LoveLace frontend ?
If there is a another card type above the separaror, it results in an unven vertical spacing.
Could the Bubble Card be vertically centered in each cell (with styling ?) ?

Thank you for your great work !

Expected behavior
The divider should be closer to the sub-buttons

YAML
If applicable, add any relevant YAML code.

  - type: sections
    max_columns: 2
    sections:
      - type: grid
        cards:
          - type: custom:bubble-card
            card_type: separator
            name: Test 1
            sub_button:
              - icon: mdi:numeric-1
            styles: |2-
                .bubble-line {
                  background: red ;
                  opacity: 1;
                }
                .bubble-sub-button-1 {
                  background-color: grey !important;
                }
                .bubble-sub-button-2 {
                  background-color: grey !important;
                }
                .bubble-sub-button-3 {
                  background-color: grey !important;
                }
          - type: custom:bubble-card
            card_type: separator
            name: Test 2
            sub_button:
              - icon: mdi:numeric-1
              - icon: mdi:numeric-2
            styles: |2-
                .bubble-line {
                  background: red ;
                  opacity: 1;
                }
                .bubble-sub-button-1 {
                  background-color: grey !important;
                }
                .bubble-sub-button-2 {
                  background-color: grey !important;
                }
                .bubble-sub-button-3 {
                  background-color: grey !important;
                }
          - type: custom:bubble-card
            card_type: separator
            name: Test 3
            sub_button:
              - icon: mdi:numeric-1
              - icon: mdi:numeric-2
              - icon: mdi:numeric-3
            styles: |2-
                .bubble-line {
                  background: red ;
                  opacity: 1;
                }
                .bubble-sub-button-1 {
                  background-color: grey !important;
                }
                .bubble-sub-button-2 {
                  background-color: grey !important;
                }
                .bubble-sub-button-3 {
                  background-color: grey !important;
                }

Informations (please complete the following information):

• Browser/App: Firefox
• Bubble Card version: 2.0.4
• Home Assistant version: 2024.6.4

[arthanoss]

As for the second question, the section layout in HA defines a fixed row height for cards inside it to keep everything even in a grid.

There's a section optimized layout available for separators (and buttons too) in Bubble Card and it does exactly what you want, it vertically aligns the separator in the middle of a row.

type: custom:bubble-card
card_type: separator
name: Separator
card_layout: large