Media not confined by card in Sidebar dash

[patienttruth]

Checklist:

• [x ] I updated to the latest version available
• [ x] I cleared the cache of my browser

**Release with the issue: 5.2.0

Last working release (if known):

Browser and Operating System:

Chrome - Windows - 124.0.6367.208
Companion App Android version 2024.4.1-full

• Scratch that, looks right with companion app on phone. It must be that the media uses card width instead of height as a limit.

Description of problem:

I'm using the sidebar view for my surveillance dashboard. I limited the height of my frigate card to 220 pixels. The default view is clips. When I click a clip the display expands to the full width of the dash. This is undesirable because the card is not the right height.

There is a second frigate card just below, and the media from the first card ends up underneath this so it's not viewable. At that point I can't even get back because the some controls are behind the second card.

I tested by switching the dash back to masonry, and the media is properly contained in the card.

Frigate card diagnostic information

{
  "ha_version": "2024.5.2",
  "card_version": "5.2.0",
  "browser": "Mozilla/5.0 (Linux; Android 14; Pixel 6 Build/AP1A.240505.004; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/125.0.6422.53 Mobile Safari/537.36 Home Assistant/2024.4.1-12576 (Android 14; Pixel 6)",
  "date": "2024-05-18T20:13:04.762Z",
  "frigate_version": {},
  "lang": "en",
  "timezone": "America/Los_Angeles",
  "git": {
    "build_version": "5.2.0-HEAD+g69249b6",
    "build_date": "Fri, 23 Jun 2023 15:26:26 GMT",
    "commit_date": "Thu, 22 Jun 2023 09:21:26 -0600"
  },
  "config": {
    "type": "custom:frigate-card",
    "cameras": [
      {
        "camera_entity": "camera.frigate_lorex_01_gate",
        "dependencies": {
          "cameras": [
            "camera.frigate_lorex_02_turnaround"
          ]
        }
      },
      {
        "camera_entity": "camera.frigate_lorex_02_turnaround"
      }
    ],
    "view": {
      "default": "clips",
      "camera_select": "live"
    },
    "media_viewer": {
      "layout": {
        "fit": "cover"
      }
    },
    "timeline": {
      "style": "ribbon"
    },
    "media_gallery": {
      "controls": {
        "thumbnails": {
          "size": 107,
          "show_details": true
        },
        "filter": {
          "mode": "right"
        }
      }
    },
    "dimensions": {
      "max_height": "220px"
    },
    "menu": {
      "buttons": {
        "media_player": {
          "enabled": false
        },
        "timeline": {
          "enabled": false
        },
        "fullscreen": {
          "enabled": false
        },
        "snapshots": {
          "enabled": false
        },
        "substreams": {
          "enabled": false
        }
      }
    }
  }
}

Javascript errors shown in the web inspector (if applicable):

Additional information:

[patienttruth]