Select Cards Dropdown List Hidden Behind Other Elements

[wparker42]

Describe the bug
With two select cards, stacked vertically within separate grids of a popup, one of the select cards options gets hidden behind other popup content.

To Reproduce
Steps to reproduce the behavior:

1. Create a popup within a vertical stack
2. Create a 2-column grid within the popup, and populate the grid with a select-type bubble card.
3. Create a second 2-column grid below the first, and populate that grid with a select-type bubble card.
4. The drop-down options of the upper select card appear behind the lower select card.

Expected behavior
Drop-down options should appear in front of all other elements.

Screenshots
Upper select options hidden behind lower select card:

Lower select options correctly populate in front of all other elements:

YAML
If applicable, add any relevant YAML code.

type: vertical-stack
cards:
  - type: custom:bubble-card
    card_type: pop-up
    hash: "#lights"
    show_header: true
    name: Lights
    show_icon: false
    button_type: name
    styles: |-
      .bubble-button-card-container {
        background: none !important;
      }
      .bubble-name {
        font-size: 20px !important;
        font-weight: lighter;
        font-variant: small-caps;
      }
      .bubble-name-container.name-without-icon {
        margin-left: 10px;
      }
  - type: custom:bubble-card
    card_type: separator
    name: h o u s e
    styles: |-
      * { 
        font-size: 14px !important;
      }
    sub_button:
      - entity: light.living_room_lamp
        icon: mdi:power
        tap_action:
          action: perform-action
          perform_action: ""
  - square: false
    type: grid
    cards:
      - type: custom:bubble-card
        card_type: button
        button_type: slider
        entity: light.living_room_lamp
        icon: mdi:floor-lamp
        scrolling_effect: false
        name: Living Room Lamp
        tap_action:
          action: toggle
        double_tap_action:
          action: none
        hold_action:
          action: more-info
        sub_button:
          - icon: mdi:palette
            show_background: false
            tap_action:
              action: navigate
              navigation_path: "#color-picker-lvgrmlamp"
            visibility:
              - condition: state
                entity: light.living_room_lamp
                state: "on"
        styles: ""
        show_icon: true
        use_accent_color: true
        slider_live_update: true
      - type: custom:bubble-card
        card_type: button
        button_type: slider
        name: Kitchen Lights
        entity: light.kitchen_lights
        show_attribute: false
        attribute: brightness
        icon: mdi:ceiling-light-multiple
        tap_action:
          action: toggle
        sub_button:
          - icon: mdi:palette
            show_background: false
            tap_action:
              action: navigate
              navigation_path: "#color-picker-kitchenlights"
            visibility:
              - condition: state
                entity: light.kitchen_lights
                state: "on"
        show_icon: true
        show_state: false
        double_tap_action:
          action: none
        hold_action:
          action: more-info
        styles: ""
        use_accent_color: true
        slider_live_update: true
      - type: custom:bubble-card
        card_type: button
        button_type: slider
        entity: input_number.lyra_log_brightness
        icon: mdi:floor-lamp
        tap_action:
          action: toggle
        double_tap_action:
          action: none
        hold_action:
          action: more-info
        scrolling_effect: false
        sub_button:
          - icon: mdi:palette
            show_background: false
            tap_action:
              action: navigate
              navigation_path: "#color-picker-lyra"
            visibility:
              - condition: state
                entity: light.lyra
                state: "on"
        show_icon: true
        name: Lyra
      - type: custom:bubble-card
        card_type: button
        button_type: slider
        entity: light.tv_backlight
        scrolling_effect: false
        tap_action:
          action: toggle
        double_tap_action:
          action: none
        hold_action:
          action: more-info
        sub_button:
          - icon: mdi:palette
            show_background: false
            tap_action:
              action: navigate
              navigation_path: "#color-picker-tvbacklight"
            visibility:
              - condition: state
                entity: light.tv_backlight
                state: "on"
        styles: ""
        show_icon: true
        use_accent_color: true
      - type: custom:bubble-card
        card_type: empty-column
      - type: custom:bubble-card
        card_type: empty-column
      - type: custom:bubble-card
        card_type: button
        entity: light.hall
        name: Hallway
        icon: mdi:globe-light
        tap_action:
          action: toggle
        double_tap_action:
          action: none
        hold_action:
          action: more-info
        columns: 2
        button_type: slider
        sub_button:
          - icon: mdi:palette
            show_background: false
            tap_action:
              action: navigate
              navigation_path: "#color-picker-hall"
            visibility:
              - condition: state
                entity: light.hall
                state: "on"
        show_icon: true
        use_accent_color: true
      - type: custom:bubble-card
        card_type: button
        entity: light.bathroom_switch
        name: Bathroom
        icon: mdi:shower
        tap_action:
          action: toggle
        double_tap_action:
          action: none
        hold_action:
          action: more-info
        columns: 2
        button_type: slider
        force_icon: false
        show_icon: true
        use_accent_color: true
      - type: custom:bubble-card
        card_type: empty-column
      - type: custom:bubble-card
        card_type: empty-column
      - type: custom:bubble-card
        card_type: empty-column
    columns: 2
  - type: custom:bubble-card
    card_type: separator
    name: o u t s i d e
    styles: |-
      * { 
        font-size: 14px !important;
      }
  - square: false
    type: grid
    cards:
      - type: custom:bubble-card
        card_type: button
        button_type: slider
        entity: light.front_door_light
        icon: mdi:light-switch
        tap_action:
          action: toggle
        double_tap_action:
          action: none
        hold_action:
          action: more-info
        name: Front Door
        use_accent_color: true
        sub_button:
          - entity: light.12_e9_00_05_da_11_strip
            hold_action:
              action: more-info
            tap_action:
              action: toggle
          - entity: light.spotlights
            hold_action:
              action: more-info
            light_background: false
            show_background: true
            state_background: true
            show_last_changed: false
            show_state: false
            tap_action:
              action: toggle
        show_icon: true
        show_state: false
        show_attribute: false
        attribute: brightness
      - type: custom:bubble-card
        card_type: button
        entity: light.deck_lights_outlet
        show_state: false
        tap_action:
          action: toggle
        double_tap_action:
          action: none
        hold_action:
          action: more-info
        button_action:
          double_tap_action:
            action: none
        columns: 2
        show_icon: true
        use_accent_color: true
        icon: mdi:string-lights
      - type: custom:bubble-card
        card_type: empty-column
      - type: custom:bubble-card
        card_type: empty-column
      - type: custom:bubble-card
        card_type: empty-column
    columns: 2
  - type: custom:bubble-card
    card_type: separator
    name: b e d r o o m
    styles: |-
      * { 
        font-size: 14px !important;
      }
  - square: false
    type: grid
    cards:
      - type: custom:bubble-card
        card_type: button
        button_type: slider
        entity: light.b_wall
        tap_action:
          action: toggle
        double_tap_action:
          action: none
        hold_action:
          action: more-info
        sub_button:
          - icon: mdi:palette
            show_background: false
            tap_action:
              action: navigate
              navigation_path: "#color-picker-bwall"
            visibility:
              - condition: state
                entity: light.b_wall
                state: "on"
        name: Wall
        icon: mdi:wall-sconce-flat-variant
        styles: ""
        show_icon: true
        use_accent_color: true
      - type: custom:bubble-card
        card_type: button
        button_type: slider
        entity: light.closet_lights
        tap_action:
          action: toggle
        double_tap_action:
          action: none
        hold_action:
          action: more-info
        sub_button:
          - icon: mdi:palette
            show_background: false
            tap_action:
              action: navigate
              navigation_path: "#color-picker-closet"
            visibility:
              - condition: state
                entity: light.closet_lights
                state: "on"
        name: Closet
        icon: mdi:wall-sconce-flat
        show_icon: true
        use_accent_color: true
      - type: custom:bubble-card
        card_type: button
        button_type: slider
        entity: light.bedside
        tap_action:
          action: toggle
        double_tap_action:
          action: none
        hold_action:
          action: more-info
        sub_button:
          - entity: light.bedside_2_homebridge
            icon: mdi:lightbulb
            tap_action:
              action: toggle
            hold_action:
              action: more-info
          - icon: mdi:palette
            show_background: false
            tap_action:
              action: navigate
              navigation_path: "#color-picker-bedside"
            visibility:
              - condition: state
                entity: light.bedside_lifx
                state: "on"
        icon: mdi:lamp
        show_icon: true
        use_accent_color: true
      - type: custom:bubble-card
        card_type: select
        button_type: state
        show_state: true
        icon: mdi:scent
        double_tap_action:
          action: none
        hold_action:
          action: none
        button_action:
          tap_action:
            action: none
          double_tap_action:
            action: none
          hold_action:
            action: none
        name: Theme
        show_last_updated: false
        show_attribute: false
        show_name: true
        card_layout: normal
        columns: 2
        scrolling_effect: false
        attribute: friendly_name
        show_last_changed: false
        sub_button: []
        styles: |
          ha-card {
            opacity: 0.95;
            --bubble-select-background-color: rgb(194, 178, 128, 0.3) !important;
          }
        entity: input_select.bedroom_scene_selector
        select_attribute: effect_list
        tap_action:
          action: none
        show_icon: false
      - type: custom:bubble-card
        card_type: empty-column
      - type: custom:bubble-card
        card_type: empty-column
      - type: custom:bubble-card
        card_type: empty-column
      - type: custom:bubble-card
        card_type: empty-column
    columns: 2
  - type: custom:bubble-card
    card_type: separator
    name: s t u d i o
    styles: |-
      * { 
        font-size: 14px !important;
      }
  - square: false
    type: grid
    cards:
      - type: custom:bubble-card
        card_type: button
        button_type: slider
        entity: light.s_wall
        name: Wall
        icon: mdi:wall-sconce-flat-variant
        tap_action:
          action: toggle
        double_tap_action:
          action: none
        hold_action:
          action: more-info
        sub_button:
          - icon: mdi:palette
            show_background: false
            tap_action:
              action: navigate
              navigation_path: "#color-picker-swall"
      - type: custom:bubble-card
        card_type: button
        button_type: slider
        entity: light.studio_string_light
        name: String Lights
        icon: mdi:led-strip-variant
        tap_action:
          action: toggle
        double_tap_action:
          action: none
        hold_action:
          action: more-info
        sub_button:
          - icon: mdi:palette
            show_background: false
            tap_action:
              action: navigate
              navigation_path: "#color-picker-sstring"
      - type: custom:bubble-card
        card_type: button
        button_type: slider
        entity: light.s_lamp
        name: Lamp
        icon: mdi:light-flood-up
        tap_action:
          action: toggle
        double_tap_action:
          action: none
        hold_action:
          action: more-info
        sub_button:
          - entity: light.salt_lamp
            icon: mdi:lava-lamp
            tap_action:
              action: toggle
            hold_action:
              action: more-info
          - icon: mdi:palette
            show_background: false
            tap_action:
              action: navigate
              navigation_path: "#color-picker-slamp"
      - type: custom:bubble-card
        card_type: select
        button_type: state
        show_state: true
        icon: mdi:scent
        double_tap_action:
          action: none
        hold_action:
          action: none
        button_action:
          tap_action:
            action: none
          double_tap_action:
            action: none
          hold_action:
            action: none
        name: Theme
        show_last_updated: false
        show_attribute: false
        show_name: true
        card_layout: normal
        columns: 2
        scrolling_effect: false
        attribute: friendly_name
        show_last_changed: false
        sub_button: []
        styles: |
          ha-card {
            opacity: 0.95;
            --bubble-select-background-color: rgb(194, 178, 128, 0.3) !important;
          }
        entity: input_select.studio_scene_selector
        select_attribute: effect_list
        tap_action:
          action: none
        show_icon: false
      - type: custom:bubble-card
        card_type: empty-column
      - type: custom:bubble-card
        card_type: empty-column
      - type: custom:bubble-card
        card_type: empty-column
    columns: 2

Informations (please complete the following information):

• OS: MacOS 15.1.1
• Browser/App: chrome, safari
• Bubble Card version: 2.4.0-beta.1
• Home Assistant version: 2025.1.4

[JLaz7]

Let me know if I should create a new issue for this but I have the exact same issue with any bubble dropdown-select card. The only difference is I'm not doing it inside a pop-up card. Just at the top level or on the main page of my dashboard.

Thanks for the workaround of putting the select dropdown at the bottom so that it displays upwards. That's the only time I can get it to display in front of the other cards.

[Friend-Or-F0H]

Commenting to add an additional instance where a select card is blocked by other bubble card elements. This select card is out of the box, with no custom css applied.

[Clooos]

Hi! Can you try to use an horizontal stack instead of a grid? This should works this way.

[coasting24]

I am facing a similar problem with the select-card. When using it in a vertical-stack-in-card or vertical-stack-card, the drop down list gets cut off, i.e. it does not paint over the boundaries of the stacked cards.

[b2dmx]

same issue

[Clooos]

Is this issue also happening in v2.5.0-beta?

[Friend-Or-F0H]

@Clooos v2.5.0 b9 shows the same issue of the dropdown hiding behind other cards/ other bubble card entities.

[Clooos]

Thank you for the feedback, I will check that. I never tried the grid card.

[poachedindividual]

I am having the same issue when using the sections layout, cards are not in a grid or stack of any kind.
Currently using V3.0.0 beta 4

[wparker42]

Still seeing this issue in 3.0.0-beta5, tested with grid and horizontal stack. Interestingly, select options that populate upwards are displayed above other elements while lists that populate downward are hidden behind elements. The last version where this wasn't an issue for me was v2.4.0.

[Clooos]

Hi! I just tried and I'm unable to reproduce this in v3.0.0-beta.6, can anyone confirm this?

Also before replying, please check at the bottom of the editor if you see the correct version, because there is currently an HACS issue that cause some updates to don't install the correct beta.

[pedolsky]

I'm running v3.0.0-beta.6 and I can confirm that the input selects are displayed properly.

[wparker42]

I'm running v3.0.0-beta.6 and still seeing the issue with select lists that populate downward.

However, select lists that populate upward display correctly

type: vertical-stack
cards:
  - type: custom:bubble-card
    card_type: pop-up
    hash: "#lights"
    show_header: true
    name: " "
    show_icon: false
    button_type: name
    styles: |-
      .bubble-button-card-container {
        background: none !important;
      }
      .bubble-name {
        font-size: 20px !important;
        font-weight: lighter;
        font-variant: small-caps;
      }
      .bubble-name-container.name-without-icon {
        margin-left: 10px;
      }
    modules:
      - default
  - type: custom:bubble-card
    card_type: separator
    name: ""
    styles: |-
      * { 
        font-size: 14px !important;
      }
    sub_button:
      - entity: light.house_lights_group
        icon: mdi:power
        tap_action:
          action: perform-action
          perform_action: light.turn_off
          target:
            entity_id: light.house_lights
          data:
            transition: 3
        light_background: false
        visibility:
          - condition: state
            entity: light.house_lights_group
            state: "on"
  - type: grid
    square: false
    cards:
      - type: custom:bubble-card
        card_type: button
        button_type: slider
        entity: light.living_room_lamp
        icon: mdi:floor-lamp
        scrolling_effect: false
        name: ""
        tap_action:
          action: toggle
        double_tap_action:
          action: none
        hold_action:
          action: more-info
        sub_button: []
        styles: ""
        show_icon: true
        use_accent_color: true
        button_action:
          double_tap_action:
            action: none
        modules: []
      - type: custom:bubble-card
        card_type: button
        button_type: slider
        entity: light.lyra
        icon: mdi:drag-vertical-variant
        scrolling_effect: false
        name: ""
        tap_action:
          action: toggle
        double_tap_action:
          action: none
        hold_action:
          action: more-info
        sub_button: []
        styles: ""
        show_icon: true
        use_accent_color: true
        button_action:
          double_tap_action:
            action: none
        modules: []
      - type: custom:bubble-card
        card_type: button
        button_type: slider
        entity: light.tv_backlight
        scrolling_effect: false
        tap_action:
          action: toggle
        double_tap_action:
          action: none
        hold_action:
          action: more-info
        sub_button: []
        styles: ""
        show_icon: true
        use_accent_color: true
        button_action:
          double_tap_action:
            action: none
        name: ""
      - type: custom:bubble-card
        card_type: button
        entity: light.hall
        name: Hallway
        icon: mdi:globe-light
        tap_action:
          action: toggle
        double_tap_action:
          action: none
        hold_action:
          action: more-info
        columns: 2
        button_type: slider
        sub_button: []
        show_icon: true
        use_accent_color: true
        button_action:
          double_tap_action:
            action: none
        modules:
          - default
      - type: custom:bubble-card
        card_type: button
        entity: light.bathroom_switch
        name: Bathroom
        icon: mdi:shower
        tap_action:
          action: toggle
        double_tap_action:
          action: none
        hold_action:
          action: more-info
        columns: 2
        button_type: slider
        force_icon: false
        show_icon: true
        use_accent_color: true
        button_action:
          double_tap_action:
            action: none
    columns: 2
  - type: custom:bubble-card
    card_type: empty-column
  - type: custom:bubble-card
    card_type: separator
    name: k i t c h e n
    styles: |-
      * { 
        font-size: 14px !important;
      }
    sub_button:
      - entity: light.house_lights_group
        icon: mdi:power
        tap_action:
          action: perform-action
          perform_action: light.turn_off
          target:
            entity_id: light.house_lights
          data:
            transition: 3
        light_background: false
        visibility:
          - condition: state
            entity: light.house_lights_group
            state: "on"
    modules:
      - default
  - type: grid
    square: false
    cards:
      - type: custom:bubble-card
        card_type: button
        button_type: slider
        name: Kitchen Lights
        entity: light.kitchen_lights_group
        show_attribute: false
        attribute: brightness
        icon: mdi:ceiling-light-multiple
        tap_action:
          action: toggle
        sub_button: []
        show_icon: true
        show_state: false
        double_tap_action:
          action: none
        hold_action:
          action: more-info
        styles: ""
        use_accent_color: true
        button_action:
          double_tap_action:
            action: none
        modules:
          - default
      - type: custom:bubble-card
        card_type: button
        name: Countertop
        icon: mdi:drag-horizontal-variant
        tap_action:
          action: toggle
        double_tap_action:
          action: none
        hold_action:
          action: more-info
        columns: 2
        button_type: slider
        force_icon: false
        show_icon: true
        use_accent_color: true
        button_action:
          double_tap_action:
            action: none
        entity: light.magwled
        modules:
          - default
    columns: 2
  - type: custom:bubble-card
    card_type: empty-column
  - type: custom:bubble-card
    card_type: separator
    name: b e d r o o m
    styles: |-
      * { 
        font-size: 14px !important;
      }
    sub_button:
      - entity: input_select.bedroom_scene_selector
        icon: mdi:palette-outline
        show_background: false
      - entity: light.bedroom_lights_group
        icon: mdi:power
        light_background: false
        tap_action:
          action: perform-action
          perform_action: light.turn_off
          target:
            entity_id: light.bedroom_lights_group
          data:
            transition: 3
        visibility:
          - condition: state
            entity: light.bedroom_lights_group
            state: "on"
    modules:
      - default
  - type: grid
    square: false
    cards:
      - type: custom:bubble-card
        card_type: button
        button_type: slider
        entity: light.b_wall
        tap_action:
          action: toggle
        double_tap_action:
          action: none
        hold_action:
          action: more-info
        sub_button: []
        name: Wall
        icon: mdi:wall-sconce-flat-variant
        styles: ""
        show_icon: true
        use_accent_color: true
        button_action:
          double_tap_action:
            action: none
        modules:
          - default
      - type: custom:bubble-card
        card_type: button
        button_type: slider
        entity: light.closet_lights_group
        tap_action:
          action: toggle
        double_tap_action:
          action: none
        hold_action:
          action: more-info
        sub_button: []
        name: Closet
        icon: mdi:wall-sconce-flat
        show_icon: true
        use_accent_color: true
        button_action:
          double_tap_action:
            action: none
        modules:
          - default
      - type: custom:bubble-card
        card_type: button
        button_type: slider
        tap_action:
          action: toggle
        double_tap_action:
          action: none
        hold_action:
          action: more-info
        sub_button:
          - entity: light.bedside_2_homebridge
            icon: mdi:lightbulb
            tap_action:
              action: toggle
            hold_action:
              action: more-info
        icon: mdi:lamp
        show_icon: true
        use_accent_color: true
        button_action:
          double_tap_action:
            action: none
          hold_action:
            action: more-info
        modules:
          - default
        entity: light.bedside_lifx
        name: Bedside
      - type: custom:bubble-card
        card_type: button
        button_type: slider
        modules:
          - default
        entity: light.apollo_msr_2_0fa580_rgb_light
        name: Nitelite
        icon: mdi:star-crescent
        hold_action:
          action: more-info
        tap_action:
          action: toggle
        button_action:
          hold_action:
            action: more-info
    columns: 2
  - type: custom:bubble-card
    card_type: empty-column
  - type: custom:bubble-card
    card_type: separator
    name: s t u d i o
    styles: |-
      * { 
        font-size: 14px !important;
      }
    sub_button:
      - entity: input_select.studio_scene_selector
        icon: mdi:palette-outline
        state_background: false
        show_background: false
      - entity: light.studio_lights_group
        icon: mdi:power
        light_background: false
        state_background: true
        show_background: true
        tap_action:
          action: perform-action
          perform_action: light.turn_off
          target:
            entity_id: light.studio_lights_group
          data:
            transition: 3
        visibility:
          - condition: state
            entity: light.studio_lights_group
            state: "on"
  - type: grid
    square: false
    cards:
      - type: custom:bubble-card
        card_type: button
        button_type: slider
        entity: light.s_wall
        name: Wall
        icon: mdi:wall-sconce-flat-variant
        tap_action:
          action: toggle
        double_tap_action:
          action: none
        hold_action:
          action: more-info
        sub_button: []
        use_accent_color: true
        button_action:
          double_tap_action:
            action: none
      - type: custom:bubble-card
        card_type: button
        button_type: slider
        entity: light.studio_string_light
        name: String Lights
        icon: mdi:led-strip-variant
        tap_action:
          action: toggle
        double_tap_action:
          action: none
        hold_action:
          action: more-info
        sub_button: []
        use_accent_color: true
        button_action:
          double_tap_action:
            action: none
      - type: custom:bubble-card
        card_type: button
        button_type: slider
        entity: light.s_lamp
        name: Lamp
        icon: mdi:light-flood-up
        tap_action:
          action: toggle
        double_tap_action:
          action: none
        hold_action:
          action: more-info
        sub_button:
          - entity: light.salt_lamp
            icon: mdi:lava-lamp
            tap_action:
              action: toggle
            hold_action:
              action: more-info
        use_accent_color: true
        styles: ""
        button_action:
          double_tap_action:
            action: none
      - type: custom:bubble-card
        card_type: button
        entity: switch.studio_monitors
        name: Monitors
        icon: mdi:speaker
        show_last_changed: false
        show_state: true
        tap_action:
          action: toggle
        double_tap_action:
          action: none
        hold_action:
          action: more-info
        button_action:
          double_tap_action:
            action: none
        sub_button:
          - entity: switch.pedal_power
            hold_action:
              action: more-info
            name: Pedals
            icon: mdi:guitar-pick-outline
            show_state: false
            show_name: false
            tap_action:
              action: toggle
        visibility:
          - condition: user
            users:
              - 6edbf42c2b72436dbf608d5089a41e36
        styles: |-
          .bubble-sub-button.background-on {
            background-color: cornflowerblue;
          }
    columns: 2
  - type: custom:bubble-card
    card_type: empty-column
  - type: custom:bubble-card
    card_type: empty-column
  - type: custom:bubble-card
    card_type: separator
    name: o u t s i d e
    styles: |-
      * { 
        font-size: 14px !important;
      }
    sub_button:
      - entity: light.outdoor_lights_group
        icon: mdi:power
        light_background: false
        state_background: true
        show_name: false
        tap_action:
          action: perform-action
          perform_action: light.turn_off
          target:
            entity_id: light.outdoor_lights_group
          data: {}
        visibility:
          - condition: state
            entity: light.outdoor_lights_group
            state: "on"
  - type: custom:bubble-card
    card_type: button
    button_type: name
    show_icon: false
    scrolling_effect: false
    show_name: false
    sub_button:
      - entity: light.front_door_light
        hold_action:
          action: more-info
        name: Front Door
        light_background: false
        show_icon: true
        show_state: false
        show_name: false
        tap_action:
          action: toggle
        icon: mdi:home-variant-outline
      - entity: light.12_e9_00_05_da_11_strip
        hold_action:
          action: more-info
        name: Front String
        show_name: false
        light_background: false
        tap_action:
          action: toggle
      - entity: light.spotlights
        hold_action:
          action: more-info
        light_background: false
        show_name: false
        show_icon: true
        name: Front Yard
        tap_action:
          action: toggle
        icon: mdi:pine-tree-variant-outline
      - entity: light.deck_lights_outlet
        hold_action:
          action: more-info
        name: Deck
        light_background: false
        show_icon: true
        show_name: false
        tap_action:
          action: toggle
        icon: mdi:string-lights
        show_state: false
    styles: |-
      .card-content {
        width: 100%;
        margin: 0 !important;
      }
      .bubble-button-card-container {
        background: none;
      }
      .bubble-sub-button {
        height: 36px !important;
        width: 66px !important;
      }
      .bubble-sub-button.background-on {
        background-color: var(--bubble-accent-color);
      }
      .bubble-sub-button-container {
        width: 100%;
        justify-content: space-between !important;
      }
      .bubble-sub-button-icon {
        --mdc-icon-size: inherit !important;
      }
      .bubble-name-container {
        margin-right: 0px !important;
      }

[Clooos]

I just tried you exact YAML:

What theme are you using? Also, can you try with another theme to see if it happens as well?