Fix menu size on desktop

[MattiasBuelens]

On desktop, menus should appear in a popup in the bottom right corner of the player when the player is large enough. When the player becomes too small, the menu should take up the entire player size instead.

However, this broke in #122. We changed the @container query from (max-width: 500px) to (max-width: 500px) or (max-height: 300px), but the height of the container was always 0px! This is because we were using a padding-bottom hack to set the player's aspect ratio, which also needs height: 0 on the player.

Fix the regression by using aspect-ratio directly, and only falling back to padding-bottom when not supported. Fortunately, aspect-ratio predates @container, so we don't need to worry about the case where aspect-ratio is not supported but @container is supported. 😉

[changeset-bot]

🦋 Changeset detected

Latest commit: f5e1a9b

The changes in this PR will be included in the next version bump.

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR