Last active
April 25, 2026 10:52
-
-
Save itwondersteam/ab43b327ef4aeb6692c12aaaf22a0efc to your computer and use it in GitHub Desktop.
Maximise twitter content view (zen view)
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| (() => { | |
| const NS = 'TwitterZen'; | |
| const STYLE_ID = `${NS}Style`; | |
| const BTN_ID = `${NS}Btn`; | |
| const HIDDEN_ATTR = `data-${NS}-hidden`; | |
| const WIDTH = 1650; // <-- modify for the max width | |
| const cleanup = () => { | |
| document.getElementById(STYLE_ID)?.remove(); | |
| document.getElementById(BTN_ID)?.remove(); | |
| document.querySelectorAll(`[${HIDDEN_ATTR}="1"]`).forEach(el => { | |
| el.style.removeProperty('display'); | |
| el.removeAttribute(HIDDEN_ATTR); | |
| }); | |
| document.documentElement.classList.remove(NS); | |
| window[`${NS}Observer`]?.disconnect?.(); | |
| delete window[`${NS}Observer`]; | |
| }; | |
| cleanup(); | |
| const style = document.createElement('style'); | |
| style.id = STYLE_ID; | |
| style.textContent = ` | |
| html.${NS} body, | |
| html.${NS} main[role="main"] { | |
| width: 100vw !important; | |
| max-width: 100vw !important; | |
| } | |
| html.${NS} [data-testid="primaryColumn"] { | |
| width: min(${WIDTH}px, 96vw) !important; | |
| max-width: min(${WIDTH}px, 96vw) !important; | |
| min-width: 0 !important; | |
| margin-left: auto !important; | |
| margin-right: auto !important; | |
| border-left: none !important; | |
| border-right: none !important; | |
| flex: 0 1 auto !important; | |
| position: relative !important; | |
| left: 0 !important; | |
| right: 0 !important; | |
| } | |
| html.${NS} [data-testid="primaryColumn"] * { | |
| max-width: 100% !important; | |
| } | |
| #${BTN_ID} { | |
| position: fixed !important; | |
| right: 16px !important; | |
| bottom: 16px !important; | |
| z-index: 2147483647 !important; | |
| padding: 10px 14px !important; | |
| border: 0 !important; | |
| border-radius: 999px !important; | |
| background: rgba(15,20,25,.92) !important; | |
| color: #fff !important; | |
| font: 600 13px/1 system-ui, sans-serif !important; | |
| box-shadow: 0 8px 24px rgba(0,0,0,.28) !important; | |
| cursor: pointer !important; | |
| } | |
| `; | |
| document.head.appendChild(style); | |
| function findPrimary() { | |
| return document.querySelector('[data-testid="primaryColumn"]'); | |
| } | |
| function hideSiblingBranches() { | |
| document.querySelectorAll(`[${HIDDEN_ATTR}="1"]`).forEach(el => { | |
| el.style.removeProperty('display'); | |
| el.removeAttribute(HIDDEN_ATTR); | |
| }); | |
| const primary = findPrimary(); | |
| if (!primary) return false; | |
| let node = primary; | |
| let levels = 0; | |
| while (node && node !== document.body && levels < 6) { | |
| const parent = node.parentElement; | |
| if (!parent) break; | |
| const kids = [...parent.children]; | |
| if (kids.length > 1) { | |
| kids.forEach(kid => { | |
| if (kid !== node && !kid.contains(primary)) { | |
| kid.setAttribute(HIDDEN_ATTR, '1'); | |
| kid.style.setProperty('display', 'none', 'important'); | |
| } | |
| }); | |
| } | |
| node = parent; | |
| levels++; | |
| } | |
| return true; | |
| } | |
| function centerPrimaryContainer() { | |
| const primary = findPrimary(); | |
| if (!primary) return; | |
| const parent = primary.parentElement; | |
| if (parent) { | |
| parent.style.setProperty('display', 'block', 'important'); | |
| parent.style.setProperty('width', '100%', 'important'); | |
| } | |
| primary.style.setProperty('margin-left', 'auto', 'important'); | |
| primary.style.setProperty('margin-right', 'auto', 'important'); | |
| } | |
| function apply() { | |
| const ok = hideSiblingBranches(); | |
| if (!ok) return; | |
| document.documentElement.classList.add(NS); | |
| centerPrimaryContainer(); | |
| } | |
| const btn = document.createElement('button'); | |
| btn.id = BTN_ID; | |
| btn.textContent = 'Restore'; | |
| btn.onclick = cleanup; | |
| document.body.appendChild(btn); | |
| apply(); | |
| const observer = new MutationObserver(() => { | |
| if (!document.documentElement.classList.contains(NS)) return; | |
| clearTimeout(window[`${NS}Timer`]); | |
| window[`${NS}Timer`] = setTimeout(apply, 150); | |
| }); | |
| observer.observe(document.body, { childList: true, subtree: true }); | |
| window[`${NS}Observer`] = observer; | |
| console.log('Zen view applied at 1650px'); | |
| })(); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment