When Sidebar hides and displays button Toggle, the button card will not respond to resize

[aj-chan]

in the video the only the media and living room area is working with the response of button card resize when Sidebar hides and displays button Toggle.

I found out if I want a swipe card on the panel to have a button area 3x2 . I need to set " type: custom:swipe-card " to " - type: grid columns: 3" also I need to enable "square: false". Otherwise, there will be a big gap between the footer or other area. ref: 'https://www.home-assistant.io/dashboards/grid/'

But once I enable "square: false", the button will not response to resize when I toggle Home Assistant's sidebar hides and displays button. the card will overflow and broken

video.mp4

      #               Living  Room               #


      - type: grid
        title: Living Room
        view_layout:
          grid-area: lvrm
        columns: 1
        cards:
          - type: custom:swipe-card
            start_card: 1
            reset_after: 10
            parameters:
              effect: coverflow
              speed: 450
              spaceBetween: 20
              threshold: 5
              coverflowEffect:
                rotate: 80
                depth: 100
            cards:
              - type: grid
                columns: 3
                cards:
                  - type: custom:button-card
                    entity: light.ceiling_lights
                    template:
                      - light
                      - icon_worktop_light
                    variables:
                      icon_template: icon_worktop_light
                  - type: custom:button-card
                    entity: light.ceiling_lights
                    template:
                      - light
                      - icon_worktop_light
                    variables:
                      icon_template: icon_worktop_light
                  - type: custom:button-card
                    entity: light.ceiling_lights
                    template:
                      - light
                      - icon_worktop_light
                    variables:
                      icon_template: icon_worktop_light
                  - type: custom:button-card
                    entity: light.ceiling_lights
                    template:
                      - light
                      - icon_worktop_light
                    variables:
                      icon_template: icon_worktop_light
                  - type: custom:button-card
                    entity: light.ceiling_lights
                    template:
                      - light
                      - icon_worktop_light
                    variables:
                      icon_template: icon_worktop_light
                  - type: custom:button-card
                    entity: light.ceiling_lights
                    template:
                      - light
                      - icon_worktop_light
                    variables:
                      icon_template: icon_worktop_light
              - type: grid
                columns: 3
                cards:
                  - type: custom:button-card
                    entity: light.ceiling_lights
                    template:
                      - light
                      - icon_worktop_light
                    variables:
                      icon_template: icon_worktop_light
                  - type: custom:button-card
                    entity: light.ceiling_lights
                    template:
                      - light
                      - icon_worktop_light
                    variables:
                      icon_template: icon_worktop_light
                  - type: custom:button-card
                    entity: light.ceiling_lights
                    template:
                      - light
                      - icon_worktop_light
                    variables:
                      icon_template: icon_worktop_light

      #                     Kitchen                  #


      - type: grid
        title: Kitchen
        square: false
        view_layout:
          grid-area: kitchen
        columns: 1
        cards:
          - type: custom:swipe-card
            start_card: 1
            reset_after: 10
            parameters:
              effect: coverflow
              speed: 450
              spaceBetween: 20
              threshold: 5
              coverflowEffect:
                rotate: 80
                depth: 100
            cards:
              - type: grid
                columns: 3
                cards:
                  - type: custom:button-card
                    entity: light.ceiling_lights
                    template:
                      - light
                      - icon_worktop_light
                    variables:
                      icon_template: icon_worktop_light
                  - type: custom:button-card
                    entity: light.ceiling_lights
                    template:
                      - light
                      - icon_worktop_light
                    variables:
                      icon_template: icon_worktop_light
                  - type: custom:button-card
                    entity: light.ceiling_lights
                    template:
                      - light
                      - icon_worktop_light
                    variables:
                      icon_template: icon_worktop_light
                  - type: custom:button-card
                    entity: light.ceiling_lights
                    template:
                      - light
                      - icon_worktop_light
                    variables:
                      icon_template: icon_worktop_light
                  - type: custom:button-card
                    entity: light.ceiling_lights
                    template:
                      - light
                      - icon_worktop_light
                    variables:
                      icon_template: icon_worktop_light
                  - type: custom:button-card
                    entity: light.ceiling_lights
                    template:
                      - light
                      - icon_worktop_light
                    variables:
                      icon_template: icon_worktop_light
              - type: grid
                columns: 3
                cards:
                  - type: custom:button-card
                    entity: light.ceiling_lights
                    template:
                      - light
                      - icon_worktop_light
                    variables:
                      icon_template: icon_worktop_light
                  - type: custom:button-card
                    entity: light.ceiling_lights
                    template:
                      - light
                      - icon_worktop_light
                    variables:
                      icon_template: icon_worktop_light
                  - type: custom:button-card
                    entity: light.ceiling_lights
                    template:
                      - light
                      - icon_worktop_light
                    variables:
                      icon_template: icon_worktop_light

[matt8707]

bramkragten/swipe-card#32

[aj-chan]

Ar... It turns out that you have already found a similar problem earlier. Just tested about breakpointsBase: container, not fixing this issue. So there's no way to fix this? Because i found out once i enable "square: false" can fix the button card resize, it is working with the 3x2 swipe card, and the Home Assistant sidebar hides and displays button also reside working , but there will be a big gap below the swipe card. if set "square: true" (it defaults true by home assistant), there will be no gap below the swipe but will not resize the card when toggle the Home Assistant sidebar hides and displays button.

[matt8707]

So there's no way to fix this?

nope

[aj-chan]

FYI: I found a temporary workaround.

[aj-chan]

this way can toggle the HA sidebar menu without broken the button card