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 named riff-stage. 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. On a stage wider than 3:2, an @container rule sizes the sleeve and the record to sit side by side, as large as the stage allows.

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 1151
```
container: riff-stage / size;
```
plugins/riff/assets/riff.css, line 1162
```
width: min(100cqw, 100cqh);
```

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

Specification: CSS Conditional Rules Module Level 5. Reference: Container queries on MDN.