[Bug]: Cover-Card Button Controls overlapping card container

[guevara777]

Current Behavior

I use 3 mushroom-Cover-Cards in a grid-card with 3 columns. It works fine as long as the columns are wide enough.

When the Columns width is to small the container of the button controls overlaps the border of the card.

Sorry for my bad englisch. I think these pictures explain it better than me:

Expected Behavior

• Button-Container stays within card-container

Steps To Reproduce

Here is the yaml code for the above example:
(the code contais card_mod "magic" but the issue is the same without any card_mod-yaml-code)

        type: grid
        columns: 3
        square: false
        cards:
          - type: custom:mushroom-cover-card
            entity: cover.homematicip_rolladen_schlafzimmer
            hide_state: false
            fill_container: true
            show_buttons_control: true
            show_position_control: false
            tap_action:
              action: more-info
            card_mod:
              style: |
                ha-card {
                  background: rgb(255,255,255,0.8);
                  color: rgb(50,50,50);
                  --primary-text-color: blue;
                  --secondary-text-color: rgb(50,50,50);
                  padding: 3px !important;
                }
                ha-card > div:nth-child(-n+2) {
                  padding: 0px !important;
                }
          - type: custom:mushroom-cover-card
            entity: cover.homematicip_rollladen_svea
            hide_state: false
            fill_container: true
            show_buttons_control: true
            show_position_control: false
            tap_action:
              action: more-info
            card_mod:
              style: |
                ha-card {
                  background: rgb(255,255,255,0.8);
                  color: rgb(50,50,50);
                  --primary-text-color: deeppink;
                  --secondary-text-color: rgb(50,50,50);
                  padding: 3px !important;
                }
                ha-card > div:nth-child(-n+2) {
                  padding: 0px !important;
                }
          - type: custom:mushroom-cover-card
            entity: cover.homematicip_rollladen_greta
            hide_state: false
            fill_container: true
            show_buttons_control: true
            show_position_control: false
            tap_action:
              action: more-info
            card_mod:
              style: |
                ha-card {
                  background: rgb(255,255,255,0.8);
                  color: rgb(50,50,50);
                  --primary-text-color: purple;
                  --secondary-text-color: rgb(50,50,50);
                  padding: 3px !important;
                }
                ha-card > div:nth-child(-n+2) {
                  padding: 0px !important;
                }

Environment

- Browser: chrome (windows) and chrome (android)
- Hassio: 2022.5.4

Anything else?

No response

[Paul Bottein]

I pushed a fix to reduce button size when the container is small. But I advise you to put two cards maximum in the width for a better use 😀

[guevara777]

Wow, that was fast. Thank you!