Container queries

Sizes the cover from the stage it sits in, not the viewport.

Now Playing on a phone: the cover, the title and artist, a seek bar, and the play controls — The square cover filling the stage, sized from the stage itself.

How Riff uses it

The stage in Now Playing, between the header and the title, is a size container. The cover is the smaller of the stage's width and height in cqw and cqh, so it is always a square that fits whatever room is left. The video fills the stage's width and caps at its height. There is no @container rule, only the units.

Why

The stage's height changes with the phone, the safe areas and the Up next sheet, and the cover has to fit without the script measuring anything.

Without it

The cover renders at the image's own size, clipped by the stage.

Where

plugins/riff/assets/riff.css, line 891
```
container-type: size;
```
plugins/riff/assets/riff.css, line 902
```
width: min(100cqw, 100cqh);
```

Links open the source at the commit this page was published from.

Reference: Container queries on MDN.