Bubble-Card icon indicating copy to clipboard operation
Bubble-Card copied to clipboard

Separator - Line length and spacing

Open Shasdo opened this issue 7 months ago • 1 comments

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. image

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 ?) ?

image

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

Shasdo avatar Jul 03 '24 12:07 Shasdo