Frontend: Grid + media-player does not display correctly

[pixeye33]

Checklist

• [x] I have updated to the latest available Home Assistant version.
• [x] I have cleared the cache of my browser.
• [x] I have tried a different browser to see if it is related to my browser.

The problem

A media-player card inside a square grid card does not display correctly.
I was hopping that using the grid + media-player combo that i would get a beautifull art display.

Title and Singer only shows one letter.
The progress bar and controls are in the middle.

Expected behavior

I would expect the metadata to be displayed fully.
The progress bar and controls should be alligned to the bottom

Something like this ?

Steps to reproduce

Here is the config i have :

type: grid
columns: 1
cards:
  - type: media-control
    entity: media_player.spotify

Environment

• Home Assistant release with the issue: 0.118.0b2
• Last working Home Assistant release (if known): new feature
• Browser and browser version: Version 86.0.4240.198 (Build officiel) (64 bits)
• Operating system: Windows (client) Docker (server)

State of relevant entities

Problem-relevant configuration

Javascript errors shown in your browser console/inspector

Additional information

[spacegaier]

I can reproduce the issue. I have a local fix that would solve the media title issue, but would make it always use the whole width of the card, even when smaller whereas previously the title never went on top of the album cover. Not sure if that is a good solution.

[zsarnett]

We need to have an overall discussion about how our cards should work. THis isn't just affecting the media card