Workaround for Yotube homepage layout

app/src/main/assets/web_extensions/webcompat_youtube/main.js

@@ -8,7 +8,8 @@ const YT_SELECTORS = {
   embedPlayer: '.html5-video-player',
   largePlayButton: '.ytp-large-play-button',
   thumbnail: '.ytp-cued-thumbnail-overlay-image',
-  embedTitle: '.ytp-title-text'
+  embedTitle: '.ytp-title-text',
+  gridRenderer: "ytd-rich-grid-renderer"
 };
 const ENABLE_LOGS = true;
 const logDebug = (...args) => ENABLE_LOGS && console.log(LOGTAG, ...args);
@@ -122,6 +123,29 @@ class YoutubeExtension {
         }
     }
 
+    overrideGridRenderer() {
+        if (this.isWatchingPage()) {
+            return;
+        }
+        // Fix Youtube homepage are wrongly displayed on only one column
+        // See https://github.com/MozillaReality/FirefoxReality/issues/2595
+        const grid = document.getElementsByTagName(YT_SELECTORS.gridRenderer)[0];
+        if (grid) {
+            const itemsPerRow = "--ytd-rich-grid-items-per-row";
+            const postsPerRow = "--ytd-rich-grid-posts-per-row";
+            const targetCols = window.innerWidth > 1115 ? "4" : (window.innerWidth > 900 ? "3" : "2");
+            logDebug(`grid before ${grid.style.getPropertyValue(itemsPerRow)} ${grid.style.getPropertyValue(postsPerRow)}`)
+            if (grid.style.getPropertyValue(itemsPerRow) === "0") {
+                grid.style.setProperty(itemsPerRow, targetCols);
+                logDebug(`${itemsPerRow} updated to ${grid.style.getPropertyValue(itemsPerRow)}`);
+            }
+            if (grid.style.getPropertyValue(postsPerRow) === "0") {
+                grid.style.setProperty(postsPerRow, targetCols);
+                logDebug(`${postsPerRow} updated to ${grid.style.getPropertyValue(postsPerRow)}`);
+            }
+        }
+    }
+
     // Runs the callback when the video is ready (has loaded the first frame).
     waitForVideoReady(callback) {
         this.retry("VideoReady", () => {
@@ -208,6 +232,7 @@ youtube.overrideViewport();
 window.addEventListener('load', () => {
     logDebug('page load');
     youtube.overrideVideoProjection();
+    youtube.overrideGridRenderer();
     // Wait until video has loaded the first frame to force quality change.
     // This prevents the infinite spinner problem.
     // See https://github.com/MozillaReality/FirefoxReality/issues/1433