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();

})();

2

I’ve updated it there
it also handle dialogs (for chatgpt paid version)

// ==UserScript==
// @name Makes ChatGPT Conversations wider
// @namespace [http://tampermonkey.net/ ](http://tampermonkey.net/)
// @version 2.0
// @description Makes ChatGPT Conversations wider
// @author reach4thelasers. Thibault Ketterer
// @match https://chat.openai.com/*
// @grant none
// @icon [https://www.google.com/s2/favicons?sz=64&domain=chat.openai.com ](https://www.google.com/s2/favicons?sz=64&domain=chat.openai.com)
// ==/UserScript==

(function() {
    //use strict;

    function makeWider(element) {
        console.log("element", element);
        const classesToRemove = [
            'lg:max-w-[38rem]',
            'md:max-w-3xl',
            'lg:max-w-[40rem]',
            'xl:max-w-[48rem]',
//            'xl:max-w-3xl',
//            'md:max-w-2xl',
//            'md:max-w-3xl',
//            'md:px-5',
//            'lg:px-1',
            'xl:px-5',

            // dialogs
            'max-w-lg',
            'max-h-[75vh]'

        ];


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



function findAndMakeWider() {
    const flexDivs = document.querySelectorAll('div.flex.flex-1');
    //flex flex-1 text-base mx-auto gap-3 md:px-5 lg:px-1 xl:px-5 lg:max-w-[40rem] xl:max-w-[48rem] group final-completion
    //flex flex-1 text-base mx-auto gap-3  group final-completion
    flexDivs.forEach(makeWider);

    const diagDivs = document.querySelectorAll('div[role="dialog"]');
    diagDivs.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();


})();

ht tps://gist.github.com/thibault-ketterer/18b9d60db179aeb0fc1efca6539c7668

1 Like
3

Thanks for the update, I hadn’t noticed it broke again. The script does break from time-to-time as they change the UI.

Isn’t ChatGPT’s HTML absolutely awful?