diff --git a/app/src/main/assets/web_extensions/webcompat_youtube/main.css b/app/src/main/assets/web_extensions/webcompat_youtube/main.css index 0cf74c110..bbf73b07e 100644 --- a/app/src/main/assets/web_extensions/webcompat_youtube/main.css +++ b/app/src/main/assets/web_extensions/webcompat_youtube/main.css @@ -8,3 +8,31 @@ .ytp-share-icon { display: none; } + + +/* Fix Youtube homepage is wrongly displayed on only one column + See https://github.com/MozillaReality/FirefoxReality/issues/2595 */ +ytd-rich-grid-video-renderer { + min-width: 0px; +} + +@media screen and (max-width: 899px) { + ytd-rich-grid-renderer { + --ytd-rich-grid-items-per-row: 2 !important; + --ytd-rich-grid-posts-per-row: 2 !important; + } +} + +@media screen and (max-width: 1115px) and (min-width: 900px) { + ytd-rich-grid-renderer { + --ytd-rich-grid-items-per-row: 3 !important; + --ytd-rich-grid-posts-per-row: 3 !important; + } +} + +@media screen and (min-width: 1116px) { + ytd-rich-grid-renderer { + --ytd-rich-grid-items-per-row: 4 !important; + --ytd-rich-grid-posts-per-row: 4 !important; + } +}