thomasloven/lovelace-state-switch

State content exceeding container width

amitkeret opened this issue · 6 comments

I've found that in certain situations, the "stated" card exceeds its parent width.
For me, it seems to happen as a result of images not being resized or restricted to the parents container's width, so if a larger image appears, it causes the entire card to "stretch" past its container. The images appear as part of the mini-media-player custom card.

No media playing:

Media playing, normal sized thumb:

Media playing, large thumb:

Media playing, large thumb, scrolling down to it:

I'm using hash-based state. I've looked at #14 and #18 and I think this is a separate issue.
Using version 1.9.1 of state-switch.

(I've removed irrelevant things from the code below)

- type: vertical-stack
  cards:
    - type: grid
      cards:
        - type: button
          tap_action:
            action: navigate
            navigation_path: '#tv'
        - type: button
          tap_action:
            action: navigate
            navigation_path: '#kodi'
        - type: button
          tap_action:
            action: navigate
            navigation_path: '#ac'
- type: custom:state-switch
  entity: hash
  default: none
  states:
    tv:
      type: ..........
    kodi:
      type: vertical-stack
      cards:
        - ..........
        - type: conditional
          conditions:
            - entity: media_player.koditv
              state_not: idle
          card:
            type: custom:mini-media-player
            entity: media_player.koditv
            volume_stateless: false
            hide:
              power: true
              controls: true
              volume: true
              icon: true
            artwork: full-cover
            name: Now Playing
    ac:
      type: ..........

Sitting with the same issue.

I have the exact same issue since 1.9.0. Reverting to version 8 fixes the issue for now.

I also have this issue. Is there a workaround?

I'm getting the same thing with the upcoming media card on mobile with a hash state. Resizing a desktop browser handles the resize fine

Please try release 1.9.3.

@thomasloven seems to work so far, thanks for fixing it and thanks for all your plugins!