Last active
September 17, 2025 10:40
-
-
Save AitorAstorga/cae2b3deddd112ef8306f421b7f13f78 to your computer and use it in GitHub Desktop.
ChatGPT Width Expander - Tampermonkey Script
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
| // ==UserScript== | |
| // @name ChatGPT Width Expander | |
| // @namespace http://tampermonkey.net/ | |
| // @version 1.2.0 | |
| // @description Expand chat width to ~90% by overriding new container-based max-width var | |
| // @author Aitor Astorga Saez de Vicuña | |
| // @match https://chatgpt.com/* | |
| // @grant none | |
| // ==/UserScript== | |
| (function () { | |
| 'use strict'; | |
| const TARGETS = [ | |
| '.xl\\:max-w-\\[48rem\\]', | |
| '.thread-lg\\:\\[--thread-content-max-width\\:48rem\\]' | |
| ]; | |
| function widen(el) { | |
| // Fallback for old layout containers | |
| try { el.style.maxWidth = '90%'; } catch (_) {} | |
| // New layout: override the CSS variable used by the thread container | |
| try { el.style.setProperty('--thread-content-max-width', '90vw'); } catch (_) {} | |
| } | |
| function applyAll(root = document) { | |
| for (const sel of TARGETS) { | |
| root.querySelectorAll(sel).forEach(widen); | |
| } | |
| } | |
| // Also drop a global override as a belt-and-suspenders fallback | |
| (function injectGlobalCSS() { | |
| const style = document.createElement('style'); | |
| style.textContent = ` | |
| :root { --thread-content-max-width: 90vw !important; } | |
| `; | |
| document.documentElement.appendChild(style); | |
| })(); | |
| // Initial pass | |
| applyAll(); | |
| // Reactively apply on DOM changes | |
| const obs = new MutationObserver(muts => { | |
| for (const m of muts) { | |
| if (m.type === 'childList') { | |
| m.addedNodes.forEach(n => { | |
| if (!(n instanceof Element)) return; | |
| applyAll(n); | |
| }); | |
| } | |
| if (m.type === 'attributes' && m.target instanceof Element) { | |
| applyAll(m.target); | |
| } | |
| } | |
| }); | |
| obs.observe(document.body, { childList: true, subtree: true, attributes: true }); | |
| })(); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment