diff options
| author | Samantaz Fox <coding@samantaz.fr> | 2024-02-12 22:19:14 +0100 |
|---|---|---|
| committer | Samantaz Fox <coding@samantaz.fr> | 2024-02-12 22:19:14 +0100 |
| commit | 338d3d9f8613ad9e9c4c427addfdbc337d61595c (patch) | |
| tree | 035cd27558a6b2b319a3d4543b2c129fe101662f | |
| parent | 1f51255f2f5ed53e1f9e50df7d6aad73a9f121d3 (diff) | |
| parent | 16c79f1ef5ab1fd58cffa8ee36c6e939efda2db4 (diff) | |
| download | invidious-338d3d9f8613ad9e9c4c427addfdbc337d61595c.tar.gz invidious-338d3d9f8613ad9e9c4c427addfdbc337d61595c.tar.bz2 invidious-338d3d9f8613ad9e9c4c427addfdbc337d61595c.zip | |
CSS: Fix thumbnails' aspect ratio to prevent CLS (#4278)
Force the thumbnails aspect ratio to 16/9 in order to prevent Cumulative Layout
Shifting (CLS) from hapenning during lazy loading.
It also fixes the problematic, taller thumbnails that Youtube returns for
playlists.
Closes issue 4002
| -rw-r--r-- | assets/css/default.css | 1 |
1 files changed, 1 insertions, 0 deletions
diff --git a/assets/css/default.css b/assets/css/default.css index 00881253..4d6c6c2f 100644 --- a/assets/css/default.css +++ b/assets/css/default.css @@ -197,6 +197,7 @@ img.thumbnail { display: block; /* See: https://stackoverflow.com/a/11635197 */ width: 100%; object-fit: cover; + aspect-ratio: 16 / 9; } .thumbnail-placeholder { |