From 160156f5b64b7fb036633ee4436557aea2d9ddd0 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Thu, 14 May 2026 18:34:16 +0000
Subject: [PATCH 01/18] Add standalone reddit-multi-column.js for direct DOM
 injection

Strips the userscript header from Reddit Multi Column.user.js, adds a
hostname guard, and hardens the bootstrap path so the script can be
hosted on GitHub and embedded as a plain <script> tag.
---
 reddit-multi-column.js | 376 +++++++++++++++++++++++++++++++++++++++++
 1 file changed, 376 insertions(+)
 create mode 100644 reddit-multi-column.js

diff --git a/reddit-multi-column.js b/reddit-multi-column.js
new file mode 100644
index 0000000..46c736b
--- /dev/null
+++ b/reddit-multi-column.js
@@ -0,0 +1,376 @@
+(function() {
+    'use strict';
+
+    if (!/(^|\.)reddit\.com$/.test(location.hostname)) return;
+
+    const MIN_WIDTH = 400;
+    const COLUMNS = 4;
+
+    const HGAP = 17;
+    const VGAP = 12;
+
+    const SETTLE_MS = 180;
+    const MAX_HIDE_MS = 1200;
+    const FADE_MS = 150;
+
+    let columns = COLUMNS;
+    let cleanup = false;
+
+    let parent = null;
+    let currentPath = location.pathname;
+
+    const cardIcon = () => document?.querySelector('shreddit-sort-dropdown[header-text="View"]')?.shadowRoot?.querySelector('svg');
+    const shouldClean = (icon) => icon === undefined ? false : icon.getAttribute('icon-name') !== "view-card-outline";
+
+    let postMap = new Map();
+
+    const indexOfSmallest = function (a) {
+        let lowest = 0;
+        for (let i = 1; i < a.length; i++) {
+            if (a[i] < (a[lowest] - 1)) lowest = i;
+        }
+        return lowest;
+    };
+
+    // Reddit's <main> and the subgrid wrapper apply horizontal padding that
+    // was pushing the feed container ~56px in from the viewport edge. That
+    // padding was invisible to our layout math (we measured clientWidth of
+    // the feed, not the viewport), so HGAP only added to it — making the
+    // effective left/right outer spacing ~68px while the top/bottom stayed
+    // at our 12px VGAP. Zeroing those outer paddings lets HGAP be the true
+    // visible outer spacing.
+    const injectResetStyles = function() {
+        if (document.getElementById('rmc-margin-reset')) return;
+        const style = document.createElement('style');
+        style.id = 'rmc-margin-reset';
+        style.textContent = `
+            main {
+                padding-left: 0 !important;
+                padding-right: 0 !important;
+            }
+            div.subgrid-container {
+                padding-left: 0 !important;
+                padding-right: 0 !important;
+            }
+            shreddit-feed {
+                padding: 0 !important;
+                margin: 0 !important;
+                box-sizing: border-box !important;
+                display: block !important;
+            }
+            shreddit-feed article,
+            shreddit-feed shreddit-ad-post,
+            shreddit-feed faceplate-partial {
+                margin: 0 !important;
+                box-sizing: border-box !important;
+                /* Tell Safari each card is an isolated paint surface. Helps
+                   it re-rasterize only the tiles that actually changed after
+                   a visual zoom (Smart Zoom) instead of repainting the whole
+                   tall feed region. */
+                contain: layout paint !important;
+            }
+            custom-feed-header {
+                display: block !important;
+                margin-left: 25px !important;
+                margin-right: 25px !important;
+            }
+        `;
+        (document.head || document.documentElement).appendChild(style);
+    };
+
+    // --- Visibility management ---------------------------------------------
+    let settleTimer = null;
+    let hideDeadline = 0;
+    let hidden = false;
+
+    const hideFeed = function() {
+        if (!parent) return;
+        hidden = true;
+        hideDeadline = performance.now() + MAX_HIDE_MS;
+        parent.style.transition = 'none';
+        parent.style.opacity = '0';
+    };
+
+    const revealFeed = function() {
+        if (!parent || !hidden) return;
+        hidden = false;
+        if (settleTimer) { clearTimeout(settleTimer); settleTimer = null; }
+        parent.style.transition = `opacity ${FADE_MS}ms ease-out`;
+        parent.style.opacity = '1';
+    };
+
+    const bumpSettle = function() {
+        if (!hidden) return;
+        if (settleTimer) clearTimeout(settleTimer);
+        const remaining = hideDeadline - performance.now();
+        if (remaining <= 0) {
+            revealFeed();
+            return;
+        }
+        settleTimer = setTimeout(revealFeed, Math.min(SETTLE_MS, remaining));
+    };
+
+    // --- Per-article size tracking -----------------------------------------
+    const resizeObserver = new ResizeObserver(() => {
+        requestLayout();
+    });
+    const observedArticles = new WeakSet();
+
+    const observeArticleSize = function(article) {
+        if (observedArticles.has(article)) return;
+        observedArticles.add(article);
+        resizeObserver.observe(article);
+    };
+
+    // --- Layout ------------------------------------------------------------
+
+    const makeLayout = function(changes = []) {
+        if (cleanup) return;
+        if (!parent || !parent.isConnected) return;
+
+        if (parent.style.position !== "relative") {
+            const main = document.querySelector("main");
+            if (main) main.style.maxWidth = "100%";
+            const mainContainer = document.querySelector("div.main-container");
+            if (mainContainer) {
+                mainContainer.className = [...mainContainer.classList].filter(c => !c.includes(":grid-cols-")).join(" ");
+            }
+            const subgrid = document.querySelector("div.subgrid-container");
+            if (subgrid) subgrid.classList.remove("m:w-[1120px]");
+            const sidebar = document.getElementById("right-sidebar-container");
+            if (sidebar) sidebar.style.display = "none";
+            parent.style.position = "relative";
+        }
+
+        const containerWidth = parent.clientWidth;
+
+        columns = Math.max(1, Math.floor((containerWidth - HGAP) / (MIN_WIDTH + HGAP)));
+
+        const totalHGapPx = HGAP * (columns + 1);
+        const colWidthPx = (containerWidth - totalHGapPx) / columns;
+
+        const nodes = [...parent.querySelectorAll("article, shreddit-ad-post, faceplate-partial").values()];
+
+        for (const article of nodes) {
+            const key = article.ariaLabel;
+            if (key === null) continue;
+
+            observeArticleSize(article);
+
+            const h = article.offsetHeight;
+            if (postMap.has(key)) {
+                const post = postMap.get(key);
+                if (post.height !== h) post.height = h;
+            } else {
+                postMap.set(key, { height: h, col: 0, top: 0 });
+            }
+        }
+
+        let tops = Array(columns).fill(VGAP);
+        for (const post of postMap.values()) {
+            post.col = indexOfSmallest(tops);
+            post.top = tops[post.col];
+            tops[post.col] += post.height + VGAP;
+        }
+
+        const height = Math.max(...tops);
+        if (height > VGAP) {
+            parent.style.height = height + "px";
+        }
+
+        for (const article of nodes) {
+            const key = article.ariaLabel;
+            const entry = postMap.get(key) ?? { col: 0, top: tops[0] };
+            const leftPx = HGAP + entry.col * (colWidthPx + HGAP);
+            // Skip the setAttribute when the resolved layout for this article
+            // hasn't moved. setAttribute("style", …) always invalidates style
+            // even with an identical value, and re-running over hundreds of
+            // articles mid-animation (e.g. Safari Smart Zoom snapping back to
+            // 100%) is what causes the cutoff/flash on the way out.
+            const layoutKey = cleanup ? '' : `${colWidthPx.toFixed(2)}|${entry.top}|${leftPx.toFixed(2)}`;
+            if (article.dataset.rmcKey === layoutKey) continue;
+            article.dataset.rmcKey = layoutKey;
+            article.setAttribute(
+                "style",
+                cleanup
+                    ? ""
+                    : `position:absolute; width:${colWidthPx}px; top:${entry.top}px; left:${leftPx}px; margin:0; padding:0`
+            );
+        }
+
+        for (const batch of parent.querySelectorAll("faceplate-batch").values()) {
+            if (!batch.style.height) {
+                batch.style.height = [...batch.childNodes].reduce((h, c) => h + c.clientHeight, 0) + "px";
+            }
+        }
+    };
+
+    // Safari Smart Zoom (double-tap on a Magic Trackpad) is a visual-viewport
+    // zoom — visualViewport.scale and window.innerWidth change, but the layout
+    // viewport (parent.clientWidth in CSS pixels) does not, so there's nothing
+    // for us to lay out differently. The trigger that does reach us is
+    // scrollend, which fires several times during the zoom because Safari pans
+    // the document while zooming. Running makeLayout mid-gesture is what
+    // produces the cutoff/flash on the way back out. Gating on vv.scale skips
+    // those scrollend-driven layouts during the gesture; window resize and
+    // ⌘+/⌘− leave vv.scale at 1, so they still flow through.
+    const vv = window.visualViewport;
+    const isVvZoomedIn = () => vv ? Math.abs(vv.scale - 1) > 0.01 : false;
+
+    let layoutScheduled = false;
+    function requestLayout() {
+        if (isVvZoomedIn()) return;
+        bumpSettle();
+        if (layoutScheduled) return;
+        layoutScheduled = true;
+        requestAnimationFrame(() => {
+            layoutScheduled = false;
+            makeLayout();
+        });
+    }
+
+    const setLayout = function(changes, observer) {
+        const c = shouldClean(cardIcon());
+        if (c !== cleanup) {
+            cleanup = c;
+            requestLayout();
+        }
+    };
+
+    const pageChange = new MutationObserver(requestLayout);
+    const layoutSwitch = new MutationObserver(setLayout);
+
+    window.addEventListener('resize', requestLayout);
+    window.addEventListener('scrollend', requestLayout);
+
+    const disconnectPageObservers = function() {
+        pageChange.disconnect();
+        layoutSwitch.disconnect();
+    };
+
+    const findParent = function() {
+        const anchor = document.querySelector("article + hr + faceplate-partial");
+        return anchor ? anchor.parentNode : null;
+    };
+
+    let searchDeadline = 0;
+    let searching = false;
+
+    const searchForFeed = function() {
+        const found = findParent();
+        if (found && found !== parent) {
+            parent = found;
+            parent.style.position = "";
+            parent.style.height = "";
+            postMap = new Map();
+            resizeObserver.disconnect();
+            disconnectPageObservers();
+
+            hideFeed();
+            pageChange.observe(parent, { childList: true });
+
+            const icon = cardIcon();
+            if (icon) {
+                layoutSwitch.observe(icon, { attributes: true });
+            }
+
+            requestLayout();
+            settleTimer = setTimeout(revealFeed, SETTLE_MS);
+            searching = false;
+            return;
+        }
+
+        if (found && found === parent) {
+            postMap = new Map();
+            resizeObserver.disconnect();
+            parent.style.position = "";
+            parent.style.height = "";
+            hideFeed();
+            requestLayout();
+            settleTimer = setTimeout(revealFeed, SETTLE_MS);
+            searching = false;
+            return;
+        }
+
+        if (performance.now() < searchDeadline) {
+            requestAnimationFrame(searchForFeed);
+        } else {
+            searching = false;
+        }
+    };
+
+    const scheduleFeedSearch = function(budgetMs = 8000) {
+        searchDeadline = performance.now() + budgetMs;
+        if (!searching) {
+            searching = true;
+            requestAnimationFrame(searchForFeed);
+        }
+    };
+
+    const onNavigate = function() {
+        const pathChanged = location.pathname !== currentPath;
+        currentPath = location.pathname;
+
+        if (pathChanged) {
+            parent = null;
+            disconnectPageObservers();
+        }
+        if (!parent || !parent.isConnected) {
+            parent = null;
+        }
+        scheduleFeedSearch();
+    };
+
+    const patchHistory = function() {
+        const origPush = history.pushState;
+        const origReplace = history.replaceState;
+        history.pushState = function() {
+            const ret = origPush.apply(this, arguments);
+            window.dispatchEvent(new Event('reddit-mc:locationchange'));
+            return ret;
+        };
+        history.replaceState = function() {
+            const ret = origReplace.apply(this, arguments);
+            window.dispatchEvent(new Event('reddit-mc:locationchange'));
+            return ret;
+        };
+        window.addEventListener('popstate', () => {
+            window.dispatchEvent(new Event('reddit-mc:locationchange'));
+        });
+        window.addEventListener('reddit-mc:locationchange', onNavigate);
+    };
+
+    const appObserver = new MutationObserver(onNavigate);
+
+    const observeApp = function() {
+        const app = document.querySelector("shreddit-app");
+        if (!app) {
+            setTimeout(observeApp, 100);
+            return;
+        }
+        appObserver.observe(app, { attributes: true });
+    };
+
+    const domSafetyNet = new MutationObserver(() => {
+        if (!parent || !parent.isConnected) {
+            scheduleFeedSearch(2000);
+        }
+    });
+
+    const start = function() {
+        injectResetStyles();
+        patchHistory();
+        observeApp();
+        const main = document.querySelector("main") || document.body;
+        domSafetyNet.observe(main, { childList: true, subtree: true });
+        scheduleFeedSearch();
+    };
+
+    if (document.body) {
+        start();
+    } else if (document.readyState === 'loading') {
+        document.addEventListener('DOMContentLoaded', start, { once: true });
+    } else {
+        start();
+    }
+})();

From e1c4a56a77d38fb206cbd3a5e56e3a8956ff9d1b Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Thu, 14 May 2026 20:09:07 +0000
Subject: [PATCH 02/18] Only gate layout on zoom-in, not zoom-out

Safari sometimes reports visualViewport.scale below 1 at page load, which
made every requestLayout() bail and left the feed un-positioned. Smart
Zoom protection only needs to fire on zoom-in.
---
 reddit-multi-column.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/reddit-multi-column.js b/reddit-multi-column.js
index 46c736b..99c28b2 100644
--- a/reddit-multi-column.js
+++ b/reddit-multi-column.js
@@ -215,7 +215,9 @@
     // those scrollend-driven layouts during the gesture; window resize and
     // ⌘+/⌘− leave vv.scale at 1, so they still flow through.
     const vv = window.visualViewport;
-    const isVvZoomedIn = () => vv ? Math.abs(vv.scale - 1) > 0.01 : false;
+    // Only bail on zoom-IN (Safari Smart Zoom). Don't gate on zoom-out, since
+    // some Safari configs report initial scale below 1 and we'd never lay out.
+    const isVvZoomedIn = () => vv ? vv.scale > 1.01 : false;
 
     let layoutScheduled = false;
     function requestLayout() {

From 3b204ef8439f09bb2b04e004ec2d817c7ba499ae Mon Sep 17 00:00:00 2001
From: Florin <hey@florincatalin.com>
Date: Thu, 14 May 2026 13:40:16 -0700
Subject: [PATCH 03/18] added styles for reddit and moved into parent folders

---
 css/canopy-www-reddit-com-2026-05-14.css      | 183 ++++++++++++++++++
 .../reddit-multi-column.js                    |   0
 2 files changed, 183 insertions(+)
 create mode 100644 css/canopy-www-reddit-com-2026-05-14.css
 rename reddit-multi-column.js => js/reddit-multi-column.js (100%)

diff --git a/css/canopy-www-reddit-com-2026-05-14.css b/css/canopy-www-reddit-com-2026-05-14.css
new file mode 100644
index 0000000..0726093
--- /dev/null
+++ b/css/canopy-www-reddit-com-2026-05-14.css
@@ -0,0 +1,183 @@
+/* Canopy rules for www.reddit.com */
+/* Exported 2026-05-14 */
+/* 33 rules */
+
+/* Rule 1: Reverse Logo — style */
+#reddit-logo > span > svg {
+  display: none !important;
+  transform: scaleX(-1) !important;
+}
+
+/* Rule 2: Right Sidebar — remove */
+#right-sidebar-container {
+  display: none !important;
+}
+
+/* Rule 3: Games Section — remove */
+#left-sidebar > nav > faceplate-tracker > games-section-badge-controller {
+  display: none !important;
+}
+
+/* Rule 4: Extra HR — remove */
+#left-sidebar > nav > hr:nth-of-type(2) {
+  display: none !important;
+}
+
+/* Rule 5: No "Start Community" — remove */
+#left-sidebar > nav > left-nav-top-section > li:nth-of-type(4) {
+  display: none !important;
+}
+
+/* Rule 6: No Ad Icon — remove */
+div:nth-of-type(3) > div:nth-of-type(1) > span:nth-of-type(1) > span {
+  display: none !important;
+}
+
+/* Rule 7: No "Create" text — remove */
+#create-post > span > span:nth-of-type(2) {
+  display: none !important;
+}
+
+/* Rule 8: Article: Inner padding & border — style */
+shreddit-post[id^="t3_"] {
+  padding: 25px !important;
+  border: 1px #333 dashed !important;
+}
+
+/* Rule 9: Remove lines — hide */
+hr[class^="border-"], hr[class*=" border-"] {
+  display: none !important;
+}
+
+/* Rule 10: Sidebar: Shift up — style */
+div[id^="flex-left-nav-"] {
+  top: 0 !important;
+  height: 100vh !important;
+}
+
+/* Rule 11: Sidebar: Full height — style */
+#left-sidebar {
+  height: 100vh !important;
+}
+
+/* Rule 12: Sidebar: To top — style */
+#left-sidebar-container {
+  z-index: 5 !important;
+}
+
+/* Rule 13: reddit-header-large > reddit-header-action-items > header > nav (disabled) — style */
+reddit-header-large > reddit-header-action-items > header > nav {
+  margin-left: 30px !important;
+}
+
+/* Rule 14: Recommendations (Inline) — remove */
+div > shreddit-feed > faceplate-batch:nth-of-type(1) > in-feed-community-recommendations {
+  display: none !important;
+}
+
+/* Rule 15: #subgrid-container > div:nth-of-type(1) > div — style */
+#subgrid-container > div:nth-of-type(1) > div {
+  margin-top: 5px !important;
+  margin-left: 10px !important;
+  margin-right: 10px !important;
+}
+
+/* Rule 16: #main-content > custom-feed > div:nth-of-type(1) > div — hide */
+#main-content > custom-feed > div:nth-of-type(1) > div {
+  display: none !important;
+}
+
+/* Rule 17: #main-content > custom-feed > div:nth-of-type(1) — style */
+#main-content > custom-feed > div:nth-of-type(1) {
+  margin-top: 0px !important;
+  margin-bottom: 0px !important;
+  margin-left: 20px !important;
+}
+
+/* Rule 18: #main-content > div — style */
+#main-content > div {
+  padding-left: 10px !important;
+  margin-bottom: 10px !important;
+}
+
+/* Rule 19: #main-content > shreddit-title — style */
+#main-content > shreddit-title {
+  margin-top: 15px !important;
+}
+
+/* Rule 20: #subgrid-container > div — style */
+#subgrid-container > div {
+  display: flex !important;
+  align-self: center !important;
+}
+
+/* Rule 21: nav.z-2 > hr.w-100.my-sm.border-neutral-border-weak — remove */
+nav.z-2 > hr.w-100.my-sm.border-neutral-border-weak {
+  display: none !important;
+}
+
+/* Rule 22: #RESOURCES > hr.my-sm — remove */
+#RESOURCES > hr.my-sm {
+  display: none !important;
+}
+
+/* Rule 23: #recent-communities-section — style */
+#recent-communities-section {
+  border-bottom: none !important;
+  margin-bottom: 0px !important;
+  padding-bottom: 0px !important;
+}
+
+/* Rule 24: #left-sidebar > nav > div:nth-of-type(2) — remove */
+#left-sidebar > nav > div:nth-of-type(2) {
+  display: none !important;
+}
+
+/* Rule 25: #RECENT — style */
+#RECENT {
+  padding-top: 5px !important;
+}
+
+/* Rule 26: body > shreddit-app > reddit-header-large — style */
+body > shreddit-app > reddit-header-large {
+  position: absolute !important;
+}
+
+/* Rule 27: Logo: Remove (disabled) — remove */
+#reddit-logo {
+  display: none !important;
+}
+
+/* Rule 28: #subgrid-container > div:nth-of-type(1) — style */
+#subgrid-container > div:nth-of-type(1) {
+  display: block !important;
+}
+
+/* Rule 29: Header: Top border line — style */
+body > navigation-indicator {
+  border-top: 1px solid #444 !important;
+  zoom: 1.5 !important;
+  z-index: 99999 !important;
+}
+
+/* Rule 30: header > nav > div:nth-of-type(2) > div — style */
+header > nav > div:nth-of-type(2) > div {
+  align-items: center !important;
+}
+
+/* Rule 31: #advertise-button — remove */
+#advertise-button {
+  display: none !important;
+}
+
+/* Rule 32: button[id^="flex-nav-"] — style */
+button[id^="flex-nav-"] {
+  margin-top: 25px !important;
+  zoom: 0.9 !important;
+  margin-right: 2px !important;
+}
+
+/* Rule 33: nav > div:nth-of-type(2) > div > div — style */
+nav > div:nth-of-type(2) > div > div {
+  margin-top: 1px !important;
+}
diff --git a/reddit-multi-column.js b/js/reddit-multi-column.js
similarity index 100%
rename from reddit-multi-column.js
rename to js/reddit-multi-column.js

From 8e30b9e9852cfc80f42bf785b9bb0af748eb759d Mon Sep 17 00:00:00 2001
From: Florin <hey@florincatalin.com>
Date: Thu, 14 May 2026 14:34:00 -0700
Subject: [PATCH 04/18] Reddit: remove alert banner

---
 css/canopy-www-reddit-com-2026-05-14.css | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/css/canopy-www-reddit-com-2026-05-14.css b/css/canopy-www-reddit-com-2026-05-14.css
index 0726093..a2ef80a 100644
--- a/css/canopy-www-reddit-com-2026-05-14.css
+++ b/css/canopy-www-reddit-com-2026-05-14.css
@@ -1,6 +1,6 @@
 /* Canopy rules for www.reddit.com */
 /* Exported 2026-05-14 */
-/* 33 rules */
+/* 34 rules */
 
 /* Rule 1: Reverse Logo — style */
 #reddit-logo > span > svg {
@@ -181,3 +181,8 @@ button[id^="flex-nav-"] {
 nav > div:nth-of-type(2) > div > div {
   margin-top: 1px !important;
 }
+
+/* Rule 34: Alert Banner: Remove — remove */
+body > shreddit-app > alert-controller {
+  display: none !important;
+}

From 2f3204cc0acdec9e4d7f5491db91c98ed338e629 Mon Sep 17 00:00:00 2001
From: Florin <hey@florincatalin.com>
Date: Thu, 14 May 2026 14:54:34 -0700
Subject: [PATCH 05/18] Reddit: remove tooltips

---
 css/canopy-www-reddit-com-2026-05-14.css | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/css/canopy-www-reddit-com-2026-05-14.css b/css/canopy-www-reddit-com-2026-05-14.css
index a2ef80a..c3041c6 100644
--- a/css/canopy-www-reddit-com-2026-05-14.css
+++ b/css/canopy-www-reddit-com-2026-05-14.css
@@ -1,6 +1,6 @@
 /* Canopy rules for www.reddit.com */
 /* Exported 2026-05-14 */
-/* 34 rules */
+/* 35 rules */
 
 /* Rule 1: Reverse Logo — style */
 #reddit-logo > span > svg {
@@ -78,8 +78,8 @@ div > shreddit-feed > faceplate-batch:nth-of-type(1) > in-feed-community-recomme
 /* Rule 15: #subgrid-container > div:nth-of-type(1) > div — style */
 #subgrid-container > div:nth-of-type(1) > div {
   margin-top: 5px !important;
-  margin-left: 10px !important;
   margin-right: 10px !important;
+  margin-left: 10px !important;
 }
 
 /* Rule 16: #main-content > custom-feed > div:nth-of-type(1) > div — hide */
@@ -186,3 +186,8 @@ nav > div:nth-of-type(2) > div > div {
 body > shreddit-app > alert-controller {
   display: none !important;
 }
+
+/* Rule 35: rpl-tooltip — remove */
+rpl-tooltip {
+  display: none !important;
+}

From 2574ac7a08910ec89759042fe6a5ea6a451707f0 Mon Sep 17 00:00:00 2001
From: Florin <hey@florincatalin.com>
Date: Thu, 14 May 2026 15:07:49 -0700
Subject: [PATCH 06/18] Revert tooltip

---
 css/canopy-www-reddit-com-2026-05-14.css | 7 +------
 1 file changed, 1 insertion(+), 6 deletions(-)

diff --git a/css/canopy-www-reddit-com-2026-05-14.css b/css/canopy-www-reddit-com-2026-05-14.css
index c3041c6..4dee0e1 100644
--- a/css/canopy-www-reddit-com-2026-05-14.css
+++ b/css/canopy-www-reddit-com-2026-05-14.css
@@ -1,6 +1,6 @@
 /* Canopy rules for www.reddit.com */
 /* Exported 2026-05-14 */
-/* 35 rules */
+/* 34 rules */
 
 /* Rule 1: Reverse Logo — style */
 #reddit-logo > span > svg {
@@ -186,8 +186,3 @@ nav > div:nth-of-type(2) > div > div {
 body > shreddit-app > alert-controller {
   display: none !important;
 }
-
-/* Rule 35: rpl-tooltip — remove */
-rpl-tooltip {
-  display: none !important;
-}

From 45276c28bac2a928aa672a593bdd3d8c23b24975 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Thu, 25 Jun 2026 05:09:46 +0000
Subject: [PATCH 07/18] fix: make Reddit multi-column layout resilient to DOM
 changes
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Replace brittle `article + hr + faceplate-partial` feed finder with
  ranked fallback strategies (shreddit-feed → legacy hr → heuristic)
- Replace ariaLabel-only keying with multi-attribute stableKey() that
  falls back to synthetic IDs so every item always gets positioned
- Add shreddit-post to feed item selector for new Reddit elements
- Make cardIcon() try multiple selectors with Shadow DOM fallback
- Replace hardcoded Tailwind class removal with regex-based stripper
- Add subtree:true to pageChange observer for nested DOM mutations
- Filter layout nodes to direct children to avoid nested matches
- Update CSS reset to cover new element types and batch wrappers
- Bump version to 0.4.0
---
 Reddit Multi Column.user.js | 183 +++++++++++++++++++++++++++++-------
 js/reddit-multi-column.js   | 172 ++++++++++++++++++++++++++-------
 2 files changed, 287 insertions(+), 68 deletions(-)

diff --git a/Reddit Multi Column.user.js b/Reddit Multi Column.user.js
index 997f506..d24b707 100644
--- a/Reddit Multi Column.user.js	
+++ b/Reddit Multi Column.user.js	
@@ -1,7 +1,7 @@
 // ==UserScript==
 // @name         Reddit Multi Column
 // @namespace    https://gist.github.com/c6p/463892bb243f611f2a3cfa4268c6435e
-// @version      0.3.15
+// @version      0.4.0
 // @description  Multi column layout for reddit redesign (with SPA nav support)
 // @author       Can Altıparmak
 // @homepageURL  https://gist.github.com/c6p/463892bb243f611f2a3cfa4268c6435e
@@ -15,6 +15,9 @@
 
 (function() {
     'use strict';
+
+    if (!/(^|\.)reddit\.com$/.test(location.hostname)) return;
+
     const MIN_WIDTH = 400;
     const COLUMNS = 4;
 
@@ -25,16 +28,38 @@
     const MAX_HIDE_MS = 1200;
     const FADE_MS = 150;
 
+    // Selectors used to locate feed items inside the feed container. Kept in
+    // one place so they're easy to update when Reddit changes its DOM.
+    const FEED_ITEM_SELECTOR = 'article, shreddit-post, shreddit-ad-post, faceplate-partial';
+
     let columns = COLUMNS;
     let cleanup = false;
 
     let parent = null;
     let currentPath = location.pathname;
 
-    const cardIcon = () => document?.querySelector('shreddit-sort-dropdown[header-text="View"]')?.shadowRoot?.querySelector('svg');
+    const cardIcon = () => {
+        // Try multiple selectors – Reddit has changed the view-switcher element
+        // name/attributes over time.
+        const selectors = [
+            'shreddit-sort-dropdown[header-text="View"]',
+            'shreddit-view-nav',
+            'shreddit-sort-dropdown',
+        ];
+        for (const sel of selectors) {
+            const el = document.querySelector(sel);
+            if (!el) continue;
+            // If the component uses Shadow DOM, look inside it.
+            const root = el.shadowRoot || el;
+            const svg = root.querySelector('svg');
+            if (svg) return svg;
+        }
+        return undefined;
+    };
     const shouldClean = (icon) => icon === undefined ? false : icon.getAttribute('icon-name') !== "view-card-outline";
 
     let postMap = new Map();
+    let nextSyntheticId = 0;
 
     const indexOfSmallest = function (a) {
         let lowest = 0;
@@ -44,6 +69,29 @@
         return lowest;
     };
 
+    // --- Stable key for each feed item ------------------------------------
+    // Reddit may or may not provide an aria-label, data-testid, or id on
+    // articles. We try several attributes and fall back to a synthetic id
+    // stamped on the element so that every item always gets a layout key.
+    const stableKey = function(el) {
+        if (el.dataset.rmcId) return el.dataset.rmcId;
+        const candidate =
+            el.getAttribute('aria-label') ||
+            el.getAttribute('id') ||
+            el.getAttribute('data-testid') ||
+            el.getAttribute('data-fullname') ||
+            el.getAttribute('data-post-id') ||
+            el.querySelector('[data-post-id]')?.getAttribute('data-post-id') ||
+            el.querySelector('a[href*="/comments/"]')?.getAttribute('href');
+        if (candidate) {
+            el.dataset.rmcId = candidate;
+            return candidate;
+        }
+        const synth = `rmc-synth-${nextSyntheticId++}`;
+        el.dataset.rmcId = synth;
+        return synth;
+    };
+
     // Reddit's <main> and the subgrid wrapper apply horizontal padding that
     // was pushing the feed container ~56px in from the viewport edge. That
     // padding was invisible to our layout math (we measured clientWidth of
@@ -70,15 +118,16 @@
                 box-sizing: border-box !important;
                 display: block !important;
             }
-            shreddit-feed article,
-            shreddit-feed shreddit-ad-post,
-            shreddit-feed faceplate-partial {
+            shreddit-feed > article,
+            shreddit-feed > shreddit-post,
+            shreddit-feed > shreddit-ad-post,
+            shreddit-feed > faceplate-partial,
+            shreddit-feed > faceplate-batch > article,
+            shreddit-feed > faceplate-batch > shreddit-post,
+            shreddit-feed > faceplate-batch > shreddit-ad-post,
+            shreddit-feed > faceplate-batch > faceplate-partial {
                 margin: 0 !important;
                 box-sizing: border-box !important;
-                /* Tell Safari each card is an isolated paint surface. Helps
-                   it re-rasterize only the tiles that actually changed after
-                   a visual zoom (Smart Zoom) instead of repainting the whole
-                   tall feed region. */
                 contain: layout paint !important;
             }
             custom-feed-header {
@@ -87,7 +136,7 @@
                 margin-right: 25px !important;
             }
         `;
-        document.head.appendChild(style);
+        (document.head || document.documentElement).appendChild(style);
     };
 
     // --- Visibility management ---------------------------------------------
@@ -136,6 +185,19 @@
 
     // --- Layout ------------------------------------------------------------
 
+    // Strip width-constraining utility classes that Reddit may apply to any
+    // ancestor of the feed. Instead of targeting one exact class name, we
+    // remove anything that looks like a Tailwind fixed/max-width utility
+    // (e.g. "m:w-[1120px]", "lg:max-w-[960px]"), which is more resilient to
+    // Reddit changing the breakpoint values.
+    const stripWidthConstraints = function(el) {
+        if (!el) return;
+        const toRemove = [...el.classList].filter(
+            c => /\b(w-\[|max-w-\[)/.test(c)
+        );
+        if (toRemove.length) el.classList.remove(...toRemove);
+    };
+
     const makeLayout = function(changes = []) {
         if (cleanup) return;
         if (!parent || !parent.isConnected) return;
@@ -148,7 +210,11 @@
                 mainContainer.className = [...mainContainer.classList].filter(c => !c.includes(":grid-cols-")).join(" ");
             }
             const subgrid = document.querySelector("div.subgrid-container");
-            if (subgrid) subgrid.classList.remove("m:w-[1120px]");
+            stripWidthConstraints(subgrid);
+            if (subgrid) {
+                subgrid.style.maxWidth = "100%";
+                subgrid.style.width = "100%";
+            }
             const sidebar = document.getElementById("right-sidebar-container");
             if (sidebar) sidebar.style.display = "none";
             parent.style.position = "relative";
@@ -161,11 +227,27 @@
         const totalHGapPx = HGAP * (columns + 1);
         const colWidthPx = (containerWidth - totalHGapPx) / columns;
 
-        const nodes = [...parent.querySelectorAll("article, shreddit-ad-post, faceplate-partial").values()];
+        const nodes = [...parent.querySelectorAll(FEED_ITEM_SELECTOR)];
+
+        // Filter to only direct layout items (skip deeply nested elements
+        // that happen to match the selector inside a shadow DOM etc.)
+        const layoutNodes = nodes.filter(n => {
+            let p = n.parentNode;
+            // Accept items whose parent is the feed container or a
+            // faceplate-batch directly inside it.
+            while (p && p !== parent) {
+                const tag = p.tagName ? p.tagName.toLowerCase() : '';
+                if (tag === 'faceplate-batch') {
+                    p = p.parentNode;
+                    continue;
+                }
+                break;
+            }
+            return p === parent;
+        });
 
-        for (const article of nodes) {
-            const key = article.ariaLabel;
-            if (key === null) continue;
+        for (const article of layoutNodes) {
+            const key = stableKey(article);
 
             observeArticleSize(article);
 
@@ -190,15 +272,10 @@
             parent.style.height = height + "px";
         }
 
-        for (const article of nodes) {
-            const key = article.ariaLabel;
+        for (const article of layoutNodes) {
+            const key = stableKey(article);
             const entry = postMap.get(key) ?? { col: 0, top: tops[0] };
             const leftPx = HGAP + entry.col * (colWidthPx + HGAP);
-            // Skip the setAttribute when the resolved layout for this article
-            // hasn't moved. setAttribute("style", …) always invalidates style
-            // even with an identical value, and re-running over hundreds of
-            // articles mid-animation (e.g. Safari Smart Zoom snapping back to
-            // 100%) is what causes the cutoff/flash on the way out.
             const layoutKey = cleanup ? '' : `${colWidthPx.toFixed(2)}|${entry.top}|${leftPx.toFixed(2)}`;
             if (article.dataset.rmcKey === layoutKey) continue;
             article.dataset.rmcKey = layoutKey;
@@ -210,9 +287,9 @@
             );
         }
 
-        for (const batch of parent.querySelectorAll("faceplate-batch").values()) {
+        for (const batch of parent.querySelectorAll("faceplate-batch")) {
             if (!batch.style.height) {
-                batch.style.height = [...batch.childNodes].reduce((h, c) => h + c.clientHeight, 0) + "px";
+                batch.style.height = [...batch.childNodes].reduce((h, c) => h + (c.clientHeight || 0), 0) + "px";
             }
         }
     };
@@ -220,14 +297,9 @@
     // Safari Smart Zoom (double-tap on a Magic Trackpad) is a visual-viewport
     // zoom — visualViewport.scale and window.innerWidth change, but the layout
     // viewport (parent.clientWidth in CSS pixels) does not, so there's nothing
-    // for us to lay out differently. The trigger that does reach us is
-    // scrollend, which fires several times during the zoom because Safari pans
-    // the document while zooming. Running makeLayout mid-gesture is what
-    // produces the cutoff/flash on the way back out. Gating on vv.scale skips
-    // those scrollend-driven layouts during the gesture; window resize and
-    // ⌘+/⌘− leave vv.scale at 1, so they still flow through.
+    // for us to lay out differently.
     const vv = window.visualViewport;
-    const isVvZoomedIn = () => vv ? Math.abs(vv.scale - 1) > 0.01 : false;
+    const isVvZoomedIn = () => vv ? vv.scale > 1.01 : false;
 
     let layoutScheduled = false;
     function requestLayout() {
@@ -260,9 +332,46 @@
         layoutSwitch.disconnect();
     };
 
+    // --- Feed container discovery ------------------------------------------
+    // Use a ranked list of strategies so that when Reddit changes its DOM we
+    // still find the feed.  Each strategy returns the container element or
+    // null.  The first non-null result wins.
+    const findParentStrategies = [
+        // Strategy 1: <shreddit-feed> custom element (current Reddit 2025+).
+        () => document.querySelector('shreddit-feed'),
+
+        // Strategy 2: legacy selector – an <article> followed by <hr> then
+        // <faceplate-partial> (pre-2025 Reddit).  Return its parentNode.
+        () => {
+            const anchor = document.querySelector('article + hr + faceplate-partial');
+            return anchor ? anchor.parentNode : null;
+        },
+
+        // Strategy 3: any container that holds multiple <article> children
+        // (generic heuristic).  Walk up from the first article's parent and
+        // pick the first ancestor that holds ≥2 articles.
+        () => {
+            const first = document.querySelector('main article');
+            if (!first) return null;
+            let el = first.parentNode;
+            while (el && el !== document.body) {
+                if (el.querySelectorAll(':scope > article, :scope > shreddit-post').length >= 2) return el;
+                // Also check one level deeper (faceplate-batch wrappers).
+                if (el.querySelectorAll('article, shreddit-post').length >= 2) return el;
+                el = el.parentNode;
+            }
+            return null;
+        },
+    ];
+
     const findParent = function() {
-        const anchor = document.querySelector("article + hr + faceplate-partial");
-        return anchor ? anchor.parentNode : null;
+        for (const strategy of findParentStrategies) {
+            try {
+                const result = strategy();
+                if (result) return result;
+            } catch (_) { /* strategy failed, try next */ }
+        }
+        return null;
     };
 
     let searchDeadline = 0;
@@ -275,11 +384,12 @@
             parent.style.position = "";
             parent.style.height = "";
             postMap = new Map();
+            nextSyntheticId = 0;
             resizeObserver.disconnect();
             disconnectPageObservers();
 
             hideFeed();
-            pageChange.observe(parent, { childList: true });
+            pageChange.observe(parent, { childList: true, subtree: true });
 
             const icon = cardIcon();
             if (icon) {
@@ -294,6 +404,7 @@
 
         if (found && found === parent) {
             postMap = new Map();
+            nextSyntheticId = 0;
             resizeObserver.disconnect();
             parent.style.position = "";
             parent.style.height = "";
@@ -380,7 +491,9 @@
 
     if (document.body) {
         start();
+    } else if (document.readyState === 'loading') {
+        document.addEventListener('DOMContentLoaded', start, { once: true });
     } else {
-        window.addEventListener('DOMContentLoaded', start, { once: true });
+        start();
     }
 })();
\ No newline at end of file
diff --git a/js/reddit-multi-column.js b/js/reddit-multi-column.js
index 99c28b2..fc47664 100644
--- a/js/reddit-multi-column.js
+++ b/js/reddit-multi-column.js
@@ -13,16 +13,38 @@
     const MAX_HIDE_MS = 1200;
     const FADE_MS = 150;
 
+    // Selectors used to locate feed items inside the feed container. Kept in
+    // one place so they're easy to update when Reddit changes its DOM.
+    const FEED_ITEM_SELECTOR = 'article, shreddit-post, shreddit-ad-post, faceplate-partial';
+
     let columns = COLUMNS;
     let cleanup = false;
 
     let parent = null;
     let currentPath = location.pathname;
 
-    const cardIcon = () => document?.querySelector('shreddit-sort-dropdown[header-text="View"]')?.shadowRoot?.querySelector('svg');
+    const cardIcon = () => {
+        // Try multiple selectors – Reddit has changed the view-switcher element
+        // name/attributes over time.
+        const selectors = [
+            'shreddit-sort-dropdown[header-text="View"]',
+            'shreddit-view-nav',
+            'shreddit-sort-dropdown',
+        ];
+        for (const sel of selectors) {
+            const el = document.querySelector(sel);
+            if (!el) continue;
+            // If the component uses Shadow DOM, look inside it.
+            const root = el.shadowRoot || el;
+            const svg = root.querySelector('svg');
+            if (svg) return svg;
+        }
+        return undefined;
+    };
     const shouldClean = (icon) => icon === undefined ? false : icon.getAttribute('icon-name') !== "view-card-outline";
 
     let postMap = new Map();
+    let nextSyntheticId = 0;
 
     const indexOfSmallest = function (a) {
         let lowest = 0;
@@ -32,6 +54,29 @@
         return lowest;
     };
 
+    // --- Stable key for each feed item ------------------------------------
+    // Reddit may or may not provide an aria-label, data-testid, or id on
+    // articles. We try several attributes and fall back to a synthetic id
+    // stamped on the element so that every item always gets a layout key.
+    const stableKey = function(el) {
+        if (el.dataset.rmcId) return el.dataset.rmcId;
+        const candidate =
+            el.getAttribute('aria-label') ||
+            el.getAttribute('id') ||
+            el.getAttribute('data-testid') ||
+            el.getAttribute('data-fullname') ||
+            el.getAttribute('data-post-id') ||
+            el.querySelector('[data-post-id]')?.getAttribute('data-post-id') ||
+            el.querySelector('a[href*="/comments/"]')?.getAttribute('href');
+        if (candidate) {
+            el.dataset.rmcId = candidate;
+            return candidate;
+        }
+        const synth = `rmc-synth-${nextSyntheticId++}`;
+        el.dataset.rmcId = synth;
+        return synth;
+    };
+
     // Reddit's <main> and the subgrid wrapper apply horizontal padding that
     // was pushing the feed container ~56px in from the viewport edge. That
     // padding was invisible to our layout math (we measured clientWidth of
@@ -58,15 +103,16 @@
                 box-sizing: border-box !important;
                 display: block !important;
             }
-            shreddit-feed article,
-            shreddit-feed shreddit-ad-post,
-            shreddit-feed faceplate-partial {
+            shreddit-feed > article,
+            shreddit-feed > shreddit-post,
+            shreddit-feed > shreddit-ad-post,
+            shreddit-feed > faceplate-partial,
+            shreddit-feed > faceplate-batch > article,
+            shreddit-feed > faceplate-batch > shreddit-post,
+            shreddit-feed > faceplate-batch > shreddit-ad-post,
+            shreddit-feed > faceplate-batch > faceplate-partial {
                 margin: 0 !important;
                 box-sizing: border-box !important;
-                /* Tell Safari each card is an isolated paint surface. Helps
-                   it re-rasterize only the tiles that actually changed after
-                   a visual zoom (Smart Zoom) instead of repainting the whole
-                   tall feed region. */
                 contain: layout paint !important;
             }
             custom-feed-header {
@@ -124,6 +170,19 @@
 
     // --- Layout ------------------------------------------------------------
 
+    // Strip width-constraining utility classes that Reddit may apply to any
+    // ancestor of the feed. Instead of targeting one exact class name, we
+    // remove anything that looks like a Tailwind fixed/max-width utility
+    // (e.g. "m:w-[1120px]", "lg:max-w-[960px]"), which is more resilient to
+    // Reddit changing the breakpoint values.
+    const stripWidthConstraints = function(el) {
+        if (!el) return;
+        const toRemove = [...el.classList].filter(
+            c => /\b(w-\[|max-w-\[)/.test(c)
+        );
+        if (toRemove.length) el.classList.remove(...toRemove);
+    };
+
     const makeLayout = function(changes = []) {
         if (cleanup) return;
         if (!parent || !parent.isConnected) return;
@@ -136,7 +195,11 @@
                 mainContainer.className = [...mainContainer.classList].filter(c => !c.includes(":grid-cols-")).join(" ");
             }
             const subgrid = document.querySelector("div.subgrid-container");
-            if (subgrid) subgrid.classList.remove("m:w-[1120px]");
+            stripWidthConstraints(subgrid);
+            if (subgrid) {
+                subgrid.style.maxWidth = "100%";
+                subgrid.style.width = "100%";
+            }
             const sidebar = document.getElementById("right-sidebar-container");
             if (sidebar) sidebar.style.display = "none";
             parent.style.position = "relative";
@@ -149,11 +212,27 @@
         const totalHGapPx = HGAP * (columns + 1);
         const colWidthPx = (containerWidth - totalHGapPx) / columns;
 
-        const nodes = [...parent.querySelectorAll("article, shreddit-ad-post, faceplate-partial").values()];
+        const nodes = [...parent.querySelectorAll(FEED_ITEM_SELECTOR)];
+
+        // Filter to only direct layout items (skip deeply nested elements
+        // that happen to match the selector inside a shadow DOM etc.)
+        const layoutNodes = nodes.filter(n => {
+            let p = n.parentNode;
+            // Accept items whose parent is the feed container or a
+            // faceplate-batch directly inside it.
+            while (p && p !== parent) {
+                const tag = p.tagName ? p.tagName.toLowerCase() : '';
+                if (tag === 'faceplate-batch') {
+                    p = p.parentNode;
+                    continue;
+                }
+                break;
+            }
+            return p === parent;
+        });
 
-        for (const article of nodes) {
-            const key = article.ariaLabel;
-            if (key === null) continue;
+        for (const article of layoutNodes) {
+            const key = stableKey(article);
 
             observeArticleSize(article);
 
@@ -178,15 +257,10 @@
             parent.style.height = height + "px";
         }
 
-        for (const article of nodes) {
-            const key = article.ariaLabel;
+        for (const article of layoutNodes) {
+            const key = stableKey(article);
             const entry = postMap.get(key) ?? { col: 0, top: tops[0] };
             const leftPx = HGAP + entry.col * (colWidthPx + HGAP);
-            // Skip the setAttribute when the resolved layout for this article
-            // hasn't moved. setAttribute("style", …) always invalidates style
-            // even with an identical value, and re-running over hundreds of
-            // articles mid-animation (e.g. Safari Smart Zoom snapping back to
-            // 100%) is what causes the cutoff/flash on the way out.
             const layoutKey = cleanup ? '' : `${colWidthPx.toFixed(2)}|${entry.top}|${leftPx.toFixed(2)}`;
             if (article.dataset.rmcKey === layoutKey) continue;
             article.dataset.rmcKey = layoutKey;
@@ -198,9 +272,9 @@
             );
         }
 
-        for (const batch of parent.querySelectorAll("faceplate-batch").values()) {
+        for (const batch of parent.querySelectorAll("faceplate-batch")) {
             if (!batch.style.height) {
-                batch.style.height = [...batch.childNodes].reduce((h, c) => h + c.clientHeight, 0) + "px";
+                batch.style.height = [...batch.childNodes].reduce((h, c) => h + (c.clientHeight || 0), 0) + "px";
             }
         }
     };
@@ -208,15 +282,8 @@
     // Safari Smart Zoom (double-tap on a Magic Trackpad) is a visual-viewport
     // zoom — visualViewport.scale and window.innerWidth change, but the layout
     // viewport (parent.clientWidth in CSS pixels) does not, so there's nothing
-    // for us to lay out differently. The trigger that does reach us is
-    // scrollend, which fires several times during the zoom because Safari pans
-    // the document while zooming. Running makeLayout mid-gesture is what
-    // produces the cutoff/flash on the way back out. Gating on vv.scale skips
-    // those scrollend-driven layouts during the gesture; window resize and
-    // ⌘+/⌘− leave vv.scale at 1, so they still flow through.
+    // for us to lay out differently.
     const vv = window.visualViewport;
-    // Only bail on zoom-IN (Safari Smart Zoom). Don't gate on zoom-out, since
-    // some Safari configs report initial scale below 1 and we'd never lay out.
     const isVvZoomedIn = () => vv ? vv.scale > 1.01 : false;
 
     let layoutScheduled = false;
@@ -250,9 +317,46 @@
         layoutSwitch.disconnect();
     };
 
+    // --- Feed container discovery ------------------------------------------
+    // Use a ranked list of strategies so that when Reddit changes its DOM we
+    // still find the feed.  Each strategy returns the container element or
+    // null.  The first non-null result wins.
+    const findParentStrategies = [
+        // Strategy 1: <shreddit-feed> custom element (current Reddit 2025+).
+        () => document.querySelector('shreddit-feed'),
+
+        // Strategy 2: legacy selector – an <article> followed by <hr> then
+        // <faceplate-partial> (pre-2025 Reddit).  Return its parentNode.
+        () => {
+            const anchor = document.querySelector('article + hr + faceplate-partial');
+            return anchor ? anchor.parentNode : null;
+        },
+
+        // Strategy 3: any container that holds multiple <article> children
+        // (generic heuristic).  Walk up from the first article's parent and
+        // pick the first ancestor that holds ≥2 articles.
+        () => {
+            const first = document.querySelector('main article');
+            if (!first) return null;
+            let el = first.parentNode;
+            while (el && el !== document.body) {
+                if (el.querySelectorAll(':scope > article, :scope > shreddit-post').length >= 2) return el;
+                // Also check one level deeper (faceplate-batch wrappers).
+                if (el.querySelectorAll('article, shreddit-post').length >= 2) return el;
+                el = el.parentNode;
+            }
+            return null;
+        },
+    ];
+
     const findParent = function() {
-        const anchor = document.querySelector("article + hr + faceplate-partial");
-        return anchor ? anchor.parentNode : null;
+        for (const strategy of findParentStrategies) {
+            try {
+                const result = strategy();
+                if (result) return result;
+            } catch (_) { /* strategy failed, try next */ }
+        }
+        return null;
     };
 
     let searchDeadline = 0;
@@ -265,11 +369,12 @@
             parent.style.position = "";
             parent.style.height = "";
             postMap = new Map();
+            nextSyntheticId = 0;
             resizeObserver.disconnect();
             disconnectPageObservers();
 
             hideFeed();
-            pageChange.observe(parent, { childList: true });
+            pageChange.observe(parent, { childList: true, subtree: true });
 
             const icon = cardIcon();
             if (icon) {
@@ -284,6 +389,7 @@
 
         if (found && found === parent) {
             postMap = new Map();
+            nextSyntheticId = 0;
             resizeObserver.disconnect();
             parent.style.position = "";
             parent.style.height = "";

From fd743985dee0424c2638ebd553681b3de825d7a7 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Thu, 25 Jun 2026 05:11:03 +0000
Subject: [PATCH 08/18] =?UTF-8?q?fix:=20correct=20regex=20for=20Tailwind?=
 =?UTF-8?q?=20class=20stripping=20(word=20boundary=20=E2=86=92=20prefix=20?=
 =?UTF-8?q?match)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 Reddit Multi Column.user.js | 2 +-
 js/reddit-multi-column.js   | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/Reddit Multi Column.user.js b/Reddit Multi Column.user.js
index d24b707..eca859e 100644
--- a/Reddit Multi Column.user.js	
+++ b/Reddit Multi Column.user.js	
@@ -193,7 +193,7 @@
     const stripWidthConstraints = function(el) {
         if (!el) return;
         const toRemove = [...el.classList].filter(
-            c => /\b(w-\[|max-w-\[)/.test(c)
+            c => /(^|:)(w-\[|max-w-\[)/.test(c)
         );
         if (toRemove.length) el.classList.remove(...toRemove);
     };
diff --git a/js/reddit-multi-column.js b/js/reddit-multi-column.js
index fc47664..ba08a66 100644
--- a/js/reddit-multi-column.js
+++ b/js/reddit-multi-column.js
@@ -178,7 +178,7 @@
     const stripWidthConstraints = function(el) {
         if (!el) return;
         const toRemove = [...el.classList].filter(
-            c => /\b(w-\[|max-w-\[)/.test(c)
+            c => /(^|:)(w-\[|max-w-\[)/.test(c)
         );
         if (toRemove.length) el.classList.remove(...toRemove);
     };

From 70a7e78420319961221742378ee5f4dc61274abb Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Thu, 25 Jun 2026 15:56:09 +0000
Subject: [PATCH 09/18] fix: prevent page blinking caused by layout feedback
 loops and aggressive observers

---
 Reddit Multi Column.user.js | 49 ++++++++++++++++++++++++++++---------
 js/reddit-multi-column.js   | 47 ++++++++++++++++++++++++++---------
 2 files changed, 73 insertions(+), 23 deletions(-)

diff --git a/Reddit Multi Column.user.js b/Reddit Multi Column.user.js
index eca859e..926b924 100644
--- a/Reddit Multi Column.user.js	
+++ b/Reddit Multi Column.user.js	
@@ -172,7 +172,11 @@
     };
 
     // --- Per-article size tracking -----------------------------------------
+    let inLayout = false;
     const resizeObserver = new ResizeObserver(() => {
+        // Avoid feedback loop: makeLayout repositions articles which triggers
+        // ResizeObserver which calls requestLayout again, causing a blink.
+        if (inLayout) return;
         requestLayout();
     });
     const observedArticles = new WeakSet();
@@ -202,6 +206,8 @@
         if (cleanup) return;
         if (!parent || !parent.isConnected) return;
 
+        inLayout = true;
+        try {
         if (parent.style.position !== "relative") {
             const main = document.querySelector("main");
             if (main) main.style.maxWidth = "100%";
@@ -292,6 +298,9 @@
                 batch.style.height = [...batch.childNodes].reduce((h, c) => h + (c.clientHeight || 0), 0) + "px";
             }
         }
+        } finally {
+            inLayout = false;
+        }
     };
 
     // Safari Smart Zoom (double-tap on a Magic Trackpad) is a visual-viewport
@@ -321,11 +330,19 @@
         }
     };
 
-    const pageChange = new MutationObserver(requestLayout);
+    let pageChangeTimer = null;
+    const pageChange = new MutationObserver(() => {
+        // Debounce: Reddit's feed generates many rapid childList mutations
+        // (e.g. batch loading). Coalesce them into a single layout pass.
+        if (pageChangeTimer) clearTimeout(pageChangeTimer);
+        pageChangeTimer = setTimeout(() => {
+            pageChangeTimer = null;
+            requestLayout();
+        }, 100);
+    });
     const layoutSwitch = new MutationObserver(setLayout);
 
     window.addEventListener('resize', requestLayout);
-    window.addEventListener('scrollend', requestLayout);
 
     const disconnectPageObservers = function() {
         pageChange.disconnect();
@@ -403,14 +420,9 @@
         }
 
         if (found && found === parent) {
-            postMap = new Map();
-            nextSyntheticId = 0;
-            resizeObserver.disconnect();
-            parent.style.position = "";
-            parent.style.height = "";
-            hideFeed();
+            // Parent hasn't changed – just ensure layout is up to date
+            // without the destructive hide/reveal cycle that causes blinking.
             requestLayout();
-            settleTimer = setTimeout(revealFeed, SETTLE_MS);
             searching = false;
             return;
         }
@@ -463,7 +475,12 @@
         window.addEventListener('reddit-mc:locationchange', onNavigate);
     };
 
-    const appObserver = new MutationObserver(onNavigate);
+    const appObserver = new MutationObserver(() => {
+        // Only trigger navigation handling when the URL actually changed.
+        if (location.pathname !== currentPath) {
+            onNavigate();
+        }
+    });
 
     const observeApp = function() {
         const app = document.querySelector("shreddit-app");
@@ -474,9 +491,17 @@
         appObserver.observe(app, { attributes: true });
     };
 
+    let safetyNetTimer = null;
     const domSafetyNet = new MutationObserver(() => {
         if (!parent || !parent.isConnected) {
-            scheduleFeedSearch(2000);
+            // Debounce: avoid firing repeatedly for rapid DOM changes.
+            if (safetyNetTimer) return;
+            safetyNetTimer = setTimeout(() => {
+                safetyNetTimer = null;
+                if (!parent || !parent.isConnected) {
+                    scheduleFeedSearch(2000);
+                }
+            }, 500);
         }
     });
 
@@ -496,4 +521,4 @@
     } else {
         start();
     }
-})();
\ No newline at end of file
+})();
diff --git a/js/reddit-multi-column.js b/js/reddit-multi-column.js
index ba08a66..53a4ace 100644
--- a/js/reddit-multi-column.js
+++ b/js/reddit-multi-column.js
@@ -157,7 +157,11 @@
     };
 
     // --- Per-article size tracking -----------------------------------------
+    let inLayout = false;
     const resizeObserver = new ResizeObserver(() => {
+        // Avoid feedback loop: makeLayout repositions articles which triggers
+        // ResizeObserver which calls requestLayout again, causing a blink.
+        if (inLayout) return;
         requestLayout();
     });
     const observedArticles = new WeakSet();
@@ -187,6 +191,8 @@
         if (cleanup) return;
         if (!parent || !parent.isConnected) return;
 
+        inLayout = true;
+        try {
         if (parent.style.position !== "relative") {
             const main = document.querySelector("main");
             if (main) main.style.maxWidth = "100%";
@@ -277,6 +283,9 @@
                 batch.style.height = [...batch.childNodes].reduce((h, c) => h + (c.clientHeight || 0), 0) + "px";
             }
         }
+        } finally {
+            inLayout = false;
+        }
     };
 
     // Safari Smart Zoom (double-tap on a Magic Trackpad) is a visual-viewport
@@ -306,11 +315,19 @@
         }
     };
 
-    const pageChange = new MutationObserver(requestLayout);
+    let pageChangeTimer = null;
+    const pageChange = new MutationObserver(() => {
+        // Debounce: Reddit's feed generates many rapid childList mutations
+        // (e.g. batch loading). Coalesce them into a single layout pass.
+        if (pageChangeTimer) clearTimeout(pageChangeTimer);
+        pageChangeTimer = setTimeout(() => {
+            pageChangeTimer = null;
+            requestLayout();
+        }, 100);
+    });
     const layoutSwitch = new MutationObserver(setLayout);
 
     window.addEventListener('resize', requestLayout);
-    window.addEventListener('scrollend', requestLayout);
 
     const disconnectPageObservers = function() {
         pageChange.disconnect();
@@ -388,14 +405,9 @@
         }
 
         if (found && found === parent) {
-            postMap = new Map();
-            nextSyntheticId = 0;
-            resizeObserver.disconnect();
-            parent.style.position = "";
-            parent.style.height = "";
-            hideFeed();
+            // Parent hasn't changed – just ensure layout is up to date
+            // without the destructive hide/reveal cycle that causes blinking.
             requestLayout();
-            settleTimer = setTimeout(revealFeed, SETTLE_MS);
             searching = false;
             return;
         }
@@ -448,7 +460,12 @@
         window.addEventListener('reddit-mc:locationchange', onNavigate);
     };
 
-    const appObserver = new MutationObserver(onNavigate);
+    const appObserver = new MutationObserver(() => {
+        // Only trigger navigation handling when the URL actually changed.
+        if (location.pathname !== currentPath) {
+            onNavigate();
+        }
+    });
 
     const observeApp = function() {
         const app = document.querySelector("shreddit-app");
@@ -459,9 +476,17 @@
         appObserver.observe(app, { attributes: true });
     };
 
+    let safetyNetTimer = null;
     const domSafetyNet = new MutationObserver(() => {
         if (!parent || !parent.isConnected) {
-            scheduleFeedSearch(2000);
+            // Debounce: avoid firing repeatedly for rapid DOM changes.
+            if (safetyNetTimer) return;
+            safetyNetTimer = setTimeout(() => {
+                safetyNetTimer = null;
+                if (!parent || !parent.isConnected) {
+                    scheduleFeedSearch(2000);
+                }
+            }, 500);
         }
     });
 

From 10f13271c7a29ee75e4ed5f2138524a265f76fe2 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Thu, 25 Jun 2026 16:12:58 +0000
Subject: [PATCH 10/18] fix: restore lazy loading and hover states in Reddit
 Multi Column script

- Remove faceplate-partial from column-positioned items (fixes infinite scroll)
- Remove contain:layout paint CSS that broke hover states
- Remove hide/reveal opacity system that caused unnecessary complexity
- Position lazy-load sentinels sequentially at container bottom
- Clean up stale postMap entries for removed DOM nodes
---
 Reddit Multi Column.user.js | 150 ++++++++++--------------------------
 js/reddit-multi-column.js   | 148 ++++++++++-------------------------
 2 files changed, 83 insertions(+), 215 deletions(-)

diff --git a/Reddit Multi Column.user.js b/Reddit Multi Column.user.js
index 926b924..8c6e275 100644
--- a/Reddit Multi Column.user.js	
+++ b/Reddit Multi Column.user.js	
@@ -1,7 +1,7 @@
 // ==UserScript==
 // @name         Reddit Multi Column
 // @namespace    https://gist.github.com/c6p/463892bb243f611f2a3cfa4268c6435e
-// @version      0.4.0
+// @version      0.5.0
 // @description  Multi column layout for reddit redesign (with SPA nav support)
 // @author       Can Altıparmak
 // @homepageURL  https://gist.github.com/c6p/463892bb243f611f2a3cfa4268c6435e
@@ -24,13 +24,11 @@
     const HGAP = 17;
     const VGAP = 12;
 
-    const SETTLE_MS = 180;
-    const MAX_HIDE_MS = 1200;
-    const FADE_MS = 150;
-
-    // Selectors used to locate feed items inside the feed container. Kept in
-    // one place so they're easy to update when Reddit changes its DOM.
-    const FEED_ITEM_SELECTOR = 'article, shreddit-post, shreddit-ad-post, faceplate-partial';
+    // Selectors for actual post items that should be laid out in columns.
+    // IMPORTANT: faceplate-partial is NOT included here — it is Reddit's
+    // lazy-load sentinel and must remain in normal document flow so that
+    // IntersectionObserver can trigger infinite scroll loading.
+    const POST_ITEM_SELECTOR = 'article, shreddit-post, shreddit-ad-post';
 
     let columns = COLUMNS;
     let cleanup = false;
@@ -39,8 +37,6 @@
     let currentPath = location.pathname;
 
     const cardIcon = () => {
-        // Try multiple selectors – Reddit has changed the view-switcher element
-        // name/attributes over time.
         const selectors = [
             'shreddit-sort-dropdown[header-text="View"]',
             'shreddit-view-nav',
@@ -49,7 +45,6 @@
         for (const sel of selectors) {
             const el = document.querySelector(sel);
             if (!el) continue;
-            // If the component uses Shadow DOM, look inside it.
             const root = el.shadowRoot || el;
             const svg = root.querySelector('svg');
             if (svg) return svg;
@@ -69,10 +64,6 @@
         return lowest;
     };
 
-    // --- Stable key for each feed item ------------------------------------
-    // Reddit may or may not provide an aria-label, data-testid, or id on
-    // articles. We try several attributes and fall back to a synthetic id
-    // stamped on the element so that every item always gets a layout key.
     const stableKey = function(el) {
         if (el.dataset.rmcId) return el.dataset.rmcId;
         const candidate =
@@ -92,13 +83,6 @@
         return synth;
     };
 
-    // Reddit's <main> and the subgrid wrapper apply horizontal padding that
-    // was pushing the feed container ~56px in from the viewport edge. That
-    // padding was invisible to our layout math (we measured clientWidth of
-    // the feed, not the viewport), so HGAP only added to it — making the
-    // effective left/right outer spacing ~68px while the top/bottom stayed
-    // at our 12px VGAP. Zeroing those outer paddings lets HGAP be the true
-    // visible outer spacing.
     const injectResetStyles = function() {
         if (document.getElementById('rmc-margin-reset')) return;
         const style = document.createElement('style');
@@ -121,14 +105,11 @@
             shreddit-feed > article,
             shreddit-feed > shreddit-post,
             shreddit-feed > shreddit-ad-post,
-            shreddit-feed > faceplate-partial,
             shreddit-feed > faceplate-batch > article,
             shreddit-feed > faceplate-batch > shreddit-post,
-            shreddit-feed > faceplate-batch > shreddit-ad-post,
-            shreddit-feed > faceplate-batch > faceplate-partial {
+            shreddit-feed > faceplate-batch > shreddit-ad-post {
                 margin: 0 !important;
                 box-sizing: border-box !important;
-                contain: layout paint !important;
             }
             custom-feed-header {
                 display: block !important;
@@ -139,43 +120,9 @@
         (document.head || document.documentElement).appendChild(style);
     };
 
-    // --- Visibility management ---------------------------------------------
-    let settleTimer = null;
-    let hideDeadline = 0;
-    let hidden = false;
-
-    const hideFeed = function() {
-        if (!parent) return;
-        hidden = true;
-        hideDeadline = performance.now() + MAX_HIDE_MS;
-        parent.style.transition = 'none';
-        parent.style.opacity = '0';
-    };
-
-    const revealFeed = function() {
-        if (!parent || !hidden) return;
-        hidden = false;
-        if (settleTimer) { clearTimeout(settleTimer); settleTimer = null; }
-        parent.style.transition = `opacity ${FADE_MS}ms ease-out`;
-        parent.style.opacity = '1';
-    };
-
-    const bumpSettle = function() {
-        if (!hidden) return;
-        if (settleTimer) clearTimeout(settleTimer);
-        const remaining = hideDeadline - performance.now();
-        if (remaining <= 0) {
-            revealFeed();
-            return;
-        }
-        settleTimer = setTimeout(revealFeed, Math.min(SETTLE_MS, remaining));
-    };
-
     // --- Per-article size tracking -----------------------------------------
     let inLayout = false;
     const resizeObserver = new ResizeObserver(() => {
-        // Avoid feedback loop: makeLayout repositions articles which triggers
-        // ResizeObserver which calls requestLayout again, causing a blink.
         if (inLayout) return;
         requestLayout();
     });
@@ -189,11 +136,6 @@
 
     // --- Layout ------------------------------------------------------------
 
-    // Strip width-constraining utility classes that Reddit may apply to any
-    // ancestor of the feed. Instead of targeting one exact class name, we
-    // remove anything that looks like a Tailwind fixed/max-width utility
-    // (e.g. "m:w-[1120px]", "lg:max-w-[960px]"), which is more resilient to
-    // Reddit changing the breakpoint values.
     const stripWidthConstraints = function(el) {
         if (!el) return;
         const toRemove = [...el.classList].filter(
@@ -202,7 +144,7 @@
         if (toRemove.length) el.classList.remove(...toRemove);
     };
 
-    const makeLayout = function(changes = []) {
+    const makeLayout = function() {
         if (cleanup) return;
         if (!parent || !parent.isConnected) return;
 
@@ -233,14 +175,12 @@
         const totalHGapPx = HGAP * (columns + 1);
         const colWidthPx = (containerWidth - totalHGapPx) / columns;
 
-        const nodes = [...parent.querySelectorAll(FEED_ITEM_SELECTOR)];
+        // Only select actual post items — NOT faceplate-partial (lazy-load sentinels)
+        const nodes = [...parent.querySelectorAll(POST_ITEM_SELECTOR)];
 
-        // Filter to only direct layout items (skip deeply nested elements
-        // that happen to match the selector inside a shadow DOM etc.)
+        // Filter to only direct layout items (skip deeply nested elements)
         const layoutNodes = nodes.filter(n => {
             let p = n.parentNode;
-            // Accept items whose parent is the feed container or a
-            // faceplate-batch directly inside it.
             while (p && p !== parent) {
                 const tag = p.tagName ? p.tagName.toLowerCase() : '';
                 if (tag === 'faceplate-batch') {
@@ -252,9 +192,12 @@
             return p === parent;
         });
 
+        // Reset postMap to only contain currently-visible items.
+        // This prevents stale entries from removed posts affecting layout.
+        const currentKeys = new Set();
         for (const article of layoutNodes) {
             const key = stableKey(article);
-
+            currentKeys.add(key);
             observeArticleSize(article);
 
             const h = article.offsetHeight;
@@ -266,6 +209,11 @@
             }
         }
 
+        // Remove entries that are no longer in the DOM
+        for (const key of postMap.keys()) {
+            if (!currentKeys.has(key)) postMap.delete(key);
+        }
+
         let tops = Array(columns).fill(VGAP);
         for (const post of postMap.values()) {
             post.col = indexOfSmallest(tops);
@@ -282,38 +230,44 @@
             const key = stableKey(article);
             const entry = postMap.get(key) ?? { col: 0, top: tops[0] };
             const leftPx = HGAP + entry.col * (colWidthPx + HGAP);
-            const layoutKey = cleanup ? '' : `${colWidthPx.toFixed(2)}|${entry.top}|${leftPx.toFixed(2)}`;
+            const layoutKey = `${colWidthPx.toFixed(2)}|${entry.top}|${leftPx.toFixed(2)}`;
             if (article.dataset.rmcKey === layoutKey) continue;
             article.dataset.rmcKey = layoutKey;
-            article.setAttribute(
-                "style",
-                cleanup
-                    ? ""
-                    : `position:absolute; width:${colWidthPx}px; top:${entry.top}px; left:${leftPx}px; margin:0; padding:0`
-            );
+            article.style.position = 'absolute';
+            article.style.width = colWidthPx + 'px';
+            article.style.top = entry.top + 'px';
+            article.style.left = leftPx + 'px';
+            article.style.margin = '0';
         }
 
-        for (const batch of parent.querySelectorAll("faceplate-batch")) {
-            if (!batch.style.height) {
-                batch.style.height = [...batch.childNodes].reduce((h, c) => h + (c.clientHeight || 0), 0) + "px";
-            }
+        // Ensure faceplate-partial (lazy-load sentinels) and faceplate-batch
+        // wrappers are positioned at the bottom of the container so that
+        // scrolling triggers Reddit's IntersectionObserver for infinite scroll.
+        let bottomOffset = height;
+        for (const partial of parent.querySelectorAll(':scope > faceplate-partial, :scope > faceplate-batch')) {
+            partial.style.position = 'absolute';
+            partial.style.top = bottomOffset + 'px';
+            partial.style.left = '0';
+            partial.style.width = '100%';
+            partial.style.height = 'auto';
+            const partialH = partial.offsetHeight || 100;
+            bottomOffset += partialH;
         }
+        if (bottomOffset > height) {
+            parent.style.height = bottomOffset + 'px';
+        }
+
         } finally {
             inLayout = false;
         }
     };
 
-    // Safari Smart Zoom (double-tap on a Magic Trackpad) is a visual-viewport
-    // zoom — visualViewport.scale and window.innerWidth change, but the layout
-    // viewport (parent.clientWidth in CSS pixels) does not, so there's nothing
-    // for us to lay out differently.
     const vv = window.visualViewport;
     const isVvZoomedIn = () => vv ? vv.scale > 1.01 : false;
 
     let layoutScheduled = false;
     function requestLayout() {
         if (isVvZoomedIn()) return;
-        bumpSettle();
         if (layoutScheduled) return;
         layoutScheduled = true;
         requestAnimationFrame(() => {
@@ -332,8 +286,6 @@
 
     let pageChangeTimer = null;
     const pageChange = new MutationObserver(() => {
-        // Debounce: Reddit's feed generates many rapid childList mutations
-        // (e.g. batch loading). Coalesce them into a single layout pass.
         if (pageChangeTimer) clearTimeout(pageChangeTimer);
         pageChangeTimer = setTimeout(() => {
             pageChangeTimer = null;
@@ -350,30 +302,18 @@
     };
 
     // --- Feed container discovery ------------------------------------------
-    // Use a ranked list of strategies so that when Reddit changes its DOM we
-    // still find the feed.  Each strategy returns the container element or
-    // null.  The first non-null result wins.
     const findParentStrategies = [
-        // Strategy 1: <shreddit-feed> custom element (current Reddit 2025+).
         () => document.querySelector('shreddit-feed'),
-
-        // Strategy 2: legacy selector – an <article> followed by <hr> then
-        // <faceplate-partial> (pre-2025 Reddit).  Return its parentNode.
         () => {
             const anchor = document.querySelector('article + hr + faceplate-partial');
             return anchor ? anchor.parentNode : null;
         },
-
-        // Strategy 3: any container that holds multiple <article> children
-        // (generic heuristic).  Walk up from the first article's parent and
-        // pick the first ancestor that holds ≥2 articles.
         () => {
             const first = document.querySelector('main article');
             if (!first) return null;
             let el = first.parentNode;
             while (el && el !== document.body) {
                 if (el.querySelectorAll(':scope > article, :scope > shreddit-post').length >= 2) return el;
-                // Also check one level deeper (faceplate-batch wrappers).
                 if (el.querySelectorAll('article, shreddit-post').length >= 2) return el;
                 el = el.parentNode;
             }
@@ -405,7 +345,6 @@
             resizeObserver.disconnect();
             disconnectPageObservers();
 
-            hideFeed();
             pageChange.observe(parent, { childList: true, subtree: true });
 
             const icon = cardIcon();
@@ -414,14 +353,11 @@
             }
 
             requestLayout();
-            settleTimer = setTimeout(revealFeed, SETTLE_MS);
             searching = false;
             return;
         }
 
         if (found && found === parent) {
-            // Parent hasn't changed – just ensure layout is up to date
-            // without the destructive hide/reveal cycle that causes blinking.
             requestLayout();
             searching = false;
             return;
@@ -476,7 +412,6 @@
     };
 
     const appObserver = new MutationObserver(() => {
-        // Only trigger navigation handling when the URL actually changed.
         if (location.pathname !== currentPath) {
             onNavigate();
         }
@@ -494,7 +429,6 @@
     let safetyNetTimer = null;
     const domSafetyNet = new MutationObserver(() => {
         if (!parent || !parent.isConnected) {
-            // Debounce: avoid firing repeatedly for rapid DOM changes.
             if (safetyNetTimer) return;
             safetyNetTimer = setTimeout(() => {
                 safetyNetTimer = null;
diff --git a/js/reddit-multi-column.js b/js/reddit-multi-column.js
index 53a4ace..71b04d9 100644
--- a/js/reddit-multi-column.js
+++ b/js/reddit-multi-column.js
@@ -9,13 +9,11 @@
     const HGAP = 17;
     const VGAP = 12;
 
-    const SETTLE_MS = 180;
-    const MAX_HIDE_MS = 1200;
-    const FADE_MS = 150;
-
-    // Selectors used to locate feed items inside the feed container. Kept in
-    // one place so they're easy to update when Reddit changes its DOM.
-    const FEED_ITEM_SELECTOR = 'article, shreddit-post, shreddit-ad-post, faceplate-partial';
+    // Selectors for actual post items that should be laid out in columns.
+    // IMPORTANT: faceplate-partial is NOT included here — it is Reddit's
+    // lazy-load sentinel and must remain in normal document flow so that
+    // IntersectionObserver can trigger infinite scroll loading.
+    const POST_ITEM_SELECTOR = 'article, shreddit-post, shreddit-ad-post';
 
     let columns = COLUMNS;
     let cleanup = false;
@@ -24,8 +22,6 @@
     let currentPath = location.pathname;
 
     const cardIcon = () => {
-        // Try multiple selectors – Reddit has changed the view-switcher element
-        // name/attributes over time.
         const selectors = [
             'shreddit-sort-dropdown[header-text="View"]',
             'shreddit-view-nav',
@@ -34,7 +30,6 @@
         for (const sel of selectors) {
             const el = document.querySelector(sel);
             if (!el) continue;
-            // If the component uses Shadow DOM, look inside it.
             const root = el.shadowRoot || el;
             const svg = root.querySelector('svg');
             if (svg) return svg;
@@ -54,10 +49,6 @@
         return lowest;
     };
 
-    // --- Stable key for each feed item ------------------------------------
-    // Reddit may or may not provide an aria-label, data-testid, or id on
-    // articles. We try several attributes and fall back to a synthetic id
-    // stamped on the element so that every item always gets a layout key.
     const stableKey = function(el) {
         if (el.dataset.rmcId) return el.dataset.rmcId;
         const candidate =
@@ -77,13 +68,6 @@
         return synth;
     };
 
-    // Reddit's <main> and the subgrid wrapper apply horizontal padding that
-    // was pushing the feed container ~56px in from the viewport edge. That
-    // padding was invisible to our layout math (we measured clientWidth of
-    // the feed, not the viewport), so HGAP only added to it — making the
-    // effective left/right outer spacing ~68px while the top/bottom stayed
-    // at our 12px VGAP. Zeroing those outer paddings lets HGAP be the true
-    // visible outer spacing.
     const injectResetStyles = function() {
         if (document.getElementById('rmc-margin-reset')) return;
         const style = document.createElement('style');
@@ -106,14 +90,11 @@
             shreddit-feed > article,
             shreddit-feed > shreddit-post,
             shreddit-feed > shreddit-ad-post,
-            shreddit-feed > faceplate-partial,
             shreddit-feed > faceplate-batch > article,
             shreddit-feed > faceplate-batch > shreddit-post,
-            shreddit-feed > faceplate-batch > shreddit-ad-post,
-            shreddit-feed > faceplate-batch > faceplate-partial {
+            shreddit-feed > faceplate-batch > shreddit-ad-post {
                 margin: 0 !important;
                 box-sizing: border-box !important;
-                contain: layout paint !important;
             }
             custom-feed-header {
                 display: block !important;
@@ -124,43 +105,9 @@
         (document.head || document.documentElement).appendChild(style);
     };
 
-    // --- Visibility management ---------------------------------------------
-    let settleTimer = null;
-    let hideDeadline = 0;
-    let hidden = false;
-
-    const hideFeed = function() {
-        if (!parent) return;
-        hidden = true;
-        hideDeadline = performance.now() + MAX_HIDE_MS;
-        parent.style.transition = 'none';
-        parent.style.opacity = '0';
-    };
-
-    const revealFeed = function() {
-        if (!parent || !hidden) return;
-        hidden = false;
-        if (settleTimer) { clearTimeout(settleTimer); settleTimer = null; }
-        parent.style.transition = `opacity ${FADE_MS}ms ease-out`;
-        parent.style.opacity = '1';
-    };
-
-    const bumpSettle = function() {
-        if (!hidden) return;
-        if (settleTimer) clearTimeout(settleTimer);
-        const remaining = hideDeadline - performance.now();
-        if (remaining <= 0) {
-            revealFeed();
-            return;
-        }
-        settleTimer = setTimeout(revealFeed, Math.min(SETTLE_MS, remaining));
-    };
-
     // --- Per-article size tracking -----------------------------------------
     let inLayout = false;
     const resizeObserver = new ResizeObserver(() => {
-        // Avoid feedback loop: makeLayout repositions articles which triggers
-        // ResizeObserver which calls requestLayout again, causing a blink.
         if (inLayout) return;
         requestLayout();
     });
@@ -174,11 +121,6 @@
 
     // --- Layout ------------------------------------------------------------
 
-    // Strip width-constraining utility classes that Reddit may apply to any
-    // ancestor of the feed. Instead of targeting one exact class name, we
-    // remove anything that looks like a Tailwind fixed/max-width utility
-    // (e.g. "m:w-[1120px]", "lg:max-w-[960px]"), which is more resilient to
-    // Reddit changing the breakpoint values.
     const stripWidthConstraints = function(el) {
         if (!el) return;
         const toRemove = [...el.classList].filter(
@@ -187,7 +129,7 @@
         if (toRemove.length) el.classList.remove(...toRemove);
     };
 
-    const makeLayout = function(changes = []) {
+    const makeLayout = function() {
         if (cleanup) return;
         if (!parent || !parent.isConnected) return;
 
@@ -218,14 +160,12 @@
         const totalHGapPx = HGAP * (columns + 1);
         const colWidthPx = (containerWidth - totalHGapPx) / columns;
 
-        const nodes = [...parent.querySelectorAll(FEED_ITEM_SELECTOR)];
+        // Only select actual post items — NOT faceplate-partial (lazy-load sentinels)
+        const nodes = [...parent.querySelectorAll(POST_ITEM_SELECTOR)];
 
-        // Filter to only direct layout items (skip deeply nested elements
-        // that happen to match the selector inside a shadow DOM etc.)
+        // Filter to only direct layout items (skip deeply nested elements)
         const layoutNodes = nodes.filter(n => {
             let p = n.parentNode;
-            // Accept items whose parent is the feed container or a
-            // faceplate-batch directly inside it.
             while (p && p !== parent) {
                 const tag = p.tagName ? p.tagName.toLowerCase() : '';
                 if (tag === 'faceplate-batch') {
@@ -237,9 +177,12 @@
             return p === parent;
         });
 
+        // Reset postMap to only contain currently-visible items.
+        // This prevents stale entries from removed posts affecting layout.
+        const currentKeys = new Set();
         for (const article of layoutNodes) {
             const key = stableKey(article);
-
+            currentKeys.add(key);
             observeArticleSize(article);
 
             const h = article.offsetHeight;
@@ -251,6 +194,11 @@
             }
         }
 
+        // Remove entries that are no longer in the DOM
+        for (const key of postMap.keys()) {
+            if (!currentKeys.has(key)) postMap.delete(key);
+        }
+
         let tops = Array(columns).fill(VGAP);
         for (const post of postMap.values()) {
             post.col = indexOfSmallest(tops);
@@ -267,38 +215,44 @@
             const key = stableKey(article);
             const entry = postMap.get(key) ?? { col: 0, top: tops[0] };
             const leftPx = HGAP + entry.col * (colWidthPx + HGAP);
-            const layoutKey = cleanup ? '' : `${colWidthPx.toFixed(2)}|${entry.top}|${leftPx.toFixed(2)}`;
+            const layoutKey = `${colWidthPx.toFixed(2)}|${entry.top}|${leftPx.toFixed(2)}`;
             if (article.dataset.rmcKey === layoutKey) continue;
             article.dataset.rmcKey = layoutKey;
-            article.setAttribute(
-                "style",
-                cleanup
-                    ? ""
-                    : `position:absolute; width:${colWidthPx}px; top:${entry.top}px; left:${leftPx}px; margin:0; padding:0`
-            );
+            article.style.position = 'absolute';
+            article.style.width = colWidthPx + 'px';
+            article.style.top = entry.top + 'px';
+            article.style.left = leftPx + 'px';
+            article.style.margin = '0';
         }
 
-        for (const batch of parent.querySelectorAll("faceplate-batch")) {
-            if (!batch.style.height) {
-                batch.style.height = [...batch.childNodes].reduce((h, c) => h + (c.clientHeight || 0), 0) + "px";
-            }
+        // Ensure faceplate-partial (lazy-load sentinels) and faceplate-batch
+        // wrappers are positioned at the bottom of the container so that
+        // scrolling triggers Reddit's IntersectionObserver for infinite scroll.
+        let bottomOffset = height;
+        for (const partial of parent.querySelectorAll(':scope > faceplate-partial, :scope > faceplate-batch')) {
+            partial.style.position = 'absolute';
+            partial.style.top = bottomOffset + 'px';
+            partial.style.left = '0';
+            partial.style.width = '100%';
+            partial.style.height = 'auto';
+            const partialH = partial.offsetHeight || 100;
+            bottomOffset += partialH;
         }
+        if (bottomOffset > height) {
+            parent.style.height = bottomOffset + 'px';
+        }
+
         } finally {
             inLayout = false;
         }
     };
 
-    // Safari Smart Zoom (double-tap on a Magic Trackpad) is a visual-viewport
-    // zoom — visualViewport.scale and window.innerWidth change, but the layout
-    // viewport (parent.clientWidth in CSS pixels) does not, so there's nothing
-    // for us to lay out differently.
     const vv = window.visualViewport;
     const isVvZoomedIn = () => vv ? vv.scale > 1.01 : false;
 
     let layoutScheduled = false;
     function requestLayout() {
         if (isVvZoomedIn()) return;
-        bumpSettle();
         if (layoutScheduled) return;
         layoutScheduled = true;
         requestAnimationFrame(() => {
@@ -317,8 +271,6 @@
 
     let pageChangeTimer = null;
     const pageChange = new MutationObserver(() => {
-        // Debounce: Reddit's feed generates many rapid childList mutations
-        // (e.g. batch loading). Coalesce them into a single layout pass.
         if (pageChangeTimer) clearTimeout(pageChangeTimer);
         pageChangeTimer = setTimeout(() => {
             pageChangeTimer = null;
@@ -335,30 +287,18 @@
     };
 
     // --- Feed container discovery ------------------------------------------
-    // Use a ranked list of strategies so that when Reddit changes its DOM we
-    // still find the feed.  Each strategy returns the container element or
-    // null.  The first non-null result wins.
     const findParentStrategies = [
-        // Strategy 1: <shreddit-feed> custom element (current Reddit 2025+).
         () => document.querySelector('shreddit-feed'),
-
-        // Strategy 2: legacy selector – an <article> followed by <hr> then
-        // <faceplate-partial> (pre-2025 Reddit).  Return its parentNode.
         () => {
             const anchor = document.querySelector('article + hr + faceplate-partial');
             return anchor ? anchor.parentNode : null;
         },
-
-        // Strategy 3: any container that holds multiple <article> children
-        // (generic heuristic).  Walk up from the first article's parent and
-        // pick the first ancestor that holds ≥2 articles.
         () => {
             const first = document.querySelector('main article');
             if (!first) return null;
             let el = first.parentNode;
             while (el && el !== document.body) {
                 if (el.querySelectorAll(':scope > article, :scope > shreddit-post').length >= 2) return el;
-                // Also check one level deeper (faceplate-batch wrappers).
                 if (el.querySelectorAll('article, shreddit-post').length >= 2) return el;
                 el = el.parentNode;
             }
@@ -390,7 +330,6 @@
             resizeObserver.disconnect();
             disconnectPageObservers();
 
-            hideFeed();
             pageChange.observe(parent, { childList: true, subtree: true });
 
             const icon = cardIcon();
@@ -399,14 +338,11 @@
             }
 
             requestLayout();
-            settleTimer = setTimeout(revealFeed, SETTLE_MS);
             searching = false;
             return;
         }
 
         if (found && found === parent) {
-            // Parent hasn't changed – just ensure layout is up to date
-            // without the destructive hide/reveal cycle that causes blinking.
             requestLayout();
             searching = false;
             return;
@@ -461,7 +397,6 @@
     };
 
     const appObserver = new MutationObserver(() => {
-        // Only trigger navigation handling when the URL actually changed.
         if (location.pathname !== currentPath) {
             onNavigate();
         }
@@ -479,7 +414,6 @@
     let safetyNetTimer = null;
     const domSafetyNet = new MutationObserver(() => {
         if (!parent || !parent.isConnected) {
-            // Debounce: avoid firing repeatedly for rapid DOM changes.
             if (safetyNetTimer) return;
             safetyNetTimer = setTimeout(() => {
                 safetyNetTimer = null;

From 0a41d4aac50ce861044fbc31e6f21ff1137c0122 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Thu, 25 Jun 2026 16:21:58 +0000
Subject: [PATCH 11/18] fix: prevent infinite layout loops causing browser
 crash
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Add layoutCooldown timer to suppress observer-triggered re-layouts
  for 200ms after each layout pass completes
- ResizeObserver now respects cooldown, preventing the loop:
  layout→resize→layout→resize...
- MutationObserver now filters out attribute-only changes on elements
  we've already positioned (our own style changes)
- MutationObserver also respects cooldown and inLayout flag
- Changed observer to childList-only (no attribute watching on subtree)
- Added MIN_LAYOUT_INTERVAL (50ms) throttle as additional guard
- Increased debounce from 100ms to 150ms for mutation-triggered layouts
---
 Reddit Multi Column.user.js | 30 +++++++++++++++++++++++++++---
 1 file changed, 27 insertions(+), 3 deletions(-)

diff --git a/Reddit Multi Column.user.js b/Reddit Multi Column.user.js
index 8c6e275..9c345ff 100644
--- a/Reddit Multi Column.user.js	
+++ b/Reddit Multi Column.user.js	
@@ -122,8 +122,12 @@
 
     // --- Per-article size tracking -----------------------------------------
     let inLayout = false;
+    let layoutCooldown = 0; // timestamp until which observer-triggered layouts are suppressed
+    const LAYOUT_COOLDOWN_MS = 200;
+
     const resizeObserver = new ResizeObserver(() => {
         if (inLayout) return;
+        if (performance.now() < layoutCooldown) return;
         requestLayout();
     });
     const observedArticles = new WeakSet();
@@ -259,6 +263,7 @@
 
         } finally {
             inLayout = false;
+            layoutCooldown = performance.now() + LAYOUT_COOLDOWN_MS;
         }
     };
 
@@ -266,12 +271,18 @@
     const isVvZoomedIn = () => vv ? vv.scale > 1.01 : false;
 
     let layoutScheduled = false;
+    let lastLayoutTime = 0;
+    const MIN_LAYOUT_INTERVAL = 50; // minimum ms between layouts
+
     function requestLayout() {
         if (isVvZoomedIn()) return;
         if (layoutScheduled) return;
         layoutScheduled = true;
         requestAnimationFrame(() => {
             layoutScheduled = false;
+            const now = performance.now();
+            if (now - lastLayoutTime < MIN_LAYOUT_INTERVAL) return;
+            lastLayoutTime = now;
             makeLayout();
         });
     }
@@ -285,12 +296,25 @@
     };
 
     let pageChangeTimer = null;
-    const pageChange = new MutationObserver(() => {
+    const pageChange = new MutationObserver((mutations) => {
+        if (inLayout) return;
+        if (performance.now() < layoutCooldown) return;
+
+        // Only react to structural changes (new/removed nodes), not our own
+        // style or attribute modifications on positioned articles.
+        const hasStructuralChange = mutations.some(m => {
+            if (m.type === 'childList') return true;
+            // Ignore attribute changes on elements we've positioned
+            if (m.type === 'attributes' && m.target && m.target.dataset && m.target.dataset.rmcKey) return false;
+            return true;
+        });
+        if (!hasStructuralChange) return;
+
         if (pageChangeTimer) clearTimeout(pageChangeTimer);
         pageChangeTimer = setTimeout(() => {
             pageChangeTimer = null;
             requestLayout();
-        }, 100);
+        }, 150);
     });
     const layoutSwitch = new MutationObserver(setLayout);
 
@@ -345,7 +369,7 @@
             resizeObserver.disconnect();
             disconnectPageObservers();
 
-            pageChange.observe(parent, { childList: true, subtree: true });
+            pageChange.observe(parent, { childList: true, subtree: true, attributes: false });
 
             const icon = cardIcon();
             if (icon) {

From ef08fffd8fcbd620061443ba10896dc1e9978475 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Thu, 25 Jun 2026 16:22:53 +0000
Subject: [PATCH 12/18] fix: guard against non-Element nodes in
 MutationObserver callback

---
 Reddit Multi Column.user.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/Reddit Multi Column.user.js b/Reddit Multi Column.user.js
index 9c345ff..e3e5a8d 100644
--- a/Reddit Multi Column.user.js	
+++ b/Reddit Multi Column.user.js	
@@ -305,7 +305,7 @@
         const hasStructuralChange = mutations.some(m => {
             if (m.type === 'childList') return true;
             // Ignore attribute changes on elements we've positioned
-            if (m.type === 'attributes' && m.target && m.target.dataset && m.target.dataset.rmcKey) return false;
+            if (m.type === 'attributes' && m.target instanceof Element && m.target.dataset.rmcKey) return false;
             return true;
         });
         if (!hasStructuralChange) return;

From 0aef7ab73eab63f4fc59a7328b98e5cfaae9225e Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Thu, 25 Jun 2026 16:39:34 +0000
Subject: [PATCH 13/18] re-architect reddit multi-column to use CSS
 column-count instead of JS absolute positioning

Eliminates all offsetHeight reads, ResizeObserver feedback loops, and
MutationObserver cascades that caused freezing. The browser's native
CSS column engine now handles all layout work.
---
 Reddit Multi Column.user.js | 477 +++++++++++-------------------------
 js/reddit-multi-column.js   | 453 +++++++++++-----------------------
 2 files changed, 288 insertions(+), 642 deletions(-)

diff --git a/Reddit Multi Column.user.js b/Reddit Multi Column.user.js
index e3e5a8d..ee3d13f 100644
--- a/Reddit Multi Column.user.js	
+++ b/Reddit Multi Column.user.js	
@@ -1,7 +1,7 @@
 // ==UserScript==
 // @name         Reddit Multi Column
 // @namespace    https://gist.github.com/c6p/463892bb243f611f2a3cfa4268c6435e
-// @version      0.5.0
+// @version      1.0.0
 // @description  Multi column layout for reddit redesign (with SPA nav support)
 // @author       Can Altıparmak
 // @homepageURL  https://gist.github.com/c6p/463892bb243f611f2a3cfa4268c6435e
@@ -18,24 +18,18 @@
 
     if (!/(^|\.)reddit\.com$/.test(location.hostname)) return;
 
-    const MIN_WIDTH = 400;
-    const COLUMNS = 4;
-
+    // ── Configuration ─────────────────────────────────────────────────────
+    const MIN_COL_WIDTH = 400;
     const HGAP = 17;
     const VGAP = 12;
 
-    // Selectors for actual post items that should be laid out in columns.
-    // IMPORTANT: faceplate-partial is NOT included here — it is Reddit's
-    // lazy-load sentinel and must remain in normal document flow so that
-    // IntersectionObserver can trigger infinite scroll loading.
-    const POST_ITEM_SELECTOR = 'article, shreddit-post, shreddit-ad-post';
-
-    let columns = COLUMNS;
-    let cleanup = false;
-
-    let parent = null;
+    // ── State ─────────────────────────────────────────────────────────────
     let currentPath = location.pathname;
+    let active = false;       // true when multi-column CSS is applied
+    let currentCols = 0;      // last column-count we set
+    let cleanup = false;      // true → non-card view, disable multi-column
 
+    // ── View-mode detection ───────────────────────────────────────────────
     const cardIcon = () => {
         const selectors = [
             'shreddit-sort-dropdown[header-text="View"]',
@@ -51,66 +45,77 @@
         }
         return undefined;
     };
-    const shouldClean = (icon) => icon === undefined ? false : icon.getAttribute('icon-name') !== "view-card-outline";
+    const shouldClean = (icon) =>
+        icon === undefined ? false : icon.getAttribute('icon-name') !== "view-card-outline";
 
-    let postMap = new Map();
-    let nextSyntheticId = 0;
-
-    const indexOfSmallest = function (a) {
-        let lowest = 0;
-        for (let i = 1; i < a.length; i++) {
-            if (a[i] < (a[lowest] - 1)) lowest = i;
-        }
-        return lowest;
-    };
+    // ── CSS injection ─────────────────────────────────────────────────────
+    // The entire multi-column layout is handled by the browser's native CSS
+    // column engine.  Zero JS height reads, zero absolute positioning, zero
+    // reflow loops.
 
-    const stableKey = function(el) {
-        if (el.dataset.rmcId) return el.dataset.rmcId;
-        const candidate =
-            el.getAttribute('aria-label') ||
-            el.getAttribute('id') ||
-            el.getAttribute('data-testid') ||
-            el.getAttribute('data-fullname') ||
-            el.getAttribute('data-post-id') ||
-            el.querySelector('[data-post-id]')?.getAttribute('data-post-id') ||
-            el.querySelector('a[href*="/comments/"]')?.getAttribute('href');
-        if (candidate) {
-            el.dataset.rmcId = candidate;
-            return candidate;
-        }
-        const synth = `rmc-synth-${nextSyntheticId++}`;
-        el.dataset.rmcId = synth;
-        return synth;
-    };
-
-    const injectResetStyles = function() {
-        if (document.getElementById('rmc-margin-reset')) return;
+    const injectStyles = function() {
+        if (document.getElementById('rmc-styles')) return;
         const style = document.createElement('style');
-        style.id = 'rmc-margin-reset';
+        style.id = 'rmc-styles';
         style.textContent = `
+            /* ── Widen the content area ───────────────────────────── */
             main {
+                max-width: 100% !important;
                 padding-left: 0 !important;
                 padding-right: 0 !important;
             }
             div.subgrid-container {
+                max-width: 100% !important;
+                width: 100% !important;
                 padding-left: 0 !important;
                 padding-right: 0 !important;
             }
-            shreddit-feed {
-                padding: 0 !important;
+            #right-sidebar-container {
+                display: none !important;
+            }
+
+            /* ── Feed becomes a CSS-column container ─────────────── */
+            shreddit-feed.rmc-active {
+                display: block !important;
+                padding: ${VGAP}px ${HGAP}px !important;
                 margin: 0 !important;
                 box-sizing: border-box !important;
-                display: block !important;
+                column-gap: ${HGAP}px !important;
             }
-            shreddit-feed > article,
-            shreddit-feed > shreddit-post,
-            shreddit-feed > shreddit-ad-post,
-            shreddit-feed > faceplate-batch > article,
-            shreddit-feed > faceplate-batch > shreddit-post,
-            shreddit-feed > faceplate-batch > shreddit-ad-post {
-                margin: 0 !important;
+
+            /* faceplate-batch wraps groups of posts; make it
+               transparent to the column layout so individual posts
+               flow independently across columns. */
+            shreddit-feed.rmc-active > faceplate-batch {
+                display: contents !important;
+            }
+
+            /* Individual posts: avoid breaking mid-post */
+            shreddit-feed.rmc-active > article,
+            shreddit-feed.rmc-active > shreddit-post,
+            shreddit-feed.rmc-active > shreddit-ad-post,
+            shreddit-feed.rmc-active > faceplate-batch > article,
+            shreddit-feed.rmc-active > faceplate-batch > shreddit-post,
+            shreddit-feed.rmc-active > faceplate-batch > shreddit-ad-post {
+                break-inside: avoid !important;
+                margin-bottom: ${VGAP}px !important;
+                margin-top: 0 !important;
+                margin-left: 0 !important;
+                margin-right: 0 !important;
                 box-sizing: border-box !important;
+                overflow: hidden !important;
+            }
+
+            /* Lazy-load sentinels span all columns so Reddit's
+               IntersectionObserver still fires when the user scrolls
+               to the bottom.  column-span:all forces a column break
+               before/after, keeping batches above independent. */
+            shreddit-feed.rmc-active > faceplate-partial {
+                break-inside: avoid !important;
+                column-span: all !important;
             }
+
+            /* Custom feed header */
             custom-feed-header {
                 display: block !important;
                 margin-left: 25px !important;
@@ -120,26 +125,7 @@
         (document.head || document.documentElement).appendChild(style);
     };
 
-    // --- Per-article size tracking -----------------------------------------
-    let inLayout = false;
-    let layoutCooldown = 0; // timestamp until which observer-triggered layouts are suppressed
-    const LAYOUT_COOLDOWN_MS = 200;
-
-    const resizeObserver = new ResizeObserver(() => {
-        if (inLayout) return;
-        if (performance.now() < layoutCooldown) return;
-        requestLayout();
-    });
-    const observedArticles = new WeakSet();
-
-    const observeArticleSize = function(article) {
-        if (observedArticles.has(article)) return;
-        observedArticles.add(article);
-        resizeObserver.observe(article);
-    };
-
-    // --- Layout ------------------------------------------------------------
-
+    // ── Width-constraint stripping ────────────────────────────────────────
     const stripWidthConstraints = function(el) {
         if (!el) return;
         const toRemove = [...el.classList].filter(
@@ -148,272 +134,111 @@
         if (toRemove.length) el.classList.remove(...toRemove);
     };
 
-    const makeLayout = function() {
-        if (cleanup) return;
-        if (!parent || !parent.isConnected) return;
-
-        inLayout = true;
-        try {
-        if (parent.style.position !== "relative") {
-            const main = document.querySelector("main");
-            if (main) main.style.maxWidth = "100%";
-            const mainContainer = document.querySelector("div.main-container");
-            if (mainContainer) {
-                mainContainer.className = [...mainContainer.classList].filter(c => !c.includes(":grid-cols-")).join(" ");
-            }
-            const subgrid = document.querySelector("div.subgrid-container");
-            stripWidthConstraints(subgrid);
-            if (subgrid) {
-                subgrid.style.maxWidth = "100%";
-                subgrid.style.width = "100%";
-            }
-            const sidebar = document.getElementById("right-sidebar-container");
-            if (sidebar) sidebar.style.display = "none";
-            parent.style.position = "relative";
-        }
-
-        const containerWidth = parent.clientWidth;
-
-        columns = Math.max(1, Math.floor((containerWidth - HGAP) / (MIN_WIDTH + HGAP)));
-
-        const totalHGapPx = HGAP * (columns + 1);
-        const colWidthPx = (containerWidth - totalHGapPx) / columns;
-
-        // Only select actual post items — NOT faceplate-partial (lazy-load sentinels)
-        const nodes = [...parent.querySelectorAll(POST_ITEM_SELECTOR)];
+    // ── Column-count calculation ──────────────────────────────────────────
+    // This is the ONLY layout work JS does — one style write per resize.
 
-        // Filter to only direct layout items (skip deeply nested elements)
-        const layoutNodes = nodes.filter(n => {
-            let p = n.parentNode;
-            while (p && p !== parent) {
-                const tag = p.tagName ? p.tagName.toLowerCase() : '';
-                if (tag === 'faceplate-batch') {
-                    p = p.parentNode;
-                    continue;
-                }
-                break;
-            }
-            return p === parent;
-        });
-
-        // Reset postMap to only contain currently-visible items.
-        // This prevents stale entries from removed posts affecting layout.
-        const currentKeys = new Set();
-        for (const article of layoutNodes) {
-            const key = stableKey(article);
-            currentKeys.add(key);
-            observeArticleSize(article);
-
-            const h = article.offsetHeight;
-            if (postMap.has(key)) {
-                const post = postMap.get(key);
-                if (post.height !== h) post.height = h;
-            } else {
-                postMap.set(key, { height: h, col: 0, top: 0 });
-            }
-        }
+    const updateColumnCount = function() {
+        const feed = document.querySelector('shreddit-feed');
+        if (!feed) return;
 
-        // Remove entries that are no longer in the DOM
-        for (const key of postMap.keys()) {
-            if (!currentKeys.has(key)) postMap.delete(key);
-        }
-
-        let tops = Array(columns).fill(VGAP);
-        for (const post of postMap.values()) {
-            post.col = indexOfSmallest(tops);
-            post.top = tops[post.col];
-            tops[post.col] += post.height + VGAP;
-        }
-
-        const height = Math.max(...tops);
-        if (height > VGAP) {
-            parent.style.height = height + "px";
-        }
-
-        for (const article of layoutNodes) {
-            const key = stableKey(article);
-            const entry = postMap.get(key) ?? { col: 0, top: tops[0] };
-            const leftPx = HGAP + entry.col * (colWidthPx + HGAP);
-            const layoutKey = `${colWidthPx.toFixed(2)}|${entry.top}|${leftPx.toFixed(2)}`;
-            if (article.dataset.rmcKey === layoutKey) continue;
-            article.dataset.rmcKey = layoutKey;
-            article.style.position = 'absolute';
-            article.style.width = colWidthPx + 'px';
-            article.style.top = entry.top + 'px';
-            article.style.left = leftPx + 'px';
-            article.style.margin = '0';
+        if (cleanup) {
+            if (active) deactivateFeed(feed);
+            return;
         }
 
-        // Ensure faceplate-partial (lazy-load sentinels) and faceplate-batch
-        // wrappers are positioned at the bottom of the container so that
-        // scrolling triggers Reddit's IntersectionObserver for infinite scroll.
-        let bottomOffset = height;
-        for (const partial of parent.querySelectorAll(':scope > faceplate-partial, :scope > faceplate-batch')) {
-            partial.style.position = 'absolute';
-            partial.style.top = bottomOffset + 'px';
-            partial.style.left = '0';
-            partial.style.width = '100%';
-            partial.style.height = 'auto';
-            const partialH = partial.offsetHeight || 100;
-            bottomOffset += partialH;
-        }
-        if (bottomOffset > height) {
-            parent.style.height = bottomOffset + 'px';
+        // One-time ancestor adjustments
+        if (!active) {
+            const mainContainer = document.querySelector('div.main-container');
+            if (mainContainer) {
+                mainContainer.className = [...mainContainer.classList]
+                    .filter(c => !c.includes(':grid-cols-')).join(' ');
+            }
+            const subgrid = document.querySelector('div.subgrid-container');
+            stripWidthConstraints(subgrid);
+            feed.classList.add('rmc-active');
+            active = true;
         }
 
-        } finally {
-            inLayout = false;
-            layoutCooldown = performance.now() + LAYOUT_COOLDOWN_MS;
+        const width = feed.clientWidth || window.innerWidth;
+        const cols = Math.max(1, Math.floor((width + HGAP) / (MIN_COL_WIDTH + HGAP)));
+        if (cols !== currentCols) {
+            currentCols = cols;
+            feed.style.columnCount = String(cols);
         }
     };
 
-    const vv = window.visualViewport;
-    const isVvZoomedIn = () => vv ? vv.scale > 1.01 : false;
-
-    let layoutScheduled = false;
-    let lastLayoutTime = 0;
-    const MIN_LAYOUT_INTERVAL = 50; // minimum ms between layouts
-
-    function requestLayout() {
-        if (isVvZoomedIn()) return;
-        if (layoutScheduled) return;
-        layoutScheduled = true;
-        requestAnimationFrame(() => {
-            layoutScheduled = false;
-            const now = performance.now();
-            if (now - lastLayoutTime < MIN_LAYOUT_INTERVAL) return;
-            lastLayoutTime = now;
-            makeLayout();
-        });
-    }
-
-    const setLayout = function(changes, observer) {
-        const c = shouldClean(cardIcon());
-        if (c !== cleanup) {
-            cleanup = c;
-            requestLayout();
+    const deactivateFeed = function(feed) {
+        if (!feed) feed = document.querySelector('shreddit-feed');
+        if (feed) {
+            feed.classList.remove('rmc-active');
+            feed.style.columnCount = '';
         }
+        active = false;
+        currentCols = 0;
     };
 
-    let pageChangeTimer = null;
-    const pageChange = new MutationObserver((mutations) => {
-        if (inLayout) return;
-        if (performance.now() < layoutCooldown) return;
-
-        // Only react to structural changes (new/removed nodes), not our own
-        // style or attribute modifications on positioned articles.
-        const hasStructuralChange = mutations.some(m => {
-            if (m.type === 'childList') return true;
-            // Ignore attribute changes on elements we've positioned
-            if (m.type === 'attributes' && m.target instanceof Element && m.target.dataset.rmcKey) return false;
-            return true;
+    // ── Resize handling (debounced via rAF) ────────────────────────────────
+    let resizeRaf = 0;
+    window.addEventListener('resize', () => {
+        if (resizeRaf) return;
+        resizeRaf = requestAnimationFrame(() => {
+            resizeRaf = 0;
+            updateColumnCount();
         });
-        if (!hasStructuralChange) return;
-
-        if (pageChangeTimer) clearTimeout(pageChangeTimer);
-        pageChangeTimer = setTimeout(() => {
-            pageChangeTimer = null;
-            requestLayout();
-        }, 150);
     });
-    const layoutSwitch = new MutationObserver(setLayout);
 
-    window.addEventListener('resize', requestLayout);
+    // ── Feed discovery & activation ───────────────────────────────────────
+    let feedObserver = null;
 
-    const disconnectPageObservers = function() {
-        pageChange.disconnect();
-        layoutSwitch.disconnect();
+    const tryActivate = function() {
+        const feed = document.querySelector('shreddit-feed');
+        if (!feed) return false;
+        injectStyles();
+        updateColumnCount();
+        return true;
     };
 
-    // --- Feed container discovery ------------------------------------------
-    const findParentStrategies = [
-        () => document.querySelector('shreddit-feed'),
-        () => {
-            const anchor = document.querySelector('article + hr + faceplate-partial');
-            return anchor ? anchor.parentNode : null;
-        },
-        () => {
-            const first = document.querySelector('main article');
-            if (!first) return null;
-            let el = first.parentNode;
-            while (el && el !== document.body) {
-                if (el.querySelectorAll(':scope > article, :scope > shreddit-post').length >= 2) return el;
-                if (el.querySelectorAll('article, shreddit-post').length >= 2) return el;
-                el = el.parentNode;
+    // Watch for the feed element to appear (SPA navigation, lazy render).
+    // Uses a single MutationObserver on document.body — lightweight because
+    // it only watches childList (not attributes or subtree characterData).
+    const waitForFeed = function() {
+        if (tryActivate()) return;
+        if (feedObserver) return; // already watching
+        feedObserver = new MutationObserver(() => {
+            if (tryActivate()) {
+                feedObserver.disconnect();
+                feedObserver = null;
             }
-            return null;
-        },
-    ];
-
-    const findParent = function() {
-        for (const strategy of findParentStrategies) {
-            try {
-                const result = strategy();
-                if (result) return result;
-            } catch (_) { /* strategy failed, try next */ }
-        }
-        return null;
+        });
+        feedObserver.observe(document.body, { childList: true, subtree: true });
     };
 
-    let searchDeadline = 0;
-    let searching = false;
-
-    const searchForFeed = function() {
-        const found = findParent();
-        if (found && found !== parent) {
-            parent = found;
-            parent.style.position = "";
-            parent.style.height = "";
-            postMap = new Map();
-            nextSyntheticId = 0;
-            resizeObserver.disconnect();
-            disconnectPageObservers();
-
-            pageChange.observe(parent, { childList: true, subtree: true, attributes: false });
-
-            const icon = cardIcon();
-            if (icon) {
-                layoutSwitch.observe(icon, { attributes: true });
-            }
-
-            requestLayout();
-            searching = false;
-            return;
-        }
-
-        if (found && found === parent) {
-            requestLayout();
-            searching = false;
-            return;
-        }
-
-        if (performance.now() < searchDeadline) {
-            requestAnimationFrame(searchForFeed);
-        } else {
-            searching = false;
+    // ── View-mode observer ────────────────────────────────────────────────
+    const layoutSwitch = new MutationObserver(() => {
+        const c = shouldClean(cardIcon());
+        if (c !== cleanup) {
+            cleanup = c;
+            updateColumnCount();
         }
-    };
+    });
 
-    const scheduleFeedSearch = function(budgetMs = 8000) {
-        searchDeadline = performance.now() + budgetMs;
-        if (!searching) {
-            searching = true;
-            requestAnimationFrame(searchForFeed);
-        }
+    const observeViewMode = function() {
+        const icon = cardIcon();
+        if (icon) layoutSwitch.observe(icon, { attributes: true });
     };
 
+    // ── SPA navigation handling ───────────────────────────────────────────
     const onNavigate = function() {
         const pathChanged = location.pathname !== currentPath;
         currentPath = location.pathname;
 
         if (pathChanged) {
-            parent = null;
-            disconnectPageObservers();
-        }
-        if (!parent || !parent.isConnected) {
-            parent = null;
+            deactivateFeed();
+            layoutSwitch.disconnect();
         }
-        scheduleFeedSearch();
+
+        waitForFeed();
+        observeViewMode();
     };
 
     const patchHistory = function() {
@@ -435,14 +260,13 @@
         window.addEventListener('reddit-mc:locationchange', onNavigate);
     };
 
+    // Fallback: detect navigation via shreddit-app attribute changes
     const appObserver = new MutationObserver(() => {
-        if (location.pathname !== currentPath) {
-            onNavigate();
-        }
+        if (location.pathname !== currentPath) onNavigate();
     });
 
     const observeApp = function() {
-        const app = document.querySelector("shreddit-app");
+        const app = document.querySelector('shreddit-app');
         if (!app) {
             setTimeout(observeApp, 100);
             return;
@@ -450,26 +274,13 @@
         appObserver.observe(app, { attributes: true });
     };
 
-    let safetyNetTimer = null;
-    const domSafetyNet = new MutationObserver(() => {
-        if (!parent || !parent.isConnected) {
-            if (safetyNetTimer) return;
-            safetyNetTimer = setTimeout(() => {
-                safetyNetTimer = null;
-                if (!parent || !parent.isConnected) {
-                    scheduleFeedSearch(2000);
-                }
-            }, 500);
-        }
-    });
-
+    // ── Entry point ───────────────────────────────────────────────────────
     const start = function() {
-        injectResetStyles();
+        injectStyles();
         patchHistory();
         observeApp();
-        const main = document.querySelector("main") || document.body;
-        domSafetyNet.observe(main, { childList: true, subtree: true });
-        scheduleFeedSearch();
+        observeViewMode();
+        waitForFeed();
     };
 
     if (document.body) {
diff --git a/js/reddit-multi-column.js b/js/reddit-multi-column.js
index 71b04d9..d587722 100644
--- a/js/reddit-multi-column.js
+++ b/js/reddit-multi-column.js
@@ -3,24 +3,18 @@
 
     if (!/(^|\.)reddit\.com$/.test(location.hostname)) return;
 
-    const MIN_WIDTH = 400;
-    const COLUMNS = 4;
-
+    // ── Configuration ─────────────────────────────────────────────────────
+    const MIN_COL_WIDTH = 400;
     const HGAP = 17;
     const VGAP = 12;
 
-    // Selectors for actual post items that should be laid out in columns.
-    // IMPORTANT: faceplate-partial is NOT included here — it is Reddit's
-    // lazy-load sentinel and must remain in normal document flow so that
-    // IntersectionObserver can trigger infinite scroll loading.
-    const POST_ITEM_SELECTOR = 'article, shreddit-post, shreddit-ad-post';
-
-    let columns = COLUMNS;
-    let cleanup = false;
-
-    let parent = null;
+    // ── State ─────────────────────────────────────────────────────────────
     let currentPath = location.pathname;
+    let active = false;       // true when multi-column CSS is applied
+    let currentCols = 0;      // last column-count we set
+    let cleanup = false;      // true → non-card view, disable multi-column
 
+    // ── View-mode detection ───────────────────────────────────────────────
     const cardIcon = () => {
         const selectors = [
             'shreddit-sort-dropdown[header-text="View"]',
@@ -36,66 +30,77 @@
         }
         return undefined;
     };
-    const shouldClean = (icon) => icon === undefined ? false : icon.getAttribute('icon-name') !== "view-card-outline";
-
-    let postMap = new Map();
-    let nextSyntheticId = 0;
-
-    const indexOfSmallest = function (a) {
-        let lowest = 0;
-        for (let i = 1; i < a.length; i++) {
-            if (a[i] < (a[lowest] - 1)) lowest = i;
-        }
-        return lowest;
-    };
+    const shouldClean = (icon) =>
+        icon === undefined ? false : icon.getAttribute('icon-name') !== "view-card-outline";
 
-    const stableKey = function(el) {
-        if (el.dataset.rmcId) return el.dataset.rmcId;
-        const candidate =
-            el.getAttribute('aria-label') ||
-            el.getAttribute('id') ||
-            el.getAttribute('data-testid') ||
-            el.getAttribute('data-fullname') ||
-            el.getAttribute('data-post-id') ||
-            el.querySelector('[data-post-id]')?.getAttribute('data-post-id') ||
-            el.querySelector('a[href*="/comments/"]')?.getAttribute('href');
-        if (candidate) {
-            el.dataset.rmcId = candidate;
-            return candidate;
-        }
-        const synth = `rmc-synth-${nextSyntheticId++}`;
-        el.dataset.rmcId = synth;
-        return synth;
-    };
+    // ── CSS injection ─────────────────────────────────────────────────────
+    // The entire multi-column layout is handled by the browser's native CSS
+    // column engine.  Zero JS height reads, zero absolute positioning, zero
+    // reflow loops.
 
-    const injectResetStyles = function() {
-        if (document.getElementById('rmc-margin-reset')) return;
+    const injectStyles = function() {
+        if (document.getElementById('rmc-styles')) return;
         const style = document.createElement('style');
-        style.id = 'rmc-margin-reset';
+        style.id = 'rmc-styles';
         style.textContent = `
+            /* ── Widen the content area ───────────────────────────── */
             main {
+                max-width: 100% !important;
                 padding-left: 0 !important;
                 padding-right: 0 !important;
             }
             div.subgrid-container {
+                max-width: 100% !important;
+                width: 100% !important;
                 padding-left: 0 !important;
                 padding-right: 0 !important;
             }
-            shreddit-feed {
-                padding: 0 !important;
+            #right-sidebar-container {
+                display: none !important;
+            }
+
+            /* ── Feed becomes a CSS-column container ─────────────── */
+            shreddit-feed.rmc-active {
+                display: block !important;
+                padding: ${VGAP}px ${HGAP}px !important;
                 margin: 0 !important;
                 box-sizing: border-box !important;
-                display: block !important;
+                column-gap: ${HGAP}px !important;
             }
-            shreddit-feed > article,
-            shreddit-feed > shreddit-post,
-            shreddit-feed > shreddit-ad-post,
-            shreddit-feed > faceplate-batch > article,
-            shreddit-feed > faceplate-batch > shreddit-post,
-            shreddit-feed > faceplate-batch > shreddit-ad-post {
-                margin: 0 !important;
+
+            /* faceplate-batch wraps groups of posts; make it
+               transparent to the column layout so individual posts
+               flow independently across columns. */
+            shreddit-feed.rmc-active > faceplate-batch {
+                display: contents !important;
+            }
+
+            /* Individual posts: avoid breaking mid-post */
+            shreddit-feed.rmc-active > article,
+            shreddit-feed.rmc-active > shreddit-post,
+            shreddit-feed.rmc-active > shreddit-ad-post,
+            shreddit-feed.rmc-active > faceplate-batch > article,
+            shreddit-feed.rmc-active > faceplate-batch > shreddit-post,
+            shreddit-feed.rmc-active > faceplate-batch > shreddit-ad-post {
+                break-inside: avoid !important;
+                margin-bottom: ${VGAP}px !important;
+                margin-top: 0 !important;
+                margin-left: 0 !important;
+                margin-right: 0 !important;
                 box-sizing: border-box !important;
+                overflow: hidden !important;
             }
+
+            /* Lazy-load sentinels span all columns so Reddit's
+               IntersectionObserver still fires when the user scrolls
+               to the bottom.  column-span:all forces a column break
+               before/after, keeping batches above independent. */
+            shreddit-feed.rmc-active > faceplate-partial {
+                break-inside: avoid !important;
+                column-span: all !important;
+            }
+
+            /* Custom feed header */
             custom-feed-header {
                 display: block !important;
                 margin-left: 25px !important;
@@ -105,22 +110,7 @@
         (document.head || document.documentElement).appendChild(style);
     };
 
-    // --- Per-article size tracking -----------------------------------------
-    let inLayout = false;
-    const resizeObserver = new ResizeObserver(() => {
-        if (inLayout) return;
-        requestLayout();
-    });
-    const observedArticles = new WeakSet();
-
-    const observeArticleSize = function(article) {
-        if (observedArticles.has(article)) return;
-        observedArticles.add(article);
-        resizeObserver.observe(article);
-    };
-
-    // --- Layout ------------------------------------------------------------
-
+    // ── Width-constraint stripping ────────────────────────────────────────
     const stripWidthConstraints = function(el) {
         if (!el) return;
         const toRemove = [...el.classList].filter(
@@ -129,252 +119,111 @@
         if (toRemove.length) el.classList.remove(...toRemove);
     };
 
-    const makeLayout = function() {
-        if (cleanup) return;
-        if (!parent || !parent.isConnected) return;
-
-        inLayout = true;
-        try {
-        if (parent.style.position !== "relative") {
-            const main = document.querySelector("main");
-            if (main) main.style.maxWidth = "100%";
-            const mainContainer = document.querySelector("div.main-container");
-            if (mainContainer) {
-                mainContainer.className = [...mainContainer.classList].filter(c => !c.includes(":grid-cols-")).join(" ");
-            }
-            const subgrid = document.querySelector("div.subgrid-container");
-            stripWidthConstraints(subgrid);
-            if (subgrid) {
-                subgrid.style.maxWidth = "100%";
-                subgrid.style.width = "100%";
-            }
-            const sidebar = document.getElementById("right-sidebar-container");
-            if (sidebar) sidebar.style.display = "none";
-            parent.style.position = "relative";
-        }
-
-        const containerWidth = parent.clientWidth;
-
-        columns = Math.max(1, Math.floor((containerWidth - HGAP) / (MIN_WIDTH + HGAP)));
-
-        const totalHGapPx = HGAP * (columns + 1);
-        const colWidthPx = (containerWidth - totalHGapPx) / columns;
-
-        // Only select actual post items — NOT faceplate-partial (lazy-load sentinels)
-        const nodes = [...parent.querySelectorAll(POST_ITEM_SELECTOR)];
-
-        // Filter to only direct layout items (skip deeply nested elements)
-        const layoutNodes = nodes.filter(n => {
-            let p = n.parentNode;
-            while (p && p !== parent) {
-                const tag = p.tagName ? p.tagName.toLowerCase() : '';
-                if (tag === 'faceplate-batch') {
-                    p = p.parentNode;
-                    continue;
-                }
-                break;
-            }
-            return p === parent;
-        });
-
-        // Reset postMap to only contain currently-visible items.
-        // This prevents stale entries from removed posts affecting layout.
-        const currentKeys = new Set();
-        for (const article of layoutNodes) {
-            const key = stableKey(article);
-            currentKeys.add(key);
-            observeArticleSize(article);
-
-            const h = article.offsetHeight;
-            if (postMap.has(key)) {
-                const post = postMap.get(key);
-                if (post.height !== h) post.height = h;
-            } else {
-                postMap.set(key, { height: h, col: 0, top: 0 });
-            }
-        }
-
-        // Remove entries that are no longer in the DOM
-        for (const key of postMap.keys()) {
-            if (!currentKeys.has(key)) postMap.delete(key);
-        }
-
-        let tops = Array(columns).fill(VGAP);
-        for (const post of postMap.values()) {
-            post.col = indexOfSmallest(tops);
-            post.top = tops[post.col];
-            tops[post.col] += post.height + VGAP;
-        }
+    // ── Column-count calculation ──────────────────────────────────────────
+    // This is the ONLY layout work JS does — one style write per resize.
 
-        const height = Math.max(...tops);
-        if (height > VGAP) {
-            parent.style.height = height + "px";
-        }
+    const updateColumnCount = function() {
+        const feed = document.querySelector('shreddit-feed');
+        if (!feed) return;
 
-        for (const article of layoutNodes) {
-            const key = stableKey(article);
-            const entry = postMap.get(key) ?? { col: 0, top: tops[0] };
-            const leftPx = HGAP + entry.col * (colWidthPx + HGAP);
-            const layoutKey = `${colWidthPx.toFixed(2)}|${entry.top}|${leftPx.toFixed(2)}`;
-            if (article.dataset.rmcKey === layoutKey) continue;
-            article.dataset.rmcKey = layoutKey;
-            article.style.position = 'absolute';
-            article.style.width = colWidthPx + 'px';
-            article.style.top = entry.top + 'px';
-            article.style.left = leftPx + 'px';
-            article.style.margin = '0';
+        if (cleanup) {
+            if (active) deactivateFeed(feed);
+            return;
         }
 
-        // Ensure faceplate-partial (lazy-load sentinels) and faceplate-batch
-        // wrappers are positioned at the bottom of the container so that
-        // scrolling triggers Reddit's IntersectionObserver for infinite scroll.
-        let bottomOffset = height;
-        for (const partial of parent.querySelectorAll(':scope > faceplate-partial, :scope > faceplate-batch')) {
-            partial.style.position = 'absolute';
-            partial.style.top = bottomOffset + 'px';
-            partial.style.left = '0';
-            partial.style.width = '100%';
-            partial.style.height = 'auto';
-            const partialH = partial.offsetHeight || 100;
-            bottomOffset += partialH;
-        }
-        if (bottomOffset > height) {
-            parent.style.height = bottomOffset + 'px';
+        // One-time ancestor adjustments
+        if (!active) {
+            const mainContainer = document.querySelector('div.main-container');
+            if (mainContainer) {
+                mainContainer.className = [...mainContainer.classList]
+                    .filter(c => !c.includes(':grid-cols-')).join(' ');
+            }
+            const subgrid = document.querySelector('div.subgrid-container');
+            stripWidthConstraints(subgrid);
+            feed.classList.add('rmc-active');
+            active = true;
         }
 
-        } finally {
-            inLayout = false;
+        const width = feed.clientWidth || window.innerWidth;
+        const cols = Math.max(1, Math.floor((width + HGAP) / (MIN_COL_WIDTH + HGAP)));
+        if (cols !== currentCols) {
+            currentCols = cols;
+            feed.style.columnCount = String(cols);
         }
     };
 
-    const vv = window.visualViewport;
-    const isVvZoomedIn = () => vv ? vv.scale > 1.01 : false;
-
-    let layoutScheduled = false;
-    function requestLayout() {
-        if (isVvZoomedIn()) return;
-        if (layoutScheduled) return;
-        layoutScheduled = true;
-        requestAnimationFrame(() => {
-            layoutScheduled = false;
-            makeLayout();
-        });
-    }
-
-    const setLayout = function(changes, observer) {
-        const c = shouldClean(cardIcon());
-        if (c !== cleanup) {
-            cleanup = c;
-            requestLayout();
+    const deactivateFeed = function(feed) {
+        if (!feed) feed = document.querySelector('shreddit-feed');
+        if (feed) {
+            feed.classList.remove('rmc-active');
+            feed.style.columnCount = '';
         }
+        active = false;
+        currentCols = 0;
     };
 
-    let pageChangeTimer = null;
-    const pageChange = new MutationObserver(() => {
-        if (pageChangeTimer) clearTimeout(pageChangeTimer);
-        pageChangeTimer = setTimeout(() => {
-            pageChangeTimer = null;
-            requestLayout();
-        }, 100);
+    // ── Resize handling (debounced via rAF) ────────────────────────────────
+    let resizeRaf = 0;
+    window.addEventListener('resize', () => {
+        if (resizeRaf) return;
+        resizeRaf = requestAnimationFrame(() => {
+            resizeRaf = 0;
+            updateColumnCount();
+        });
     });
-    const layoutSwitch = new MutationObserver(setLayout);
 
-    window.addEventListener('resize', requestLayout);
+    // ── Feed discovery & activation ───────────────────────────────────────
+    let feedObserver = null;
 
-    const disconnectPageObservers = function() {
-        pageChange.disconnect();
-        layoutSwitch.disconnect();
+    const tryActivate = function() {
+        const feed = document.querySelector('shreddit-feed');
+        if (!feed) return false;
+        injectStyles();
+        updateColumnCount();
+        return true;
     };
 
-    // --- Feed container discovery ------------------------------------------
-    const findParentStrategies = [
-        () => document.querySelector('shreddit-feed'),
-        () => {
-            const anchor = document.querySelector('article + hr + faceplate-partial');
-            return anchor ? anchor.parentNode : null;
-        },
-        () => {
-            const first = document.querySelector('main article');
-            if (!first) return null;
-            let el = first.parentNode;
-            while (el && el !== document.body) {
-                if (el.querySelectorAll(':scope > article, :scope > shreddit-post').length >= 2) return el;
-                if (el.querySelectorAll('article, shreddit-post').length >= 2) return el;
-                el = el.parentNode;
+    // Watch for the feed element to appear (SPA navigation, lazy render).
+    // Uses a single MutationObserver on document.body — lightweight because
+    // it only watches childList (not attributes or subtree characterData).
+    const waitForFeed = function() {
+        if (tryActivate()) return;
+        if (feedObserver) return; // already watching
+        feedObserver = new MutationObserver(() => {
+            if (tryActivate()) {
+                feedObserver.disconnect();
+                feedObserver = null;
             }
-            return null;
-        },
-    ];
-
-    const findParent = function() {
-        for (const strategy of findParentStrategies) {
-            try {
-                const result = strategy();
-                if (result) return result;
-            } catch (_) { /* strategy failed, try next */ }
-        }
-        return null;
+        });
+        feedObserver.observe(document.body, { childList: true, subtree: true });
     };
 
-    let searchDeadline = 0;
-    let searching = false;
-
-    const searchForFeed = function() {
-        const found = findParent();
-        if (found && found !== parent) {
-            parent = found;
-            parent.style.position = "";
-            parent.style.height = "";
-            postMap = new Map();
-            nextSyntheticId = 0;
-            resizeObserver.disconnect();
-            disconnectPageObservers();
-
-            pageChange.observe(parent, { childList: true, subtree: true });
-
-            const icon = cardIcon();
-            if (icon) {
-                layoutSwitch.observe(icon, { attributes: true });
-            }
-
-            requestLayout();
-            searching = false;
-            return;
-        }
-
-        if (found && found === parent) {
-            requestLayout();
-            searching = false;
-            return;
-        }
-
-        if (performance.now() < searchDeadline) {
-            requestAnimationFrame(searchForFeed);
-        } else {
-            searching = false;
+    // ── View-mode observer ────────────────────────────────────────────────
+    const layoutSwitch = new MutationObserver(() => {
+        const c = shouldClean(cardIcon());
+        if (c !== cleanup) {
+            cleanup = c;
+            updateColumnCount();
         }
-    };
+    });
 
-    const scheduleFeedSearch = function(budgetMs = 8000) {
-        searchDeadline = performance.now() + budgetMs;
-        if (!searching) {
-            searching = true;
-            requestAnimationFrame(searchForFeed);
-        }
+    const observeViewMode = function() {
+        const icon = cardIcon();
+        if (icon) layoutSwitch.observe(icon, { attributes: true });
     };
 
+    // ── SPA navigation handling ───────────────────────────────────────────
     const onNavigate = function() {
         const pathChanged = location.pathname !== currentPath;
         currentPath = location.pathname;
 
         if (pathChanged) {
-            parent = null;
-            disconnectPageObservers();
-        }
-        if (!parent || !parent.isConnected) {
-            parent = null;
+            deactivateFeed();
+            layoutSwitch.disconnect();
         }
-        scheduleFeedSearch();
+
+        waitForFeed();
+        observeViewMode();
     };
 
     const patchHistory = function() {
@@ -396,14 +245,13 @@
         window.addEventListener('reddit-mc:locationchange', onNavigate);
     };
 
+    // Fallback: detect navigation via shreddit-app attribute changes
     const appObserver = new MutationObserver(() => {
-        if (location.pathname !== currentPath) {
-            onNavigate();
-        }
+        if (location.pathname !== currentPath) onNavigate();
     });
 
     const observeApp = function() {
-        const app = document.querySelector("shreddit-app");
+        const app = document.querySelector('shreddit-app');
         if (!app) {
             setTimeout(observeApp, 100);
             return;
@@ -411,26 +259,13 @@
         appObserver.observe(app, { attributes: true });
     };
 
-    let safetyNetTimer = null;
-    const domSafetyNet = new MutationObserver(() => {
-        if (!parent || !parent.isConnected) {
-            if (safetyNetTimer) return;
-            safetyNetTimer = setTimeout(() => {
-                safetyNetTimer = null;
-                if (!parent || !parent.isConnected) {
-                    scheduleFeedSearch(2000);
-                }
-            }, 500);
-        }
-    });
-
+    // ── Entry point ───────────────────────────────────────────────────────
     const start = function() {
-        injectResetStyles();
+        injectStyles();
         patchHistory();
         observeApp();
-        const main = document.querySelector("main") || document.body;
-        domSafetyNet.observe(main, { childList: true, subtree: true });
-        scheduleFeedSearch();
+        observeViewMode();
+        waitForFeed();
     };
 
     if (document.body) {

From c31a2e22eda4a8ea3cbef26181f3cdc646312450 Mon Sep 17 00:00:00 2001
From: Florin <hey@florincatalin.com>
Date: Thu, 25 Jun 2026 12:53:38 -0700
Subject: [PATCH 14/18] Revert "Replace JS masonry layout with CSS column-count
 to fix freezing"

---
 Reddit Multi Column.user.js | 477 +++++++++++++++++++++++++-----------
 js/reddit-multi-column.js   | 453 +++++++++++++++++++++++-----------
 2 files changed, 642 insertions(+), 288 deletions(-)

diff --git a/Reddit Multi Column.user.js b/Reddit Multi Column.user.js
index ee3d13f..e3e5a8d 100644
--- a/Reddit Multi Column.user.js	
+++ b/Reddit Multi Column.user.js	
@@ -1,7 +1,7 @@
 // ==UserScript==
 // @name         Reddit Multi Column
 // @namespace    https://gist.github.com/c6p/463892bb243f611f2a3cfa4268c6435e
-// @version      1.0.0
+// @version      0.5.0
 // @description  Multi column layout for reddit redesign (with SPA nav support)
 // @author       Can Altıparmak
 // @homepageURL  https://gist.github.com/c6p/463892bb243f611f2a3cfa4268c6435e
@@ -18,18 +18,24 @@
 
     if (!/(^|\.)reddit\.com$/.test(location.hostname)) return;
 
-    // ── Configuration ─────────────────────────────────────────────────────
-    const MIN_COL_WIDTH = 400;
+    const MIN_WIDTH = 400;
+    const COLUMNS = 4;
+
     const HGAP = 17;
     const VGAP = 12;
 
-    // ── State ─────────────────────────────────────────────────────────────
+    // Selectors for actual post items that should be laid out in columns.
+    // IMPORTANT: faceplate-partial is NOT included here — it is Reddit's
+    // lazy-load sentinel and must remain in normal document flow so that
+    // IntersectionObserver can trigger infinite scroll loading.
+    const POST_ITEM_SELECTOR = 'article, shreddit-post, shreddit-ad-post';
+
+    let columns = COLUMNS;
+    let cleanup = false;
+
+    let parent = null;
     let currentPath = location.pathname;
-    let active = false;       // true when multi-column CSS is applied
-    let currentCols = 0;      // last column-count we set
-    let cleanup = false;      // true → non-card view, disable multi-column
 
-    // ── View-mode detection ───────────────────────────────────────────────
     const cardIcon = () => {
         const selectors = [
             'shreddit-sort-dropdown[header-text="View"]',
@@ -45,77 +51,66 @@
         }
         return undefined;
     };
-    const shouldClean = (icon) =>
-        icon === undefined ? false : icon.getAttribute('icon-name') !== "view-card-outline";
+    const shouldClean = (icon) => icon === undefined ? false : icon.getAttribute('icon-name') !== "view-card-outline";
 
-    // ── CSS injection ─────────────────────────────────────────────────────
-    // The entire multi-column layout is handled by the browser's native CSS
-    // column engine.  Zero JS height reads, zero absolute positioning, zero
-    // reflow loops.
+    let postMap = new Map();
+    let nextSyntheticId = 0;
+
+    const indexOfSmallest = function (a) {
+        let lowest = 0;
+        for (let i = 1; i < a.length; i++) {
+            if (a[i] < (a[lowest] - 1)) lowest = i;
+        }
+        return lowest;
+    };
 
-    const injectStyles = function() {
-        if (document.getElementById('rmc-styles')) return;
+    const stableKey = function(el) {
+        if (el.dataset.rmcId) return el.dataset.rmcId;
+        const candidate =
+            el.getAttribute('aria-label') ||
+            el.getAttribute('id') ||
+            el.getAttribute('data-testid') ||
+            el.getAttribute('data-fullname') ||
+            el.getAttribute('data-post-id') ||
+            el.querySelector('[data-post-id]')?.getAttribute('data-post-id') ||
+            el.querySelector('a[href*="/comments/"]')?.getAttribute('href');
+        if (candidate) {
+            el.dataset.rmcId = candidate;
+            return candidate;
+        }
+        const synth = `rmc-synth-${nextSyntheticId++}`;
+        el.dataset.rmcId = synth;
+        return synth;
+    };
+
+    const injectResetStyles = function() {
+        if (document.getElementById('rmc-margin-reset')) return;
         const style = document.createElement('style');
-        style.id = 'rmc-styles';
+        style.id = 'rmc-margin-reset';
         style.textContent = `
-            /* ── Widen the content area ───────────────────────────── */
             main {
-                max-width: 100% !important;
                 padding-left: 0 !important;
                 padding-right: 0 !important;
             }
             div.subgrid-container {
-                max-width: 100% !important;
-                width: 100% !important;
                 padding-left: 0 !important;
                 padding-right: 0 !important;
             }
-            #right-sidebar-container {
-                display: none !important;
-            }
-
-            /* ── Feed becomes a CSS-column container ─────────────── */
-            shreddit-feed.rmc-active {
-                display: block !important;
-                padding: ${VGAP}px ${HGAP}px !important;
+            shreddit-feed {
+                padding: 0 !important;
                 margin: 0 !important;
                 box-sizing: border-box !important;
-                column-gap: ${HGAP}px !important;
-            }
-
-            /* faceplate-batch wraps groups of posts; make it
-               transparent to the column layout so individual posts
-               flow independently across columns. */
-            shreddit-feed.rmc-active > faceplate-batch {
-                display: contents !important;
+                display: block !important;
             }
-
-            /* Individual posts: avoid breaking mid-post */
-            shreddit-feed.rmc-active > article,
-            shreddit-feed.rmc-active > shreddit-post,
-            shreddit-feed.rmc-active > shreddit-ad-post,
-            shreddit-feed.rmc-active > faceplate-batch > article,
-            shreddit-feed.rmc-active > faceplate-batch > shreddit-post,
-            shreddit-feed.rmc-active > faceplate-batch > shreddit-ad-post {
-                break-inside: avoid !important;
-                margin-bottom: ${VGAP}px !important;
-                margin-top: 0 !important;
-                margin-left: 0 !important;
-                margin-right: 0 !important;
+            shreddit-feed > article,
+            shreddit-feed > shreddit-post,
+            shreddit-feed > shreddit-ad-post,
+            shreddit-feed > faceplate-batch > article,
+            shreddit-feed > faceplate-batch > shreddit-post,
+            shreddit-feed > faceplate-batch > shreddit-ad-post {
+                margin: 0 !important;
                 box-sizing: border-box !important;
-                overflow: hidden !important;
-            }
-
-            /* Lazy-load sentinels span all columns so Reddit's
-               IntersectionObserver still fires when the user scrolls
-               to the bottom.  column-span:all forces a column break
-               before/after, keeping batches above independent. */
-            shreddit-feed.rmc-active > faceplate-partial {
-                break-inside: avoid !important;
-                column-span: all !important;
             }
-
-            /* Custom feed header */
             custom-feed-header {
                 display: block !important;
                 margin-left: 25px !important;
@@ -125,7 +120,26 @@
         (document.head || document.documentElement).appendChild(style);
     };
 
-    // ── Width-constraint stripping ────────────────────────────────────────
+    // --- Per-article size tracking -----------------------------------------
+    let inLayout = false;
+    let layoutCooldown = 0; // timestamp until which observer-triggered layouts are suppressed
+    const LAYOUT_COOLDOWN_MS = 200;
+
+    const resizeObserver = new ResizeObserver(() => {
+        if (inLayout) return;
+        if (performance.now() < layoutCooldown) return;
+        requestLayout();
+    });
+    const observedArticles = new WeakSet();
+
+    const observeArticleSize = function(article) {
+        if (observedArticles.has(article)) return;
+        observedArticles.add(article);
+        resizeObserver.observe(article);
+    };
+
+    // --- Layout ------------------------------------------------------------
+
     const stripWidthConstraints = function(el) {
         if (!el) return;
         const toRemove = [...el.classList].filter(
@@ -134,111 +148,272 @@
         if (toRemove.length) el.classList.remove(...toRemove);
     };
 
-    // ── Column-count calculation ──────────────────────────────────────────
-    // This is the ONLY layout work JS does — one style write per resize.
+    const makeLayout = function() {
+        if (cleanup) return;
+        if (!parent || !parent.isConnected) return;
 
-    const updateColumnCount = function() {
-        const feed = document.querySelector('shreddit-feed');
-        if (!feed) return;
-
-        if (cleanup) {
-            if (active) deactivateFeed(feed);
-            return;
-        }
-
-        // One-time ancestor adjustments
-        if (!active) {
-            const mainContainer = document.querySelector('div.main-container');
+        inLayout = true;
+        try {
+        if (parent.style.position !== "relative") {
+            const main = document.querySelector("main");
+            if (main) main.style.maxWidth = "100%";
+            const mainContainer = document.querySelector("div.main-container");
             if (mainContainer) {
-                mainContainer.className = [...mainContainer.classList]
-                    .filter(c => !c.includes(':grid-cols-')).join(' ');
+                mainContainer.className = [...mainContainer.classList].filter(c => !c.includes(":grid-cols-")).join(" ");
             }
-            const subgrid = document.querySelector('div.subgrid-container');
+            const subgrid = document.querySelector("div.subgrid-container");
             stripWidthConstraints(subgrid);
-            feed.classList.add('rmc-active');
-            active = true;
+            if (subgrid) {
+                subgrid.style.maxWidth = "100%";
+                subgrid.style.width = "100%";
+            }
+            const sidebar = document.getElementById("right-sidebar-container");
+            if (sidebar) sidebar.style.display = "none";
+            parent.style.position = "relative";
+        }
+
+        const containerWidth = parent.clientWidth;
+
+        columns = Math.max(1, Math.floor((containerWidth - HGAP) / (MIN_WIDTH + HGAP)));
+
+        const totalHGapPx = HGAP * (columns + 1);
+        const colWidthPx = (containerWidth - totalHGapPx) / columns;
+
+        // Only select actual post items — NOT faceplate-partial (lazy-load sentinels)
+        const nodes = [...parent.querySelectorAll(POST_ITEM_SELECTOR)];
+
+        // Filter to only direct layout items (skip deeply nested elements)
+        const layoutNodes = nodes.filter(n => {
+            let p = n.parentNode;
+            while (p && p !== parent) {
+                const tag = p.tagName ? p.tagName.toLowerCase() : '';
+                if (tag === 'faceplate-batch') {
+                    p = p.parentNode;
+                    continue;
+                }
+                break;
+            }
+            return p === parent;
+        });
+
+        // Reset postMap to only contain currently-visible items.
+        // This prevents stale entries from removed posts affecting layout.
+        const currentKeys = new Set();
+        for (const article of layoutNodes) {
+            const key = stableKey(article);
+            currentKeys.add(key);
+            observeArticleSize(article);
+
+            const h = article.offsetHeight;
+            if (postMap.has(key)) {
+                const post = postMap.get(key);
+                if (post.height !== h) post.height = h;
+            } else {
+                postMap.set(key, { height: h, col: 0, top: 0 });
+            }
         }
 
-        const width = feed.clientWidth || window.innerWidth;
-        const cols = Math.max(1, Math.floor((width + HGAP) / (MIN_COL_WIDTH + HGAP)));
-        if (cols !== currentCols) {
-            currentCols = cols;
-            feed.style.columnCount = String(cols);
+        // Remove entries that are no longer in the DOM
+        for (const key of postMap.keys()) {
+            if (!currentKeys.has(key)) postMap.delete(key);
+        }
+
+        let tops = Array(columns).fill(VGAP);
+        for (const post of postMap.values()) {
+            post.col = indexOfSmallest(tops);
+            post.top = tops[post.col];
+            tops[post.col] += post.height + VGAP;
+        }
+
+        const height = Math.max(...tops);
+        if (height > VGAP) {
+            parent.style.height = height + "px";
+        }
+
+        for (const article of layoutNodes) {
+            const key = stableKey(article);
+            const entry = postMap.get(key) ?? { col: 0, top: tops[0] };
+            const leftPx = HGAP + entry.col * (colWidthPx + HGAP);
+            const layoutKey = `${colWidthPx.toFixed(2)}|${entry.top}|${leftPx.toFixed(2)}`;
+            if (article.dataset.rmcKey === layoutKey) continue;
+            article.dataset.rmcKey = layoutKey;
+            article.style.position = 'absolute';
+            article.style.width = colWidthPx + 'px';
+            article.style.top = entry.top + 'px';
+            article.style.left = leftPx + 'px';
+            article.style.margin = '0';
+        }
+
+        // Ensure faceplate-partial (lazy-load sentinels) and faceplate-batch
+        // wrappers are positioned at the bottom of the container so that
+        // scrolling triggers Reddit's IntersectionObserver for infinite scroll.
+        let bottomOffset = height;
+        for (const partial of parent.querySelectorAll(':scope > faceplate-partial, :scope > faceplate-batch')) {
+            partial.style.position = 'absolute';
+            partial.style.top = bottomOffset + 'px';
+            partial.style.left = '0';
+            partial.style.width = '100%';
+            partial.style.height = 'auto';
+            const partialH = partial.offsetHeight || 100;
+            bottomOffset += partialH;
+        }
+        if (bottomOffset > height) {
+            parent.style.height = bottomOffset + 'px';
+        }
+
+        } finally {
+            inLayout = false;
+            layoutCooldown = performance.now() + LAYOUT_COOLDOWN_MS;
         }
     };
 
-    const deactivateFeed = function(feed) {
-        if (!feed) feed = document.querySelector('shreddit-feed');
-        if (feed) {
-            feed.classList.remove('rmc-active');
-            feed.style.columnCount = '';
+    const vv = window.visualViewport;
+    const isVvZoomedIn = () => vv ? vv.scale > 1.01 : false;
+
+    let layoutScheduled = false;
+    let lastLayoutTime = 0;
+    const MIN_LAYOUT_INTERVAL = 50; // minimum ms between layouts
+
+    function requestLayout() {
+        if (isVvZoomedIn()) return;
+        if (layoutScheduled) return;
+        layoutScheduled = true;
+        requestAnimationFrame(() => {
+            layoutScheduled = false;
+            const now = performance.now();
+            if (now - lastLayoutTime < MIN_LAYOUT_INTERVAL) return;
+            lastLayoutTime = now;
+            makeLayout();
+        });
+    }
+
+    const setLayout = function(changes, observer) {
+        const c = shouldClean(cardIcon());
+        if (c !== cleanup) {
+            cleanup = c;
+            requestLayout();
         }
-        active = false;
-        currentCols = 0;
     };
 
-    // ── Resize handling (debounced via rAF) ────────────────────────────────
-    let resizeRaf = 0;
-    window.addEventListener('resize', () => {
-        if (resizeRaf) return;
-        resizeRaf = requestAnimationFrame(() => {
-            resizeRaf = 0;
-            updateColumnCount();
+    let pageChangeTimer = null;
+    const pageChange = new MutationObserver((mutations) => {
+        if (inLayout) return;
+        if (performance.now() < layoutCooldown) return;
+
+        // Only react to structural changes (new/removed nodes), not our own
+        // style or attribute modifications on positioned articles.
+        const hasStructuralChange = mutations.some(m => {
+            if (m.type === 'childList') return true;
+            // Ignore attribute changes on elements we've positioned
+            if (m.type === 'attributes' && m.target instanceof Element && m.target.dataset.rmcKey) return false;
+            return true;
         });
+        if (!hasStructuralChange) return;
+
+        if (pageChangeTimer) clearTimeout(pageChangeTimer);
+        pageChangeTimer = setTimeout(() => {
+            pageChangeTimer = null;
+            requestLayout();
+        }, 150);
     });
+    const layoutSwitch = new MutationObserver(setLayout);
 
-    // ── Feed discovery & activation ───────────────────────────────────────
-    let feedObserver = null;
+    window.addEventListener('resize', requestLayout);
 
-    const tryActivate = function() {
-        const feed = document.querySelector('shreddit-feed');
-        if (!feed) return false;
-        injectStyles();
-        updateColumnCount();
-        return true;
+    const disconnectPageObservers = function() {
+        pageChange.disconnect();
+        layoutSwitch.disconnect();
     };
 
-    // Watch for the feed element to appear (SPA navigation, lazy render).
-    // Uses a single MutationObserver on document.body — lightweight because
-    // it only watches childList (not attributes or subtree characterData).
-    const waitForFeed = function() {
-        if (tryActivate()) return;
-        if (feedObserver) return; // already watching
-        feedObserver = new MutationObserver(() => {
-            if (tryActivate()) {
-                feedObserver.disconnect();
-                feedObserver = null;
+    // --- Feed container discovery ------------------------------------------
+    const findParentStrategies = [
+        () => document.querySelector('shreddit-feed'),
+        () => {
+            const anchor = document.querySelector('article + hr + faceplate-partial');
+            return anchor ? anchor.parentNode : null;
+        },
+        () => {
+            const first = document.querySelector('main article');
+            if (!first) return null;
+            let el = first.parentNode;
+            while (el && el !== document.body) {
+                if (el.querySelectorAll(':scope > article, :scope > shreddit-post').length >= 2) return el;
+                if (el.querySelectorAll('article, shreddit-post').length >= 2) return el;
+                el = el.parentNode;
             }
-        });
-        feedObserver.observe(document.body, { childList: true, subtree: true });
+            return null;
+        },
+    ];
+
+    const findParent = function() {
+        for (const strategy of findParentStrategies) {
+            try {
+                const result = strategy();
+                if (result) return result;
+            } catch (_) { /* strategy failed, try next */ }
+        }
+        return null;
     };
 
-    // ── View-mode observer ────────────────────────────────────────────────
-    const layoutSwitch = new MutationObserver(() => {
-        const c = shouldClean(cardIcon());
-        if (c !== cleanup) {
-            cleanup = c;
-            updateColumnCount();
+    let searchDeadline = 0;
+    let searching = false;
+
+    const searchForFeed = function() {
+        const found = findParent();
+        if (found && found !== parent) {
+            parent = found;
+            parent.style.position = "";
+            parent.style.height = "";
+            postMap = new Map();
+            nextSyntheticId = 0;
+            resizeObserver.disconnect();
+            disconnectPageObservers();
+
+            pageChange.observe(parent, { childList: true, subtree: true, attributes: false });
+
+            const icon = cardIcon();
+            if (icon) {
+                layoutSwitch.observe(icon, { attributes: true });
+            }
+
+            requestLayout();
+            searching = false;
+            return;
+        }
+
+        if (found && found === parent) {
+            requestLayout();
+            searching = false;
+            return;
         }
-    });
 
-    const observeViewMode = function() {
-        const icon = cardIcon();
-        if (icon) layoutSwitch.observe(icon, { attributes: true });
+        if (performance.now() < searchDeadline) {
+            requestAnimationFrame(searchForFeed);
+        } else {
+            searching = false;
+        }
+    };
+
+    const scheduleFeedSearch = function(budgetMs = 8000) {
+        searchDeadline = performance.now() + budgetMs;
+        if (!searching) {
+            searching = true;
+            requestAnimationFrame(searchForFeed);
+        }
     };
 
-    // ── SPA navigation handling ───────────────────────────────────────────
     const onNavigate = function() {
         const pathChanged = location.pathname !== currentPath;
         currentPath = location.pathname;
 
         if (pathChanged) {
-            deactivateFeed();
-            layoutSwitch.disconnect();
+            parent = null;
+            disconnectPageObservers();
         }
-
-        waitForFeed();
-        observeViewMode();
+        if (!parent || !parent.isConnected) {
+            parent = null;
+        }
+        scheduleFeedSearch();
     };
 
     const patchHistory = function() {
@@ -260,13 +435,14 @@
         window.addEventListener('reddit-mc:locationchange', onNavigate);
     };
 
-    // Fallback: detect navigation via shreddit-app attribute changes
     const appObserver = new MutationObserver(() => {
-        if (location.pathname !== currentPath) onNavigate();
+        if (location.pathname !== currentPath) {
+            onNavigate();
+        }
     });
 
     const observeApp = function() {
-        const app = document.querySelector('shreddit-app');
+        const app = document.querySelector("shreddit-app");
         if (!app) {
             setTimeout(observeApp, 100);
             return;
@@ -274,13 +450,26 @@
         appObserver.observe(app, { attributes: true });
     };
 
-    // ── Entry point ───────────────────────────────────────────────────────
+    let safetyNetTimer = null;
+    const domSafetyNet = new MutationObserver(() => {
+        if (!parent || !parent.isConnected) {
+            if (safetyNetTimer) return;
+            safetyNetTimer = setTimeout(() => {
+                safetyNetTimer = null;
+                if (!parent || !parent.isConnected) {
+                    scheduleFeedSearch(2000);
+                }
+            }, 500);
+        }
+    });
+
     const start = function() {
-        injectStyles();
+        injectResetStyles();
         patchHistory();
         observeApp();
-        observeViewMode();
-        waitForFeed();
+        const main = document.querySelector("main") || document.body;
+        domSafetyNet.observe(main, { childList: true, subtree: true });
+        scheduleFeedSearch();
     };
 
     if (document.body) {
diff --git a/js/reddit-multi-column.js b/js/reddit-multi-column.js
index d587722..71b04d9 100644
--- a/js/reddit-multi-column.js
+++ b/js/reddit-multi-column.js
@@ -3,18 +3,24 @@
 
     if (!/(^|\.)reddit\.com$/.test(location.hostname)) return;
 
-    // ── Configuration ─────────────────────────────────────────────────────
-    const MIN_COL_WIDTH = 400;
+    const MIN_WIDTH = 400;
+    const COLUMNS = 4;
+
     const HGAP = 17;
     const VGAP = 12;
 
-    // ── State ─────────────────────────────────────────────────────────────
+    // Selectors for actual post items that should be laid out in columns.
+    // IMPORTANT: faceplate-partial is NOT included here — it is Reddit's
+    // lazy-load sentinel and must remain in normal document flow so that
+    // IntersectionObserver can trigger infinite scroll loading.
+    const POST_ITEM_SELECTOR = 'article, shreddit-post, shreddit-ad-post';
+
+    let columns = COLUMNS;
+    let cleanup = false;
+
+    let parent = null;
     let currentPath = location.pathname;
-    let active = false;       // true when multi-column CSS is applied
-    let currentCols = 0;      // last column-count we set
-    let cleanup = false;      // true → non-card view, disable multi-column
 
-    // ── View-mode detection ───────────────────────────────────────────────
     const cardIcon = () => {
         const selectors = [
             'shreddit-sort-dropdown[header-text="View"]',
@@ -30,77 +36,66 @@
         }
         return undefined;
     };
-    const shouldClean = (icon) =>
-        icon === undefined ? false : icon.getAttribute('icon-name') !== "view-card-outline";
+    const shouldClean = (icon) => icon === undefined ? false : icon.getAttribute('icon-name') !== "view-card-outline";
+
+    let postMap = new Map();
+    let nextSyntheticId = 0;
+
+    const indexOfSmallest = function (a) {
+        let lowest = 0;
+        for (let i = 1; i < a.length; i++) {
+            if (a[i] < (a[lowest] - 1)) lowest = i;
+        }
+        return lowest;
+    };
 
-    // ── CSS injection ─────────────────────────────────────────────────────
-    // The entire multi-column layout is handled by the browser's native CSS
-    // column engine.  Zero JS height reads, zero absolute positioning, zero
-    // reflow loops.
+    const stableKey = function(el) {
+        if (el.dataset.rmcId) return el.dataset.rmcId;
+        const candidate =
+            el.getAttribute('aria-label') ||
+            el.getAttribute('id') ||
+            el.getAttribute('data-testid') ||
+            el.getAttribute('data-fullname') ||
+            el.getAttribute('data-post-id') ||
+            el.querySelector('[data-post-id]')?.getAttribute('data-post-id') ||
+            el.querySelector('a[href*="/comments/"]')?.getAttribute('href');
+        if (candidate) {
+            el.dataset.rmcId = candidate;
+            return candidate;
+        }
+        const synth = `rmc-synth-${nextSyntheticId++}`;
+        el.dataset.rmcId = synth;
+        return synth;
+    };
 
-    const injectStyles = function() {
-        if (document.getElementById('rmc-styles')) return;
+    const injectResetStyles = function() {
+        if (document.getElementById('rmc-margin-reset')) return;
         const style = document.createElement('style');
-        style.id = 'rmc-styles';
+        style.id = 'rmc-margin-reset';
         style.textContent = `
-            /* ── Widen the content area ───────────────────────────── */
             main {
-                max-width: 100% !important;
                 padding-left: 0 !important;
                 padding-right: 0 !important;
             }
             div.subgrid-container {
-                max-width: 100% !important;
-                width: 100% !important;
                 padding-left: 0 !important;
                 padding-right: 0 !important;
             }
-            #right-sidebar-container {
-                display: none !important;
-            }
-
-            /* ── Feed becomes a CSS-column container ─────────────── */
-            shreddit-feed.rmc-active {
-                display: block !important;
-                padding: ${VGAP}px ${HGAP}px !important;
+            shreddit-feed {
+                padding: 0 !important;
                 margin: 0 !important;
                 box-sizing: border-box !important;
-                column-gap: ${HGAP}px !important;
-            }
-
-            /* faceplate-batch wraps groups of posts; make it
-               transparent to the column layout so individual posts
-               flow independently across columns. */
-            shreddit-feed.rmc-active > faceplate-batch {
-                display: contents !important;
+                display: block !important;
             }
-
-            /* Individual posts: avoid breaking mid-post */
-            shreddit-feed.rmc-active > article,
-            shreddit-feed.rmc-active > shreddit-post,
-            shreddit-feed.rmc-active > shreddit-ad-post,
-            shreddit-feed.rmc-active > faceplate-batch > article,
-            shreddit-feed.rmc-active > faceplate-batch > shreddit-post,
-            shreddit-feed.rmc-active > faceplate-batch > shreddit-ad-post {
-                break-inside: avoid !important;
-                margin-bottom: ${VGAP}px !important;
-                margin-top: 0 !important;
-                margin-left: 0 !important;
-                margin-right: 0 !important;
+            shreddit-feed > article,
+            shreddit-feed > shreddit-post,
+            shreddit-feed > shreddit-ad-post,
+            shreddit-feed > faceplate-batch > article,
+            shreddit-feed > faceplate-batch > shreddit-post,
+            shreddit-feed > faceplate-batch > shreddit-ad-post {
+                margin: 0 !important;
                 box-sizing: border-box !important;
-                overflow: hidden !important;
             }
-
-            /* Lazy-load sentinels span all columns so Reddit's
-               IntersectionObserver still fires when the user scrolls
-               to the bottom.  column-span:all forces a column break
-               before/after, keeping batches above independent. */
-            shreddit-feed.rmc-active > faceplate-partial {
-                break-inside: avoid !important;
-                column-span: all !important;
-            }
-
-            /* Custom feed header */
             custom-feed-header {
                 display: block !important;
                 margin-left: 25px !important;
@@ -110,7 +105,22 @@
         (document.head || document.documentElement).appendChild(style);
     };
 
-    // ── Width-constraint stripping ────────────────────────────────────────
+    // --- Per-article size tracking -----------------------------------------
+    let inLayout = false;
+    const resizeObserver = new ResizeObserver(() => {
+        if (inLayout) return;
+        requestLayout();
+    });
+    const observedArticles = new WeakSet();
+
+    const observeArticleSize = function(article) {
+        if (observedArticles.has(article)) return;
+        observedArticles.add(article);
+        resizeObserver.observe(article);
+    };
+
+    // --- Layout ------------------------------------------------------------
+
     const stripWidthConstraints = function(el) {
         if (!el) return;
         const toRemove = [...el.classList].filter(
@@ -119,111 +129,252 @@
         if (toRemove.length) el.classList.remove(...toRemove);
     };
 
-    // ── Column-count calculation ──────────────────────────────────────────
-    // This is the ONLY layout work JS does — one style write per resize.
+    const makeLayout = function() {
+        if (cleanup) return;
+        if (!parent || !parent.isConnected) return;
 
-    const updateColumnCount = function() {
-        const feed = document.querySelector('shreddit-feed');
-        if (!feed) return;
-
-        if (cleanup) {
-            if (active) deactivateFeed(feed);
-            return;
-        }
-
-        // One-time ancestor adjustments
-        if (!active) {
-            const mainContainer = document.querySelector('div.main-container');
+        inLayout = true;
+        try {
+        if (parent.style.position !== "relative") {
+            const main = document.querySelector("main");
+            if (main) main.style.maxWidth = "100%";
+            const mainContainer = document.querySelector("div.main-container");
             if (mainContainer) {
-                mainContainer.className = [...mainContainer.classList]
-                    .filter(c => !c.includes(':grid-cols-')).join(' ');
+                mainContainer.className = [...mainContainer.classList].filter(c => !c.includes(":grid-cols-")).join(" ");
             }
-            const subgrid = document.querySelector('div.subgrid-container');
+            const subgrid = document.querySelector("div.subgrid-container");
             stripWidthConstraints(subgrid);
-            feed.classList.add('rmc-active');
-            active = true;
+            if (subgrid) {
+                subgrid.style.maxWidth = "100%";
+                subgrid.style.width = "100%";
+            }
+            const sidebar = document.getElementById("right-sidebar-container");
+            if (sidebar) sidebar.style.display = "none";
+            parent.style.position = "relative";
         }
 
-        const width = feed.clientWidth || window.innerWidth;
-        const cols = Math.max(1, Math.floor((width + HGAP) / (MIN_COL_WIDTH + HGAP)));
-        if (cols !== currentCols) {
-            currentCols = cols;
-            feed.style.columnCount = String(cols);
+        const containerWidth = parent.clientWidth;
+
+        columns = Math.max(1, Math.floor((containerWidth - HGAP) / (MIN_WIDTH + HGAP)));
+
+        const totalHGapPx = HGAP * (columns + 1);
+        const colWidthPx = (containerWidth - totalHGapPx) / columns;
+
+        // Only select actual post items — NOT faceplate-partial (lazy-load sentinels)
+        const nodes = [...parent.querySelectorAll(POST_ITEM_SELECTOR)];
+
+        // Filter to only direct layout items (skip deeply nested elements)
+        const layoutNodes = nodes.filter(n => {
+            let p = n.parentNode;
+            while (p && p !== parent) {
+                const tag = p.tagName ? p.tagName.toLowerCase() : '';
+                if (tag === 'faceplate-batch') {
+                    p = p.parentNode;
+                    continue;
+                }
+                break;
+            }
+            return p === parent;
+        });
+
+        // Reset postMap to only contain currently-visible items.
+        // This prevents stale entries from removed posts affecting layout.
+        const currentKeys = new Set();
+        for (const article of layoutNodes) {
+            const key = stableKey(article);
+            currentKeys.add(key);
+            observeArticleSize(article);
+
+            const h = article.offsetHeight;
+            if (postMap.has(key)) {
+                const post = postMap.get(key);
+                if (post.height !== h) post.height = h;
+            } else {
+                postMap.set(key, { height: h, col: 0, top: 0 });
+            }
         }
-    };
 
-    const deactivateFeed = function(feed) {
-        if (!feed) feed = document.querySelector('shreddit-feed');
-        if (feed) {
-            feed.classList.remove('rmc-active');
-            feed.style.columnCount = '';
+        // Remove entries that are no longer in the DOM
+        for (const key of postMap.keys()) {
+            if (!currentKeys.has(key)) postMap.delete(key);
         }
-        active = false;
-        currentCols = 0;
-    };
 
-    // ── Resize handling (debounced via rAF) ────────────────────────────────
-    let resizeRaf = 0;
-    window.addEventListener('resize', () => {
-        if (resizeRaf) return;
-        resizeRaf = requestAnimationFrame(() => {
-            resizeRaf = 0;
-            updateColumnCount();
-        });
-    });
+        let tops = Array(columns).fill(VGAP);
+        for (const post of postMap.values()) {
+            post.col = indexOfSmallest(tops);
+            post.top = tops[post.col];
+            tops[post.col] += post.height + VGAP;
+        }
+
+        const height = Math.max(...tops);
+        if (height > VGAP) {
+            parent.style.height = height + "px";
+        }
 
-    // ── Feed discovery & activation ───────────────────────────────────────
-    let feedObserver = null;
+        for (const article of layoutNodes) {
+            const key = stableKey(article);
+            const entry = postMap.get(key) ?? { col: 0, top: tops[0] };
+            const leftPx = HGAP + entry.col * (colWidthPx + HGAP);
+            const layoutKey = `${colWidthPx.toFixed(2)}|${entry.top}|${leftPx.toFixed(2)}`;
+            if (article.dataset.rmcKey === layoutKey) continue;
+            article.dataset.rmcKey = layoutKey;
+            article.style.position = 'absolute';
+            article.style.width = colWidthPx + 'px';
+            article.style.top = entry.top + 'px';
+            article.style.left = leftPx + 'px';
+            article.style.margin = '0';
+        }
 
-    const tryActivate = function() {
-        const feed = document.querySelector('shreddit-feed');
-        if (!feed) return false;
-        injectStyles();
-        updateColumnCount();
-        return true;
+        // Ensure faceplate-partial (lazy-load sentinels) and faceplate-batch
+        // wrappers are positioned at the bottom of the container so that
+        // scrolling triggers Reddit's IntersectionObserver for infinite scroll.
+        let bottomOffset = height;
+        for (const partial of parent.querySelectorAll(':scope > faceplate-partial, :scope > faceplate-batch')) {
+            partial.style.position = 'absolute';
+            partial.style.top = bottomOffset + 'px';
+            partial.style.left = '0';
+            partial.style.width = '100%';
+            partial.style.height = 'auto';
+            const partialH = partial.offsetHeight || 100;
+            bottomOffset += partialH;
+        }
+        if (bottomOffset > height) {
+            parent.style.height = bottomOffset + 'px';
+        }
+
+        } finally {
+            inLayout = false;
+        }
     };
 
-    // Watch for the feed element to appear (SPA navigation, lazy render).
-    // Uses a single MutationObserver on document.body — lightweight because
-    // it only watches childList (not attributes or subtree characterData).
-    const waitForFeed = function() {
-        if (tryActivate()) return;
-        if (feedObserver) return; // already watching
-        feedObserver = new MutationObserver(() => {
-            if (tryActivate()) {
-                feedObserver.disconnect();
-                feedObserver = null;
-            }
+    const vv = window.visualViewport;
+    const isVvZoomedIn = () => vv ? vv.scale > 1.01 : false;
+
+    let layoutScheduled = false;
+    function requestLayout() {
+        if (isVvZoomedIn()) return;
+        if (layoutScheduled) return;
+        layoutScheduled = true;
+        requestAnimationFrame(() => {
+            layoutScheduled = false;
+            makeLayout();
         });
-        feedObserver.observe(document.body, { childList: true, subtree: true });
-    };
+    }
 
-    // ── View-mode observer ────────────────────────────────────────────────
-    const layoutSwitch = new MutationObserver(() => {
+    const setLayout = function(changes, observer) {
         const c = shouldClean(cardIcon());
         if (c !== cleanup) {
             cleanup = c;
-            updateColumnCount();
+            requestLayout();
         }
+    };
+
+    let pageChangeTimer = null;
+    const pageChange = new MutationObserver(() => {
+        if (pageChangeTimer) clearTimeout(pageChangeTimer);
+        pageChangeTimer = setTimeout(() => {
+            pageChangeTimer = null;
+            requestLayout();
+        }, 100);
     });
+    const layoutSwitch = new MutationObserver(setLayout);
+
+    window.addEventListener('resize', requestLayout);
+
+    const disconnectPageObservers = function() {
+        pageChange.disconnect();
+        layoutSwitch.disconnect();
+    };
+
+    // --- Feed container discovery ------------------------------------------
+    const findParentStrategies = [
+        () => document.querySelector('shreddit-feed'),
+        () => {
+            const anchor = document.querySelector('article + hr + faceplate-partial');
+            return anchor ? anchor.parentNode : null;
+        },
+        () => {
+            const first = document.querySelector('main article');
+            if (!first) return null;
+            let el = first.parentNode;
+            while (el && el !== document.body) {
+                if (el.querySelectorAll(':scope > article, :scope > shreddit-post').length >= 2) return el;
+                if (el.querySelectorAll('article, shreddit-post').length >= 2) return el;
+                el = el.parentNode;
+            }
+            return null;
+        },
+    ];
+
+    const findParent = function() {
+        for (const strategy of findParentStrategies) {
+            try {
+                const result = strategy();
+                if (result) return result;
+            } catch (_) { /* strategy failed, try next */ }
+        }
+        return null;
+    };
+
+    let searchDeadline = 0;
+    let searching = false;
+
+    const searchForFeed = function() {
+        const found = findParent();
+        if (found && found !== parent) {
+            parent = found;
+            parent.style.position = "";
+            parent.style.height = "";
+            postMap = new Map();
+            nextSyntheticId = 0;
+            resizeObserver.disconnect();
+            disconnectPageObservers();
+
+            pageChange.observe(parent, { childList: true, subtree: true });
+
+            const icon = cardIcon();
+            if (icon) {
+                layoutSwitch.observe(icon, { attributes: true });
+            }
+
+            requestLayout();
+            searching = false;
+            return;
+        }
+
+        if (found && found === parent) {
+            requestLayout();
+            searching = false;
+            return;
+        }
 
-    const observeViewMode = function() {
-        const icon = cardIcon();
-        if (icon) layoutSwitch.observe(icon, { attributes: true });
+        if (performance.now() < searchDeadline) {
+            requestAnimationFrame(searchForFeed);
+        } else {
+            searching = false;
+        }
+    };
+
+    const scheduleFeedSearch = function(budgetMs = 8000) {
+        searchDeadline = performance.now() + budgetMs;
+        if (!searching) {
+            searching = true;
+            requestAnimationFrame(searchForFeed);
+        }
     };
 
-    // ── SPA navigation handling ───────────────────────────────────────────
     const onNavigate = function() {
         const pathChanged = location.pathname !== currentPath;
         currentPath = location.pathname;
 
         if (pathChanged) {
-            deactivateFeed();
-            layoutSwitch.disconnect();
+            parent = null;
+            disconnectPageObservers();
         }
-
-        waitForFeed();
-        observeViewMode();
+        if (!parent || !parent.isConnected) {
+            parent = null;
+        }
+        scheduleFeedSearch();
     };
 
     const patchHistory = function() {
@@ -245,13 +396,14 @@
         window.addEventListener('reddit-mc:locationchange', onNavigate);
     };
 
-    // Fallback: detect navigation via shreddit-app attribute changes
     const appObserver = new MutationObserver(() => {
-        if (location.pathname !== currentPath) onNavigate();
+        if (location.pathname !== currentPath) {
+            onNavigate();
+        }
     });
 
     const observeApp = function() {
-        const app = document.querySelector('shreddit-app');
+        const app = document.querySelector("shreddit-app");
         if (!app) {
             setTimeout(observeApp, 100);
             return;
@@ -259,13 +411,26 @@
         appObserver.observe(app, { attributes: true });
     };
 
-    // ── Entry point ───────────────────────────────────────────────────────
+    let safetyNetTimer = null;
+    const domSafetyNet = new MutationObserver(() => {
+        if (!parent || !parent.isConnected) {
+            if (safetyNetTimer) return;
+            safetyNetTimer = setTimeout(() => {
+                safetyNetTimer = null;
+                if (!parent || !parent.isConnected) {
+                    scheduleFeedSearch(2000);
+                }
+            }, 500);
+        }
+    });
+
     const start = function() {
-        injectStyles();
+        injectResetStyles();
         patchHistory();
         observeApp();
-        observeViewMode();
-        waitForFeed();
+        const main = document.querySelector("main") || document.body;
+        domSafetyNet.observe(main, { childList: true, subtree: true });
+        scheduleFeedSearch();
     };
 
     if (document.body) {

From 2323818d2c592ee5e30ed76882a8d8f8bdce7e6b Mon Sep 17 00:00:00 2001
From: Florin <hey@florincatalin.com>
Date: Thu, 25 Jun 2026 12:54:41 -0700
Subject: [PATCH 15/18] Revert "Fix infinite layout loops causing browser crash
 in Reddit Multi Column"

---
 Reddit Multi Column.user.js | 30 +++---------------------------
 1 file changed, 3 insertions(+), 27 deletions(-)

diff --git a/Reddit Multi Column.user.js b/Reddit Multi Column.user.js
index e3e5a8d..8c6e275 100644
--- a/Reddit Multi Column.user.js	
+++ b/Reddit Multi Column.user.js	
@@ -122,12 +122,8 @@
 
     // --- Per-article size tracking -----------------------------------------
     let inLayout = false;
-    let layoutCooldown = 0; // timestamp until which observer-triggered layouts are suppressed
-    const LAYOUT_COOLDOWN_MS = 200;
-
     const resizeObserver = new ResizeObserver(() => {
         if (inLayout) return;
-        if (performance.now() < layoutCooldown) return;
         requestLayout();
     });
     const observedArticles = new WeakSet();
@@ -263,7 +259,6 @@
 
         } finally {
             inLayout = false;
-            layoutCooldown = performance.now() + LAYOUT_COOLDOWN_MS;
         }
     };
 
@@ -271,18 +266,12 @@
     const isVvZoomedIn = () => vv ? vv.scale > 1.01 : false;
 
     let layoutScheduled = false;
-    let lastLayoutTime = 0;
-    const MIN_LAYOUT_INTERVAL = 50; // minimum ms between layouts
-
     function requestLayout() {
         if (isVvZoomedIn()) return;
         if (layoutScheduled) return;
         layoutScheduled = true;
         requestAnimationFrame(() => {
             layoutScheduled = false;
-            const now = performance.now();
-            if (now - lastLayoutTime < MIN_LAYOUT_INTERVAL) return;
-            lastLayoutTime = now;
             makeLayout();
         });
     }
@@ -296,25 +285,12 @@
     };
 
     let pageChangeTimer = null;
-    const pageChange = new MutationObserver((mutations) => {
-        if (inLayout) return;
-        if (performance.now() < layoutCooldown) return;
-
-        // Only react to structural changes (new/removed nodes), not our own
-        // style or attribute modifications on positioned articles.
-        const hasStructuralChange = mutations.some(m => {
-            if (m.type === 'childList') return true;
-            // Ignore attribute changes on elements we've positioned
-            if (m.type === 'attributes' && m.target instanceof Element && m.target.dataset.rmcKey) return false;
-            return true;
-        });
-        if (!hasStructuralChange) return;
-
+    const pageChange = new MutationObserver(() => {
         if (pageChangeTimer) clearTimeout(pageChangeTimer);
         pageChangeTimer = setTimeout(() => {
             pageChangeTimer = null;
             requestLayout();
-        }, 150);
+        }, 100);
     });
     const layoutSwitch = new MutationObserver(setLayout);
 
@@ -369,7 +345,7 @@
             resizeObserver.disconnect();
             disconnectPageObservers();
 
-            pageChange.observe(parent, { childList: true, subtree: true, attributes: false });
+            pageChange.observe(parent, { childList: true, subtree: true });
 
             const icon = cardIcon();
             if (icon) {

From b90efa02faec00b5a37525f8a19553f2f53a349b Mon Sep 17 00:00:00 2001
From: Florin <hey@florincatalin.com>
Date: Thu, 25 Jun 2026 12:55:19 -0700
Subject: [PATCH 16/18] Revert "fix: restore lazy loading and hover states in
 Reddit Multi Column script"

---
 Reddit Multi Column.user.js | 150 ++++++++++++++++++++++++++----------
 js/reddit-multi-column.js   | 148 +++++++++++++++++++++++++----------
 2 files changed, 215 insertions(+), 83 deletions(-)

diff --git a/Reddit Multi Column.user.js b/Reddit Multi Column.user.js
index 8c6e275..926b924 100644
--- a/Reddit Multi Column.user.js	
+++ b/Reddit Multi Column.user.js	
@@ -1,7 +1,7 @@
 // ==UserScript==
 // @name         Reddit Multi Column
 // @namespace    https://gist.github.com/c6p/463892bb243f611f2a3cfa4268c6435e
-// @version      0.5.0
+// @version      0.4.0
 // @description  Multi column layout for reddit redesign (with SPA nav support)
 // @author       Can Altıparmak
 // @homepageURL  https://gist.github.com/c6p/463892bb243f611f2a3cfa4268c6435e
@@ -24,11 +24,13 @@
     const HGAP = 17;
     const VGAP = 12;
 
-    // Selectors for actual post items that should be laid out in columns.
-    // IMPORTANT: faceplate-partial is NOT included here — it is Reddit's
-    // lazy-load sentinel and must remain in normal document flow so that
-    // IntersectionObserver can trigger infinite scroll loading.
-    const POST_ITEM_SELECTOR = 'article, shreddit-post, shreddit-ad-post';
+    const SETTLE_MS = 180;
+    const MAX_HIDE_MS = 1200;
+    const FADE_MS = 150;
+
+    // Selectors used to locate feed items inside the feed container. Kept in
+    // one place so they're easy to update when Reddit changes its DOM.
+    const FEED_ITEM_SELECTOR = 'article, shreddit-post, shreddit-ad-post, faceplate-partial';
 
     let columns = COLUMNS;
     let cleanup = false;
@@ -37,6 +39,8 @@
     let currentPath = location.pathname;
 
     const cardIcon = () => {
+        // Try multiple selectors – Reddit has changed the view-switcher element
+        // name/attributes over time.
         const selectors = [
             'shreddit-sort-dropdown[header-text="View"]',
             'shreddit-view-nav',
@@ -45,6 +49,7 @@
         for (const sel of selectors) {
             const el = document.querySelector(sel);
             if (!el) continue;
+            // If the component uses Shadow DOM, look inside it.
             const root = el.shadowRoot || el;
             const svg = root.querySelector('svg');
             if (svg) return svg;
@@ -64,6 +69,10 @@
         return lowest;
     };
 
+    // --- Stable key for each feed item ------------------------------------
+    // Reddit may or may not provide an aria-label, data-testid, or id on
+    // articles. We try several attributes and fall back to a synthetic id
+    // stamped on the element so that every item always gets a layout key.
     const stableKey = function(el) {
         if (el.dataset.rmcId) return el.dataset.rmcId;
         const candidate =
@@ -83,6 +92,13 @@
         return synth;
     };
 
+    // Reddit's <main> and the subgrid wrapper apply horizontal padding that
+    // was pushing the feed container ~56px in from the viewport edge. That
+    // padding was invisible to our layout math (we measured clientWidth of
+    // the feed, not the viewport), so HGAP only added to it — making the
+    // effective left/right outer spacing ~68px while the top/bottom stayed
+    // at our 12px VGAP. Zeroing those outer paddings lets HGAP be the true
+    // visible outer spacing.
     const injectResetStyles = function() {
         if (document.getElementById('rmc-margin-reset')) return;
         const style = document.createElement('style');
@@ -105,11 +121,14 @@
             shreddit-feed > article,
             shreddit-feed > shreddit-post,
             shreddit-feed > shreddit-ad-post,
+            shreddit-feed > faceplate-partial,
             shreddit-feed > faceplate-batch > article,
             shreddit-feed > faceplate-batch > shreddit-post,
-            shreddit-feed > faceplate-batch > shreddit-ad-post {
+            shreddit-feed > faceplate-batch > shreddit-ad-post,
+            shreddit-feed > faceplate-batch > faceplate-partial {
                 margin: 0 !important;
                 box-sizing: border-box !important;
+                contain: layout paint !important;
             }
             custom-feed-header {
                 display: block !important;
@@ -120,9 +139,43 @@
         (document.head || document.documentElement).appendChild(style);
     };
 
+    // --- Visibility management ---------------------------------------------
+    let settleTimer = null;
+    let hideDeadline = 0;
+    let hidden = false;
+
+    const hideFeed = function() {
+        if (!parent) return;
+        hidden = true;
+        hideDeadline = performance.now() + MAX_HIDE_MS;
+        parent.style.transition = 'none';
+        parent.style.opacity = '0';
+    };
+
+    const revealFeed = function() {
+        if (!parent || !hidden) return;
+        hidden = false;
+        if (settleTimer) { clearTimeout(settleTimer); settleTimer = null; }
+        parent.style.transition = `opacity ${FADE_MS}ms ease-out`;
+        parent.style.opacity = '1';
+    };
+
+    const bumpSettle = function() {
+        if (!hidden) return;
+        if (settleTimer) clearTimeout(settleTimer);
+        const remaining = hideDeadline - performance.now();
+        if (remaining <= 0) {
+            revealFeed();
+            return;
+        }
+        settleTimer = setTimeout(revealFeed, Math.min(SETTLE_MS, remaining));
+    };
+
     // --- Per-article size tracking -----------------------------------------
     let inLayout = false;
     const resizeObserver = new ResizeObserver(() => {
+        // Avoid feedback loop: makeLayout repositions articles which triggers
+        // ResizeObserver which calls requestLayout again, causing a blink.
         if (inLayout) return;
         requestLayout();
     });
@@ -136,6 +189,11 @@
 
     // --- Layout ------------------------------------------------------------
 
+    // Strip width-constraining utility classes that Reddit may apply to any
+    // ancestor of the feed. Instead of targeting one exact class name, we
+    // remove anything that looks like a Tailwind fixed/max-width utility
+    // (e.g. "m:w-[1120px]", "lg:max-w-[960px]"), which is more resilient to
+    // Reddit changing the breakpoint values.
     const stripWidthConstraints = function(el) {
         if (!el) return;
         const toRemove = [...el.classList].filter(
@@ -144,7 +202,7 @@
         if (toRemove.length) el.classList.remove(...toRemove);
     };
 
-    const makeLayout = function() {
+    const makeLayout = function(changes = []) {
         if (cleanup) return;
         if (!parent || !parent.isConnected) return;
 
@@ -175,12 +233,14 @@
         const totalHGapPx = HGAP * (columns + 1);
         const colWidthPx = (containerWidth - totalHGapPx) / columns;
 
-        // Only select actual post items — NOT faceplate-partial (lazy-load sentinels)
-        const nodes = [...parent.querySelectorAll(POST_ITEM_SELECTOR)];
+        const nodes = [...parent.querySelectorAll(FEED_ITEM_SELECTOR)];
 
-        // Filter to only direct layout items (skip deeply nested elements)
+        // Filter to only direct layout items (skip deeply nested elements
+        // that happen to match the selector inside a shadow DOM etc.)
         const layoutNodes = nodes.filter(n => {
             let p = n.parentNode;
+            // Accept items whose parent is the feed container or a
+            // faceplate-batch directly inside it.
             while (p && p !== parent) {
                 const tag = p.tagName ? p.tagName.toLowerCase() : '';
                 if (tag === 'faceplate-batch') {
@@ -192,12 +252,9 @@
             return p === parent;
         });
 
-        // Reset postMap to only contain currently-visible items.
-        // This prevents stale entries from removed posts affecting layout.
-        const currentKeys = new Set();
         for (const article of layoutNodes) {
             const key = stableKey(article);
-            currentKeys.add(key);
+
             observeArticleSize(article);
 
             const h = article.offsetHeight;
@@ -209,11 +266,6 @@
             }
         }
 
-        // Remove entries that are no longer in the DOM
-        for (const key of postMap.keys()) {
-            if (!currentKeys.has(key)) postMap.delete(key);
-        }
-
         let tops = Array(columns).fill(VGAP);
         for (const post of postMap.values()) {
             post.col = indexOfSmallest(tops);
@@ -230,44 +282,38 @@
             const key = stableKey(article);
             const entry = postMap.get(key) ?? { col: 0, top: tops[0] };
             const leftPx = HGAP + entry.col * (colWidthPx + HGAP);
-            const layoutKey = `${colWidthPx.toFixed(2)}|${entry.top}|${leftPx.toFixed(2)}`;
+            const layoutKey = cleanup ? '' : `${colWidthPx.toFixed(2)}|${entry.top}|${leftPx.toFixed(2)}`;
             if (article.dataset.rmcKey === layoutKey) continue;
             article.dataset.rmcKey = layoutKey;
-            article.style.position = 'absolute';
-            article.style.width = colWidthPx + 'px';
-            article.style.top = entry.top + 'px';
-            article.style.left = leftPx + 'px';
-            article.style.margin = '0';
+            article.setAttribute(
+                "style",
+                cleanup
+                    ? ""
+                    : `position:absolute; width:${colWidthPx}px; top:${entry.top}px; left:${leftPx}px; margin:0; padding:0`
+            );
         }
 
-        // Ensure faceplate-partial (lazy-load sentinels) and faceplate-batch
-        // wrappers are positioned at the bottom of the container so that
-        // scrolling triggers Reddit's IntersectionObserver for infinite scroll.
-        let bottomOffset = height;
-        for (const partial of parent.querySelectorAll(':scope > faceplate-partial, :scope > faceplate-batch')) {
-            partial.style.position = 'absolute';
-            partial.style.top = bottomOffset + 'px';
-            partial.style.left = '0';
-            partial.style.width = '100%';
-            partial.style.height = 'auto';
-            const partialH = partial.offsetHeight || 100;
-            bottomOffset += partialH;
-        }
-        if (bottomOffset > height) {
-            parent.style.height = bottomOffset + 'px';
+        for (const batch of parent.querySelectorAll("faceplate-batch")) {
+            if (!batch.style.height) {
+                batch.style.height = [...batch.childNodes].reduce((h, c) => h + (c.clientHeight || 0), 0) + "px";
+            }
         }
-
         } finally {
             inLayout = false;
         }
     };
 
+    // Safari Smart Zoom (double-tap on a Magic Trackpad) is a visual-viewport
+    // zoom — visualViewport.scale and window.innerWidth change, but the layout
+    // viewport (parent.clientWidth in CSS pixels) does not, so there's nothing
+    // for us to lay out differently.
     const vv = window.visualViewport;
     const isVvZoomedIn = () => vv ? vv.scale > 1.01 : false;
 
     let layoutScheduled = false;
     function requestLayout() {
         if (isVvZoomedIn()) return;
+        bumpSettle();
         if (layoutScheduled) return;
         layoutScheduled = true;
         requestAnimationFrame(() => {
@@ -286,6 +332,8 @@
 
     let pageChangeTimer = null;
     const pageChange = new MutationObserver(() => {
+        // Debounce: Reddit's feed generates many rapid childList mutations
+        // (e.g. batch loading). Coalesce them into a single layout pass.
         if (pageChangeTimer) clearTimeout(pageChangeTimer);
         pageChangeTimer = setTimeout(() => {
             pageChangeTimer = null;
@@ -302,18 +350,30 @@
     };
 
     // --- Feed container discovery ------------------------------------------
+    // Use a ranked list of strategies so that when Reddit changes its DOM we
+    // still find the feed.  Each strategy returns the container element or
+    // null.  The first non-null result wins.
     const findParentStrategies = [
+        // Strategy 1: <shreddit-feed> custom element (current Reddit 2025+).
         () => document.querySelector('shreddit-feed'),
+
+        // Strategy 2: legacy selector – an <article> followed by <hr> then
+        // <faceplate-partial> (pre-2025 Reddit).  Return its parentNode.
         () => {
             const anchor = document.querySelector('article + hr + faceplate-partial');
             return anchor ? anchor.parentNode : null;
         },
+
+        // Strategy 3: any container that holds multiple <article> children
+        // (generic heuristic).  Walk up from the first article's parent and
+        // pick the first ancestor that holds ≥2 articles.
         () => {
             const first = document.querySelector('main article');
             if (!first) return null;
             let el = first.parentNode;
             while (el && el !== document.body) {
                 if (el.querySelectorAll(':scope > article, :scope > shreddit-post').length >= 2) return el;
+                // Also check one level deeper (faceplate-batch wrappers).
                 if (el.querySelectorAll('article, shreddit-post').length >= 2) return el;
                 el = el.parentNode;
             }
@@ -345,6 +405,7 @@
             resizeObserver.disconnect();
             disconnectPageObservers();
 
+            hideFeed();
             pageChange.observe(parent, { childList: true, subtree: true });
 
             const icon = cardIcon();
@@ -353,11 +414,14 @@
             }
 
             requestLayout();
+            settleTimer = setTimeout(revealFeed, SETTLE_MS);
             searching = false;
             return;
         }
 
         if (found && found === parent) {
+            // Parent hasn't changed – just ensure layout is up to date
+            // without the destructive hide/reveal cycle that causes blinking.
             requestLayout();
             searching = false;
             return;
@@ -412,6 +476,7 @@
     };
 
     const appObserver = new MutationObserver(() => {
+        // Only trigger navigation handling when the URL actually changed.
         if (location.pathname !== currentPath) {
             onNavigate();
         }
@@ -429,6 +494,7 @@
     let safetyNetTimer = null;
     const domSafetyNet = new MutationObserver(() => {
         if (!parent || !parent.isConnected) {
+            // Debounce: avoid firing repeatedly for rapid DOM changes.
             if (safetyNetTimer) return;
             safetyNetTimer = setTimeout(() => {
                 safetyNetTimer = null;
diff --git a/js/reddit-multi-column.js b/js/reddit-multi-column.js
index 71b04d9..53a4ace 100644
--- a/js/reddit-multi-column.js
+++ b/js/reddit-multi-column.js
@@ -9,11 +9,13 @@
     const HGAP = 17;
     const VGAP = 12;
 
-    // Selectors for actual post items that should be laid out in columns.
-    // IMPORTANT: faceplate-partial is NOT included here — it is Reddit's
-    // lazy-load sentinel and must remain in normal document flow so that
-    // IntersectionObserver can trigger infinite scroll loading.
-    const POST_ITEM_SELECTOR = 'article, shreddit-post, shreddit-ad-post';
+    const SETTLE_MS = 180;
+    const MAX_HIDE_MS = 1200;
+    const FADE_MS = 150;
+
+    // Selectors used to locate feed items inside the feed container. Kept in
+    // one place so they're easy to update when Reddit changes its DOM.
+    const FEED_ITEM_SELECTOR = 'article, shreddit-post, shreddit-ad-post, faceplate-partial';
 
     let columns = COLUMNS;
     let cleanup = false;
@@ -22,6 +24,8 @@
     let currentPath = location.pathname;
 
     const cardIcon = () => {
+        // Try multiple selectors – Reddit has changed the view-switcher element
+        // name/attributes over time.
         const selectors = [
             'shreddit-sort-dropdown[header-text="View"]',
             'shreddit-view-nav',
@@ -30,6 +34,7 @@
         for (const sel of selectors) {
             const el = document.querySelector(sel);
             if (!el) continue;
+            // If the component uses Shadow DOM, look inside it.
             const root = el.shadowRoot || el;
             const svg = root.querySelector('svg');
             if (svg) return svg;
@@ -49,6 +54,10 @@
         return lowest;
     };
 
+    // --- Stable key for each feed item ------------------------------------
+    // Reddit may or may not provide an aria-label, data-testid, or id on
+    // articles. We try several attributes and fall back to a synthetic id
+    // stamped on the element so that every item always gets a layout key.
     const stableKey = function(el) {
         if (el.dataset.rmcId) return el.dataset.rmcId;
         const candidate =
@@ -68,6 +77,13 @@
         return synth;
     };
 
+    // Reddit's <main> and the subgrid wrapper apply horizontal padding that
+    // was pushing the feed container ~56px in from the viewport edge. That
+    // padding was invisible to our layout math (we measured clientWidth of
+    // the feed, not the viewport), so HGAP only added to it — making the
+    // effective left/right outer spacing ~68px while the top/bottom stayed
+    // at our 12px VGAP. Zeroing those outer paddings lets HGAP be the true
+    // visible outer spacing.
     const injectResetStyles = function() {
         if (document.getElementById('rmc-margin-reset')) return;
         const style = document.createElement('style');
@@ -90,11 +106,14 @@
             shreddit-feed > article,
             shreddit-feed > shreddit-post,
             shreddit-feed > shreddit-ad-post,
+            shreddit-feed > faceplate-partial,
             shreddit-feed > faceplate-batch > article,
             shreddit-feed > faceplate-batch > shreddit-post,
-            shreddit-feed > faceplate-batch > shreddit-ad-post {
+            shreddit-feed > faceplate-batch > shreddit-ad-post,
+            shreddit-feed > faceplate-batch > faceplate-partial {
                 margin: 0 !important;
                 box-sizing: border-box !important;
+                contain: layout paint !important;
             }
             custom-feed-header {
                 display: block !important;
@@ -105,9 +124,43 @@
         (document.head || document.documentElement).appendChild(style);
     };
 
+    // --- Visibility management ---------------------------------------------
+    let settleTimer = null;
+    let hideDeadline = 0;
+    let hidden = false;
+
+    const hideFeed = function() {
+        if (!parent) return;
+        hidden = true;
+        hideDeadline = performance.now() + MAX_HIDE_MS;
+        parent.style.transition = 'none';
+        parent.style.opacity = '0';
+    };
+
+    const revealFeed = function() {
+        if (!parent || !hidden) return;
+        hidden = false;
+        if (settleTimer) { clearTimeout(settleTimer); settleTimer = null; }
+        parent.style.transition = `opacity ${FADE_MS}ms ease-out`;
+        parent.style.opacity = '1';
+    };
+
+    const bumpSettle = function() {
+        if (!hidden) return;
+        if (settleTimer) clearTimeout(settleTimer);
+        const remaining = hideDeadline - performance.now();
+        if (remaining <= 0) {
+            revealFeed();
+            return;
+        }
+        settleTimer = setTimeout(revealFeed, Math.min(SETTLE_MS, remaining));
+    };
+
     // --- Per-article size tracking -----------------------------------------
     let inLayout = false;
     const resizeObserver = new ResizeObserver(() => {
+        // Avoid feedback loop: makeLayout repositions articles which triggers
+        // ResizeObserver which calls requestLayout again, causing a blink.
         if (inLayout) return;
         requestLayout();
     });
@@ -121,6 +174,11 @@
 
     // --- Layout ------------------------------------------------------------
 
+    // Strip width-constraining utility classes that Reddit may apply to any
+    // ancestor of the feed. Instead of targeting one exact class name, we
+    // remove anything that looks like a Tailwind fixed/max-width utility
+    // (e.g. "m:w-[1120px]", "lg:max-w-[960px]"), which is more resilient to
+    // Reddit changing the breakpoint values.
     const stripWidthConstraints = function(el) {
         if (!el) return;
         const toRemove = [...el.classList].filter(
@@ -129,7 +187,7 @@
         if (toRemove.length) el.classList.remove(...toRemove);
     };
 
-    const makeLayout = function() {
+    const makeLayout = function(changes = []) {
         if (cleanup) return;
         if (!parent || !parent.isConnected) return;
 
@@ -160,12 +218,14 @@
         const totalHGapPx = HGAP * (columns + 1);
         const colWidthPx = (containerWidth - totalHGapPx) / columns;
 
-        // Only select actual post items — NOT faceplate-partial (lazy-load sentinels)
-        const nodes = [...parent.querySelectorAll(POST_ITEM_SELECTOR)];
+        const nodes = [...parent.querySelectorAll(FEED_ITEM_SELECTOR)];
 
-        // Filter to only direct layout items (skip deeply nested elements)
+        // Filter to only direct layout items (skip deeply nested elements
+        // that happen to match the selector inside a shadow DOM etc.)
         const layoutNodes = nodes.filter(n => {
             let p = n.parentNode;
+            // Accept items whose parent is the feed container or a
+            // faceplate-batch directly inside it.
             while (p && p !== parent) {
                 const tag = p.tagName ? p.tagName.toLowerCase() : '';
                 if (tag === 'faceplate-batch') {
@@ -177,12 +237,9 @@
             return p === parent;
         });
 
-        // Reset postMap to only contain currently-visible items.
-        // This prevents stale entries from removed posts affecting layout.
-        const currentKeys = new Set();
         for (const article of layoutNodes) {
             const key = stableKey(article);
-            currentKeys.add(key);
+
             observeArticleSize(article);
 
             const h = article.offsetHeight;
@@ -194,11 +251,6 @@
             }
         }
 
-        // Remove entries that are no longer in the DOM
-        for (const key of postMap.keys()) {
-            if (!currentKeys.has(key)) postMap.delete(key);
-        }
-
         let tops = Array(columns).fill(VGAP);
         for (const post of postMap.values()) {
             post.col = indexOfSmallest(tops);
@@ -215,44 +267,38 @@
             const key = stableKey(article);
             const entry = postMap.get(key) ?? { col: 0, top: tops[0] };
             const leftPx = HGAP + entry.col * (colWidthPx + HGAP);
-            const layoutKey = `${colWidthPx.toFixed(2)}|${entry.top}|${leftPx.toFixed(2)}`;
+            const layoutKey = cleanup ? '' : `${colWidthPx.toFixed(2)}|${entry.top}|${leftPx.toFixed(2)}`;
             if (article.dataset.rmcKey === layoutKey) continue;
             article.dataset.rmcKey = layoutKey;
-            article.style.position = 'absolute';
-            article.style.width = colWidthPx + 'px';
-            article.style.top = entry.top + 'px';
-            article.style.left = leftPx + 'px';
-            article.style.margin = '0';
+            article.setAttribute(
+                "style",
+                cleanup
+                    ? ""
+                    : `position:absolute; width:${colWidthPx}px; top:${entry.top}px; left:${leftPx}px; margin:0; padding:0`
+            );
         }
 
-        // Ensure faceplate-partial (lazy-load sentinels) and faceplate-batch
-        // wrappers are positioned at the bottom of the container so that
-        // scrolling triggers Reddit's IntersectionObserver for infinite scroll.
-        let bottomOffset = height;
-        for (const partial of parent.querySelectorAll(':scope > faceplate-partial, :scope > faceplate-batch')) {
-            partial.style.position = 'absolute';
-            partial.style.top = bottomOffset + 'px';
-            partial.style.left = '0';
-            partial.style.width = '100%';
-            partial.style.height = 'auto';
-            const partialH = partial.offsetHeight || 100;
-            bottomOffset += partialH;
-        }
-        if (bottomOffset > height) {
-            parent.style.height = bottomOffset + 'px';
+        for (const batch of parent.querySelectorAll("faceplate-batch")) {
+            if (!batch.style.height) {
+                batch.style.height = [...batch.childNodes].reduce((h, c) => h + (c.clientHeight || 0), 0) + "px";
+            }
         }
-
         } finally {
             inLayout = false;
         }
     };
 
+    // Safari Smart Zoom (double-tap on a Magic Trackpad) is a visual-viewport
+    // zoom — visualViewport.scale and window.innerWidth change, but the layout
+    // viewport (parent.clientWidth in CSS pixels) does not, so there's nothing
+    // for us to lay out differently.
     const vv = window.visualViewport;
     const isVvZoomedIn = () => vv ? vv.scale > 1.01 : false;
 
     let layoutScheduled = false;
     function requestLayout() {
         if (isVvZoomedIn()) return;
+        bumpSettle();
         if (layoutScheduled) return;
         layoutScheduled = true;
         requestAnimationFrame(() => {
@@ -271,6 +317,8 @@
 
     let pageChangeTimer = null;
     const pageChange = new MutationObserver(() => {
+        // Debounce: Reddit's feed generates many rapid childList mutations
+        // (e.g. batch loading). Coalesce them into a single layout pass.
         if (pageChangeTimer) clearTimeout(pageChangeTimer);
         pageChangeTimer = setTimeout(() => {
             pageChangeTimer = null;
@@ -287,18 +335,30 @@
     };
 
     // --- Feed container discovery ------------------------------------------
+    // Use a ranked list of strategies so that when Reddit changes its DOM we
+    // still find the feed.  Each strategy returns the container element or
+    // null.  The first non-null result wins.
     const findParentStrategies = [
+        // Strategy 1: <shreddit-feed> custom element (current Reddit 2025+).
         () => document.querySelector('shreddit-feed'),
+
+        // Strategy 2: legacy selector – an <article> followed by <hr> then
+        // <faceplate-partial> (pre-2025 Reddit).  Return its parentNode.
         () => {
             const anchor = document.querySelector('article + hr + faceplate-partial');
             return anchor ? anchor.parentNode : null;
         },
+
+        // Strategy 3: any container that holds multiple <article> children
+        // (generic heuristic).  Walk up from the first article's parent and
+        // pick the first ancestor that holds ≥2 articles.
         () => {
             const first = document.querySelector('main article');
             if (!first) return null;
             let el = first.parentNode;
             while (el && el !== document.body) {
                 if (el.querySelectorAll(':scope > article, :scope > shreddit-post').length >= 2) return el;
+                // Also check one level deeper (faceplate-batch wrappers).
                 if (el.querySelectorAll('article, shreddit-post').length >= 2) return el;
                 el = el.parentNode;
             }
@@ -330,6 +390,7 @@
             resizeObserver.disconnect();
             disconnectPageObservers();
 
+            hideFeed();
             pageChange.observe(parent, { childList: true, subtree: true });
 
             const icon = cardIcon();
@@ -338,11 +399,14 @@
             }
 
             requestLayout();
+            settleTimer = setTimeout(revealFeed, SETTLE_MS);
             searching = false;
             return;
         }
 
         if (found && found === parent) {
+            // Parent hasn't changed – just ensure layout is up to date
+            // without the destructive hide/reveal cycle that causes blinking.
             requestLayout();
             searching = false;
             return;
@@ -397,6 +461,7 @@
     };
 
     const appObserver = new MutationObserver(() => {
+        // Only trigger navigation handling when the URL actually changed.
         if (location.pathname !== currentPath) {
             onNavigate();
         }
@@ -414,6 +479,7 @@
     let safetyNetTimer = null;
     const domSafetyNet = new MutationObserver(() => {
         if (!parent || !parent.isConnected) {
+            // Debounce: avoid firing repeatedly for rapid DOM changes.
             if (safetyNetTimer) return;
             safetyNetTimer = setTimeout(() => {
                 safetyNetTimer = null;

From fa2636fccd06c7fa62fe57d9f430650450630895 Mon Sep 17 00:00:00 2001
From: Florin <hey@florincatalin.com>
Date: Thu, 25 Jun 2026 12:56:23 -0700
Subject: [PATCH 17/18] Revert "Fix page blinking caused by layout feedback
 loops and aggressive observers"

---
 Reddit Multi Column.user.js | 49 +++++++++----------------------------
 js/reddit-multi-column.js   | 47 +++++++++--------------------------
 2 files changed, 23 insertions(+), 73 deletions(-)

diff --git a/Reddit Multi Column.user.js b/Reddit Multi Column.user.js
index 926b924..eca859e 100644
--- a/Reddit Multi Column.user.js	
+++ b/Reddit Multi Column.user.js	
@@ -172,11 +172,7 @@
     };
 
     // --- Per-article size tracking -----------------------------------------
-    let inLayout = false;
     const resizeObserver = new ResizeObserver(() => {
-        // Avoid feedback loop: makeLayout repositions articles which triggers
-        // ResizeObserver which calls requestLayout again, causing a blink.
-        if (inLayout) return;
         requestLayout();
     });
     const observedArticles = new WeakSet();
@@ -206,8 +202,6 @@
         if (cleanup) return;
         if (!parent || !parent.isConnected) return;
 
-        inLayout = true;
-        try {
         if (parent.style.position !== "relative") {
             const main = document.querySelector("main");
             if (main) main.style.maxWidth = "100%";
@@ -298,9 +292,6 @@
                 batch.style.height = [...batch.childNodes].reduce((h, c) => h + (c.clientHeight || 0), 0) + "px";
             }
         }
-        } finally {
-            inLayout = false;
-        }
     };
 
     // Safari Smart Zoom (double-tap on a Magic Trackpad) is a visual-viewport
@@ -330,19 +321,11 @@
         }
     };
 
-    let pageChangeTimer = null;
-    const pageChange = new MutationObserver(() => {
-        // Debounce: Reddit's feed generates many rapid childList mutations
-        // (e.g. batch loading). Coalesce them into a single layout pass.
-        if (pageChangeTimer) clearTimeout(pageChangeTimer);
-        pageChangeTimer = setTimeout(() => {
-            pageChangeTimer = null;
-            requestLayout();
-        }, 100);
-    });
+    const pageChange = new MutationObserver(requestLayout);
     const layoutSwitch = new MutationObserver(setLayout);
 
     window.addEventListener('resize', requestLayout);
+    window.addEventListener('scrollend', requestLayout);
 
     const disconnectPageObservers = function() {
         pageChange.disconnect();
@@ -420,9 +403,14 @@
         }
 
         if (found && found === parent) {
-            // Parent hasn't changed – just ensure layout is up to date
-            // without the destructive hide/reveal cycle that causes blinking.
+            postMap = new Map();
+            nextSyntheticId = 0;
+            resizeObserver.disconnect();
+            parent.style.position = "";
+            parent.style.height = "";
+            hideFeed();
             requestLayout();
+            settleTimer = setTimeout(revealFeed, SETTLE_MS);
             searching = false;
             return;
         }
@@ -475,12 +463,7 @@
         window.addEventListener('reddit-mc:locationchange', onNavigate);
     };
 
-    const appObserver = new MutationObserver(() => {
-        // Only trigger navigation handling when the URL actually changed.
-        if (location.pathname !== currentPath) {
-            onNavigate();
-        }
-    });
+    const appObserver = new MutationObserver(onNavigate);
 
     const observeApp = function() {
         const app = document.querySelector("shreddit-app");
@@ -491,17 +474,9 @@
         appObserver.observe(app, { attributes: true });
     };
 
-    let safetyNetTimer = null;
     const domSafetyNet = new MutationObserver(() => {
         if (!parent || !parent.isConnected) {
-            // Debounce: avoid firing repeatedly for rapid DOM changes.
-            if (safetyNetTimer) return;
-            safetyNetTimer = setTimeout(() => {
-                safetyNetTimer = null;
-                if (!parent || !parent.isConnected) {
-                    scheduleFeedSearch(2000);
-                }
-            }, 500);
+            scheduleFeedSearch(2000);
         }
     });
 
@@ -521,4 +496,4 @@
     } else {
         start();
     }
-})();
+})();
\ No newline at end of file
diff --git a/js/reddit-multi-column.js b/js/reddit-multi-column.js
index 53a4ace..ba08a66 100644
--- a/js/reddit-multi-column.js
+++ b/js/reddit-multi-column.js
@@ -157,11 +157,7 @@
     };
 
     // --- Per-article size tracking -----------------------------------------
-    let inLayout = false;
     const resizeObserver = new ResizeObserver(() => {
-        // Avoid feedback loop: makeLayout repositions articles which triggers
-        // ResizeObserver which calls requestLayout again, causing a blink.
-        if (inLayout) return;
         requestLayout();
     });
     const observedArticles = new WeakSet();
@@ -191,8 +187,6 @@
         if (cleanup) return;
         if (!parent || !parent.isConnected) return;
 
-        inLayout = true;
-        try {
         if (parent.style.position !== "relative") {
             const main = document.querySelector("main");
             if (main) main.style.maxWidth = "100%";
@@ -283,9 +277,6 @@
                 batch.style.height = [...batch.childNodes].reduce((h, c) => h + (c.clientHeight || 0), 0) + "px";
             }
         }
-        } finally {
-            inLayout = false;
-        }
     };
 
     // Safari Smart Zoom (double-tap on a Magic Trackpad) is a visual-viewport
@@ -315,19 +306,11 @@
         }
     };
 
-    let pageChangeTimer = null;
-    const pageChange = new MutationObserver(() => {
-        // Debounce: Reddit's feed generates many rapid childList mutations
-        // (e.g. batch loading). Coalesce them into a single layout pass.
-        if (pageChangeTimer) clearTimeout(pageChangeTimer);
-        pageChangeTimer = setTimeout(() => {
-            pageChangeTimer = null;
-            requestLayout();
-        }, 100);
-    });
+    const pageChange = new MutationObserver(requestLayout);
     const layoutSwitch = new MutationObserver(setLayout);
 
     window.addEventListener('resize', requestLayout);
+    window.addEventListener('scrollend', requestLayout);
 
     const disconnectPageObservers = function() {
         pageChange.disconnect();
@@ -405,9 +388,14 @@
         }
 
         if (found && found === parent) {
-            // Parent hasn't changed – just ensure layout is up to date
-            // without the destructive hide/reveal cycle that causes blinking.
+            postMap = new Map();
+            nextSyntheticId = 0;
+            resizeObserver.disconnect();
+            parent.style.position = "";
+            parent.style.height = "";
+            hideFeed();
             requestLayout();
+            settleTimer = setTimeout(revealFeed, SETTLE_MS);
             searching = false;
             return;
         }
@@ -460,12 +448,7 @@
         window.addEventListener('reddit-mc:locationchange', onNavigate);
     };
 
-    const appObserver = new MutationObserver(() => {
-        // Only trigger navigation handling when the URL actually changed.
-        if (location.pathname !== currentPath) {
-            onNavigate();
-        }
-    });
+    const appObserver = new MutationObserver(onNavigate);
 
     const observeApp = function() {
         const app = document.querySelector("shreddit-app");
@@ -476,17 +459,9 @@
         appObserver.observe(app, { attributes: true });
     };
 
-    let safetyNetTimer = null;
     const domSafetyNet = new MutationObserver(() => {
         if (!parent || !parent.isConnected) {
-            // Debounce: avoid firing repeatedly for rapid DOM changes.
-            if (safetyNetTimer) return;
-            safetyNetTimer = setTimeout(() => {
-                safetyNetTimer = null;
-                if (!parent || !parent.isConnected) {
-                    scheduleFeedSearch(2000);
-                }
-            }, 500);
+            scheduleFeedSearch(2000);
         }
     });
 

From 387732c621025b4cd5ccc40e3baeeb835e75a99c Mon Sep 17 00:00:00 2001
From: Florin <hey@florincatalin.com>
Date: Thu, 25 Jun 2026 12:57:39 -0700
Subject: [PATCH 18/18] Revert "fix: make Reddit multi-column layout resilient
 to DOM changes"

---
 Reddit Multi Column.user.js | 183 +++++++-----------------------------
 js/reddit-multi-column.js   | 172 +++++++--------------------------
 2 files changed, 68 insertions(+), 287 deletions(-)

diff --git a/Reddit Multi Column.user.js b/Reddit Multi Column.user.js
index eca859e..997f506 100644
--- a/Reddit Multi Column.user.js	
+++ b/Reddit Multi Column.user.js	
@@ -1,7 +1,7 @@
 // ==UserScript==
 // @name         Reddit Multi Column
 // @namespace    https://gist.github.com/c6p/463892bb243f611f2a3cfa4268c6435e
-// @version      0.4.0
+// @version      0.3.15
 // @description  Multi column layout for reddit redesign (with SPA nav support)
 // @author       Can Altıparmak
 // @homepageURL  https://gist.github.com/c6p/463892bb243f611f2a3cfa4268c6435e
@@ -15,9 +15,6 @@
 
 (function() {
     'use strict';
-
-    if (!/(^|\.)reddit\.com$/.test(location.hostname)) return;
-
     const MIN_WIDTH = 400;
     const COLUMNS = 4;
 
@@ -28,38 +25,16 @@
     const MAX_HIDE_MS = 1200;
     const FADE_MS = 150;
 
-    // Selectors used to locate feed items inside the feed container. Kept in
-    // one place so they're easy to update when Reddit changes its DOM.
-    const FEED_ITEM_SELECTOR = 'article, shreddit-post, shreddit-ad-post, faceplate-partial';
-
     let columns = COLUMNS;
     let cleanup = false;
 
     let parent = null;
     let currentPath = location.pathname;
 
-    const cardIcon = () => {
-        // Try multiple selectors – Reddit has changed the view-switcher element
-        // name/attributes over time.
-        const selectors = [
-            'shreddit-sort-dropdown[header-text="View"]',
-            'shreddit-view-nav',
-            'shreddit-sort-dropdown',
-        ];
-        for (const sel of selectors) {
-            const el = document.querySelector(sel);
-            if (!el) continue;
-            // If the component uses Shadow DOM, look inside it.
-            const root = el.shadowRoot || el;
-            const svg = root.querySelector('svg');
-            if (svg) return svg;
-        }
-        return undefined;
-    };
+    const cardIcon = () => document?.querySelector('shreddit-sort-dropdown[header-text="View"]')?.shadowRoot?.querySelector('svg');
     const shouldClean = (icon) => icon === undefined ? false : icon.getAttribute('icon-name') !== "view-card-outline";
 
     let postMap = new Map();
-    let nextSyntheticId = 0;
 
     const indexOfSmallest = function (a) {
         let lowest = 0;
@@ -69,29 +44,6 @@
         return lowest;
     };
 
-    // --- Stable key for each feed item ------------------------------------
-    // Reddit may or may not provide an aria-label, data-testid, or id on
-    // articles. We try several attributes and fall back to a synthetic id
-    // stamped on the element so that every item always gets a layout key.
-    const stableKey = function(el) {
-        if (el.dataset.rmcId) return el.dataset.rmcId;
-        const candidate =
-            el.getAttribute('aria-label') ||
-            el.getAttribute('id') ||
-            el.getAttribute('data-testid') ||
-            el.getAttribute('data-fullname') ||
-            el.getAttribute('data-post-id') ||
-            el.querySelector('[data-post-id]')?.getAttribute('data-post-id') ||
-            el.querySelector('a[href*="/comments/"]')?.getAttribute('href');
-        if (candidate) {
-            el.dataset.rmcId = candidate;
-            return candidate;
-        }
-        const synth = `rmc-synth-${nextSyntheticId++}`;
-        el.dataset.rmcId = synth;
-        return synth;
-    };
-
     // Reddit's <main> and the subgrid wrapper apply horizontal padding that
     // was pushing the feed container ~56px in from the viewport edge. That
     // padding was invisible to our layout math (we measured clientWidth of
@@ -118,16 +70,15 @@
                 box-sizing: border-box !important;
                 display: block !important;
             }
-            shreddit-feed > article,
-            shreddit-feed > shreddit-post,
-            shreddit-feed > shreddit-ad-post,
-            shreddit-feed > faceplate-partial,
-            shreddit-feed > faceplate-batch > article,
-            shreddit-feed > faceplate-batch > shreddit-post,
-            shreddit-feed > faceplate-batch > shreddit-ad-post,
-            shreddit-feed > faceplate-batch > faceplate-partial {
+            shreddit-feed article,
+            shreddit-feed shreddit-ad-post,
+            shreddit-feed faceplate-partial {
                 margin: 0 !important;
                 box-sizing: border-box !important;
+                /* Tell Safari each card is an isolated paint surface. Helps
+                   it re-rasterize only the tiles that actually changed after
+                   a visual zoom (Smart Zoom) instead of repainting the whole
+                   tall feed region. */
                 contain: layout paint !important;
             }
             custom-feed-header {
@@ -136,7 +87,7 @@
                 margin-right: 25px !important;
             }
         `;
-        (document.head || document.documentElement).appendChild(style);
+        document.head.appendChild(style);
     };
 
     // --- Visibility management ---------------------------------------------
@@ -185,19 +136,6 @@
 
     // --- Layout ------------------------------------------------------------
 
-    // Strip width-constraining utility classes that Reddit may apply to any
-    // ancestor of the feed. Instead of targeting one exact class name, we
-    // remove anything that looks like a Tailwind fixed/max-width utility
-    // (e.g. "m:w-[1120px]", "lg:max-w-[960px]"), which is more resilient to
-    // Reddit changing the breakpoint values.
-    const stripWidthConstraints = function(el) {
-        if (!el) return;
-        const toRemove = [...el.classList].filter(
-            c => /(^|:)(w-\[|max-w-\[)/.test(c)
-        );
-        if (toRemove.length) el.classList.remove(...toRemove);
-    };
-
     const makeLayout = function(changes = []) {
         if (cleanup) return;
         if (!parent || !parent.isConnected) return;
@@ -210,11 +148,7 @@
                 mainContainer.className = [...mainContainer.classList].filter(c => !c.includes(":grid-cols-")).join(" ");
             }
             const subgrid = document.querySelector("div.subgrid-container");
-            stripWidthConstraints(subgrid);
-            if (subgrid) {
-                subgrid.style.maxWidth = "100%";
-                subgrid.style.width = "100%";
-            }
+            if (subgrid) subgrid.classList.remove("m:w-[1120px]");
             const sidebar = document.getElementById("right-sidebar-container");
             if (sidebar) sidebar.style.display = "none";
             parent.style.position = "relative";
@@ -227,27 +161,11 @@
         const totalHGapPx = HGAP * (columns + 1);
         const colWidthPx = (containerWidth - totalHGapPx) / columns;
 
-        const nodes = [...parent.querySelectorAll(FEED_ITEM_SELECTOR)];
-
-        // Filter to only direct layout items (skip deeply nested elements
-        // that happen to match the selector inside a shadow DOM etc.)
-        const layoutNodes = nodes.filter(n => {
-            let p = n.parentNode;
-            // Accept items whose parent is the feed container or a
-            // faceplate-batch directly inside it.
-            while (p && p !== parent) {
-                const tag = p.tagName ? p.tagName.toLowerCase() : '';
-                if (tag === 'faceplate-batch') {
-                    p = p.parentNode;
-                    continue;
-                }
-                break;
-            }
-            return p === parent;
-        });
+        const nodes = [...parent.querySelectorAll("article, shreddit-ad-post, faceplate-partial").values()];
 
-        for (const article of layoutNodes) {
-            const key = stableKey(article);
+        for (const article of nodes) {
+            const key = article.ariaLabel;
+            if (key === null) continue;
 
             observeArticleSize(article);
 
@@ -272,10 +190,15 @@
             parent.style.height = height + "px";
         }
 
-        for (const article of layoutNodes) {
-            const key = stableKey(article);
+        for (const article of nodes) {
+            const key = article.ariaLabel;
             const entry = postMap.get(key) ?? { col: 0, top: tops[0] };
             const leftPx = HGAP + entry.col * (colWidthPx + HGAP);
+            // Skip the setAttribute when the resolved layout for this article
+            // hasn't moved. setAttribute("style", …) always invalidates style
+            // even with an identical value, and re-running over hundreds of
+            // articles mid-animation (e.g. Safari Smart Zoom snapping back to
+            // 100%) is what causes the cutoff/flash on the way out.
             const layoutKey = cleanup ? '' : `${colWidthPx.toFixed(2)}|${entry.top}|${leftPx.toFixed(2)}`;
             if (article.dataset.rmcKey === layoutKey) continue;
             article.dataset.rmcKey = layoutKey;
@@ -287,9 +210,9 @@
             );
         }
 
-        for (const batch of parent.querySelectorAll("faceplate-batch")) {
+        for (const batch of parent.querySelectorAll("faceplate-batch").values()) {
             if (!batch.style.height) {
-                batch.style.height = [...batch.childNodes].reduce((h, c) => h + (c.clientHeight || 0), 0) + "px";
+                batch.style.height = [...batch.childNodes].reduce((h, c) => h + c.clientHeight, 0) + "px";
             }
         }
     };
@@ -297,9 +220,14 @@
     // Safari Smart Zoom (double-tap on a Magic Trackpad) is a visual-viewport
     // zoom — visualViewport.scale and window.innerWidth change, but the layout
     // viewport (parent.clientWidth in CSS pixels) does not, so there's nothing
-    // for us to lay out differently.
+    // for us to lay out differently. The trigger that does reach us is
+    // scrollend, which fires several times during the zoom because Safari pans
+    // the document while zooming. Running makeLayout mid-gesture is what
+    // produces the cutoff/flash on the way back out. Gating on vv.scale skips
+    // those scrollend-driven layouts during the gesture; window resize and
+    // ⌘+/⌘− leave vv.scale at 1, so they still flow through.
     const vv = window.visualViewport;
-    const isVvZoomedIn = () => vv ? vv.scale > 1.01 : false;
+    const isVvZoomedIn = () => vv ? Math.abs(vv.scale - 1) > 0.01 : false;
 
     let layoutScheduled = false;
     function requestLayout() {
@@ -332,46 +260,9 @@
         layoutSwitch.disconnect();
     };
 
-    // --- Feed container discovery ------------------------------------------
-    // Use a ranked list of strategies so that when Reddit changes its DOM we
-    // still find the feed.  Each strategy returns the container element or
-    // null.  The first non-null result wins.
-    const findParentStrategies = [
-        // Strategy 1: <shreddit-feed> custom element (current Reddit 2025+).
-        () => document.querySelector('shreddit-feed'),
-
-        // Strategy 2: legacy selector – an <article> followed by <hr> then
-        // <faceplate-partial> (pre-2025 Reddit).  Return its parentNode.
-        () => {
-            const anchor = document.querySelector('article + hr + faceplate-partial');
-            return anchor ? anchor.parentNode : null;
-        },
-
-        // Strategy 3: any container that holds multiple <article> children
-        // (generic heuristic).  Walk up from the first article's parent and
-        // pick the first ancestor that holds ≥2 articles.
-        () => {
-            const first = document.querySelector('main article');
-            if (!first) return null;
-            let el = first.parentNode;
-            while (el && el !== document.body) {
-                if (el.querySelectorAll(':scope > article, :scope > shreddit-post').length >= 2) return el;
-                // Also check one level deeper (faceplate-batch wrappers).
-                if (el.querySelectorAll('article, shreddit-post').length >= 2) return el;
-                el = el.parentNode;
-            }
-            return null;
-        },
-    ];
-
     const findParent = function() {
-        for (const strategy of findParentStrategies) {
-            try {
-                const result = strategy();
-                if (result) return result;
-            } catch (_) { /* strategy failed, try next */ }
-        }
-        return null;
+        const anchor = document.querySelector("article + hr + faceplate-partial");
+        return anchor ? anchor.parentNode : null;
     };
 
     let searchDeadline = 0;
@@ -384,12 +275,11 @@
             parent.style.position = "";
             parent.style.height = "";
             postMap = new Map();
-            nextSyntheticId = 0;
             resizeObserver.disconnect();
             disconnectPageObservers();
 
             hideFeed();
-            pageChange.observe(parent, { childList: true, subtree: true });
+            pageChange.observe(parent, { childList: true });
 
             const icon = cardIcon();
             if (icon) {
@@ -404,7 +294,6 @@
 
         if (found && found === parent) {
             postMap = new Map();
-            nextSyntheticId = 0;
             resizeObserver.disconnect();
             parent.style.position = "";
             parent.style.height = "";
@@ -491,9 +380,7 @@
 
     if (document.body) {
         start();
-    } else if (document.readyState === 'loading') {
-        document.addEventListener('DOMContentLoaded', start, { once: true });
     } else {
-        start();
+        window.addEventListener('DOMContentLoaded', start, { once: true });
     }
 })();
\ No newline at end of file
diff --git a/js/reddit-multi-column.js b/js/reddit-multi-column.js
index ba08a66..99c28b2 100644
--- a/js/reddit-multi-column.js
+++ b/js/reddit-multi-column.js
@@ -13,38 +13,16 @@
     const MAX_HIDE_MS = 1200;
     const FADE_MS = 150;
 
-    // Selectors used to locate feed items inside the feed container. Kept in
-    // one place so they're easy to update when Reddit changes its DOM.
-    const FEED_ITEM_SELECTOR = 'article, shreddit-post, shreddit-ad-post, faceplate-partial';
-
     let columns = COLUMNS;
     let cleanup = false;
 
     let parent = null;
     let currentPath = location.pathname;
 
-    const cardIcon = () => {
-        // Try multiple selectors – Reddit has changed the view-switcher element
-        // name/attributes over time.
-        const selectors = [
-            'shreddit-sort-dropdown[header-text="View"]',
-            'shreddit-view-nav',
-            'shreddit-sort-dropdown',
-        ];
-        for (const sel of selectors) {
-            const el = document.querySelector(sel);
-            if (!el) continue;
-            // If the component uses Shadow DOM, look inside it.
-            const root = el.shadowRoot || el;
-            const svg = root.querySelector('svg');
-            if (svg) return svg;
-        }
-        return undefined;
-    };
+    const cardIcon = () => document?.querySelector('shreddit-sort-dropdown[header-text="View"]')?.shadowRoot?.querySelector('svg');
     const shouldClean = (icon) => icon === undefined ? false : icon.getAttribute('icon-name') !== "view-card-outline";
 
     let postMap = new Map();
-    let nextSyntheticId = 0;
 
     const indexOfSmallest = function (a) {
         let lowest = 0;
@@ -54,29 +32,6 @@
         return lowest;
     };
 
-    // --- Stable key for each feed item ------------------------------------
-    // Reddit may or may not provide an aria-label, data-testid, or id on
-    // articles. We try several attributes and fall back to a synthetic id
-    // stamped on the element so that every item always gets a layout key.
-    const stableKey = function(el) {
-        if (el.dataset.rmcId) return el.dataset.rmcId;
-        const candidate =
-            el.getAttribute('aria-label') ||
-            el.getAttribute('id') ||
-            el.getAttribute('data-testid') ||
-            el.getAttribute('data-fullname') ||
-            el.getAttribute('data-post-id') ||
-            el.querySelector('[data-post-id]')?.getAttribute('data-post-id') ||
-            el.querySelector('a[href*="/comments/"]')?.getAttribute('href');
-        if (candidate) {
-            el.dataset.rmcId = candidate;
-            return candidate;
-        }
-        const synth = `rmc-synth-${nextSyntheticId++}`;
-        el.dataset.rmcId = synth;
-        return synth;
-    };
-
     // Reddit's <main> and the subgrid wrapper apply horizontal padding that
     // was pushing the feed container ~56px in from the viewport edge. That
     // padding was invisible to our layout math (we measured clientWidth of
@@ -103,16 +58,15 @@
                 box-sizing: border-box !important;
                 display: block !important;
             }
-            shreddit-feed > article,
-            shreddit-feed > shreddit-post,
-            shreddit-feed > shreddit-ad-post,
-            shreddit-feed > faceplate-partial,
-            shreddit-feed > faceplate-batch > article,
-            shreddit-feed > faceplate-batch > shreddit-post,
-            shreddit-feed > faceplate-batch > shreddit-ad-post,
-            shreddit-feed > faceplate-batch > faceplate-partial {
+            shreddit-feed article,
+            shreddit-feed shreddit-ad-post,
+            shreddit-feed faceplate-partial {
                 margin: 0 !important;
                 box-sizing: border-box !important;
+                /* Tell Safari each card is an isolated paint surface. Helps
+                   it re-rasterize only the tiles that actually changed after
+                   a visual zoom (Smart Zoom) instead of repainting the whole
+                   tall feed region. */
                 contain: layout paint !important;
             }
             custom-feed-header {
@@ -170,19 +124,6 @@
 
     // --- Layout ------------------------------------------------------------
 
-    // Strip width-constraining utility classes that Reddit may apply to any
-    // ancestor of the feed. Instead of targeting one exact class name, we
-    // remove anything that looks like a Tailwind fixed/max-width utility
-    // (e.g. "m:w-[1120px]", "lg:max-w-[960px]"), which is more resilient to
-    // Reddit changing the breakpoint values.
-    const stripWidthConstraints = function(el) {
-        if (!el) return;
-        const toRemove = [...el.classList].filter(
-            c => /(^|:)(w-\[|max-w-\[)/.test(c)
-        );
-        if (toRemove.length) el.classList.remove(...toRemove);
-    };
-
     const makeLayout = function(changes = []) {
         if (cleanup) return;
         if (!parent || !parent.isConnected) return;
@@ -195,11 +136,7 @@
                 mainContainer.className = [...mainContainer.classList].filter(c => !c.includes(":grid-cols-")).join(" ");
             }
             const subgrid = document.querySelector("div.subgrid-container");
-            stripWidthConstraints(subgrid);
-            if (subgrid) {
-                subgrid.style.maxWidth = "100%";
-                subgrid.style.width = "100%";
-            }
+            if (subgrid) subgrid.classList.remove("m:w-[1120px]");
             const sidebar = document.getElementById("right-sidebar-container");
             if (sidebar) sidebar.style.display = "none";
             parent.style.position = "relative";
@@ -212,27 +149,11 @@
         const totalHGapPx = HGAP * (columns + 1);
         const colWidthPx = (containerWidth - totalHGapPx) / columns;
 
-        const nodes = [...parent.querySelectorAll(FEED_ITEM_SELECTOR)];
-
-        // Filter to only direct layout items (skip deeply nested elements
-        // that happen to match the selector inside a shadow DOM etc.)
-        const layoutNodes = nodes.filter(n => {
-            let p = n.parentNode;
-            // Accept items whose parent is the feed container or a
-            // faceplate-batch directly inside it.
-            while (p && p !== parent) {
-                const tag = p.tagName ? p.tagName.toLowerCase() : '';
-                if (tag === 'faceplate-batch') {
-                    p = p.parentNode;
-                    continue;
-                }
-                break;
-            }
-            return p === parent;
-        });
+        const nodes = [...parent.querySelectorAll("article, shreddit-ad-post, faceplate-partial").values()];
 
-        for (const article of layoutNodes) {
-            const key = stableKey(article);
+        for (const article of nodes) {
+            const key = article.ariaLabel;
+            if (key === null) continue;
 
             observeArticleSize(article);
 
@@ -257,10 +178,15 @@
             parent.style.height = height + "px";
         }
 
-        for (const article of layoutNodes) {
-            const key = stableKey(article);
+        for (const article of nodes) {
+            const key = article.ariaLabel;
             const entry = postMap.get(key) ?? { col: 0, top: tops[0] };
             const leftPx = HGAP + entry.col * (colWidthPx + HGAP);
+            // Skip the setAttribute when the resolved layout for this article
+            // hasn't moved. setAttribute("style", …) always invalidates style
+            // even with an identical value, and re-running over hundreds of
+            // articles mid-animation (e.g. Safari Smart Zoom snapping back to
+            // 100%) is what causes the cutoff/flash on the way out.
             const layoutKey = cleanup ? '' : `${colWidthPx.toFixed(2)}|${entry.top}|${leftPx.toFixed(2)}`;
             if (article.dataset.rmcKey === layoutKey) continue;
             article.dataset.rmcKey = layoutKey;
@@ -272,9 +198,9 @@
             );
         }
 
-        for (const batch of parent.querySelectorAll("faceplate-batch")) {
+        for (const batch of parent.querySelectorAll("faceplate-batch").values()) {
             if (!batch.style.height) {
-                batch.style.height = [...batch.childNodes].reduce((h, c) => h + (c.clientHeight || 0), 0) + "px";
+                batch.style.height = [...batch.childNodes].reduce((h, c) => h + c.clientHeight, 0) + "px";
             }
         }
     };
@@ -282,8 +208,15 @@
     // Safari Smart Zoom (double-tap on a Magic Trackpad) is a visual-viewport
     // zoom — visualViewport.scale and window.innerWidth change, but the layout
     // viewport (parent.clientWidth in CSS pixels) does not, so there's nothing
-    // for us to lay out differently.
+    // for us to lay out differently. The trigger that does reach us is
+    // scrollend, which fires several times during the zoom because Safari pans
+    // the document while zooming. Running makeLayout mid-gesture is what
+    // produces the cutoff/flash on the way back out. Gating on vv.scale skips
+    // those scrollend-driven layouts during the gesture; window resize and
+    // ⌘+/⌘− leave vv.scale at 1, so they still flow through.
     const vv = window.visualViewport;
+    // Only bail on zoom-IN (Safari Smart Zoom). Don't gate on zoom-out, since
+    // some Safari configs report initial scale below 1 and we'd never lay out.
     const isVvZoomedIn = () => vv ? vv.scale > 1.01 : false;
 
     let layoutScheduled = false;
@@ -317,46 +250,9 @@
         layoutSwitch.disconnect();
     };
 
-    // --- Feed container discovery ------------------------------------------
-    // Use a ranked list of strategies so that when Reddit changes its DOM we
-    // still find the feed.  Each strategy returns the container element or
-    // null.  The first non-null result wins.
-    const findParentStrategies = [
-        // Strategy 1: <shreddit-feed> custom element (current Reddit 2025+).
-        () => document.querySelector('shreddit-feed'),
-
-        // Strategy 2: legacy selector – an <article> followed by <hr> then
-        // <faceplate-partial> (pre-2025 Reddit).  Return its parentNode.
-        () => {
-            const anchor = document.querySelector('article + hr + faceplate-partial');
-            return anchor ? anchor.parentNode : null;
-        },
-
-        // Strategy 3: any container that holds multiple <article> children
-        // (generic heuristic).  Walk up from the first article's parent and
-        // pick the first ancestor that holds ≥2 articles.
-        () => {
-            const first = document.querySelector('main article');
-            if (!first) return null;
-            let el = first.parentNode;
-            while (el && el !== document.body) {
-                if (el.querySelectorAll(':scope > article, :scope > shreddit-post').length >= 2) return el;
-                // Also check one level deeper (faceplate-batch wrappers).
-                if (el.querySelectorAll('article, shreddit-post').length >= 2) return el;
-                el = el.parentNode;
-            }
-            return null;
-        },
-    ];
-
     const findParent = function() {
-        for (const strategy of findParentStrategies) {
-            try {
-                const result = strategy();
-                if (result) return result;
-            } catch (_) { /* strategy failed, try next */ }
-        }
-        return null;
+        const anchor = document.querySelector("article + hr + faceplate-partial");
+        return anchor ? anchor.parentNode : null;
     };
 
     let searchDeadline = 0;
@@ -369,12 +265,11 @@
             parent.style.position = "";
             parent.style.height = "";
             postMap = new Map();
-            nextSyntheticId = 0;
             resizeObserver.disconnect();
             disconnectPageObservers();
 
             hideFeed();
-            pageChange.observe(parent, { childList: true, subtree: true });
+            pageChange.observe(parent, { childList: true });
 
             const icon = cardIcon();
             if (icon) {
@@ -389,7 +284,6 @@
 
         if (found && found === parent) {
             postMap = new Map();
-            nextSyntheticId = 0;
             resizeObserver.disconnect();
             parent.style.position = "";
             parent.style.height = "";