Fixing ChatGPT's UI for Coders (TamperMonkey script)

ChatGPT
1

I made a TamperMonkey script that Fixes ChatGPT’s “Vertical Letterbox” where the output is forced into a narrow column.

With this script, the content will now expand to fill the entire window so that code blocks can be read without scrolling left/right.

ChatGPT helped with the script. It knows it’s UI is garbage :slight_smile:

image

here’s the script:

// ==UserScript==
// @name Makes ChatGPT Conversations wider
// @namespace http://tampermonkey.net/
// @version 1.0
// @description Makes ChatGPT Conversations wider
// @author Your Name
// @match https://chat.openai.com/*
// @grant none
// @icon https://www.google.com/s2/favicons?sz=64&domain=chat.openai.com
// ==/UserScript==

(function() {
‘use strict’;
function makeWider(element) {
const classesToRemove = [
‘lg:max-w-[38rem]’,
‘gizmo:md:max-w-3xl’,
‘gizmo:lg:max-w-[40rem]’,
‘gizmo:xl:max-w-[48rem]’,
‘xl:max-w-3xl’,
‘md:max-w-2xl’,
‘md:max-w-3xl’
];

    element.classList.remove(...classesToRemove);
}

function findAndMakeWider() {
    const flexDivs = document.querySelectorAll('div.flex.flex-1');
    flexDivs.forEach(makeWider);
}


function observeDOM() {
    const targetNode = document.body;
    const config = { childList: true, subtree: true };

    const observer = new MutationObserver(function(mutationsList) {
       for (let mutation of mutationsList) {
           if (mutation.addedNodes.length > 0) {
                findAndMakeWider();
           }
       }
    });
    observer.observe(targetNode, config);
}

observeDOM();

})();