Please widen the code block style element in chat

Hi, I like to code with chat gpt, but one annoyance is the code block element in your UI is quite narrow and doesn’t respond to changes in screen width. Horizontal scrolling to read code is annoying and it doesn’t use all the space on the screen, too much padding.

Also, when you have side by side comparisons with code, they get really really narrow and this makes it harder to decide which response is better

11 Likes

It’s annoying that the code blocks (all the output for that matter) only occupies about half of the available screen real estate. Hence, one must scroll horizontally a great deal while trying to read the code or alternatively copy it into a code editor and read it there. It would be quite helpful if the code blocks expanded dynamically to occupy the available screen real estate.

6 Likes

As an intermediate solution you can just somehow include additional styles, for example:

.text-base {
    max-width: 100% !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
}

You can write an extension for Chrome, or try to use any appropriate extension that can apply custom user CSS.

By the way, you can ask ChatGPT directly how to do so

3 Likes

Thanks!

Used Stylebot with Chrome.


With Stylebot disabled

With Stylebot enabled

Details for setup (Click triangle to expand)
  1. Install Stylebot

  2. Using the ChatGPT web page enter a prompt to create lines longer than 100 characters, e.g. Create some CSV lines that are more than 100 characters.

  3. In the upper right of Chrome click the extensions icon (looks like a puzzle piece)
    image

    This will show a list of installed extensions.

    image

  4. Click Stylebot

    image

  5. Click Open Sytlebot

  6. At the bottom select <> Code

    image

  7. Paste in the CSS as given by @EugenS

.text-base {
    max-width: 100% !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
}

image

  1. May need to refresh the page to apply the additional CSS rules.
  2. Close the Stylebot dialog by clicking the close icon in the upper right (Circle with X inside)
    image

If you want to be able to quickly enable/disable Stylebot then click the pin icon in the list of extensions.

Before clicking pin for Stylebot
image

After click pin for Stylebot
image

and then can click on the Stylebot icon in the upper right of Chrome.

4 Likes

Nice, guide @EricGT
You should edit the code block containing the css to say .text-base instead of text-base.
Cheers.

2 Likes

That works*!*

Another one-off approach is to apply styling in the Dev Tools console:

const elements = document.getElementsByClassName('text-base');
for (let i = 0; i < elements.length; i++) {
    elements[i].style.maxWidth = '100%';
    elements[i].style.paddingLeft = '20px';
    elements[i].style.paddingRight = '20px';
}
4 Likes

Hello, CalvinDale,
Nice snippet, but unfortunately it won’t work for new .text-base blocks
I think something like this is can be used if you want to use JS in Dev Tools:

const style = document.createElement('style');
style.innerText = `
.text-base {
    max-width: 100% !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
}
`;
document.head.appendChild(style);
1 Like

ironically that works so well that the output box is wider even with dev tools open.
OpenAI are super good at some of the most advanced things in the world and practically the worst at some very basic things.

This is especially strange when their AI acts like big brother bot all the time yet fails hard when it comes to accessibility and such for its users.

Sorry, not meaning to rant. I actually love how powerful it can be and I’m sure all the staff do their best and then some. Just baffles my mind.

1 Like

I agree it would be nice to have a setting to change the width. @EricGT solution worked great for me.

1 Like

This will modify the css rule, so it applies to any element as they are created, rather being limited to the ones that exist at the time.

Make a bookmark, create a bookmarklet folder [optional, I use this to organize my bookmarklets], I also use surfingkeys to quickly use any bookmark, but you can put this on your bookmark bar.

Name the bookmark to anything, like, “ChatGPT Window Text Size”, save this as the url.

javascript:(function() {
    var styleSheet = document.styleSheets[0];
    var rules = styleSheet.cssRules || styleSheet.rules;

    for (var i = 0; i < rules.length; i++) {
        var rule = rules[i];
        if (rule.selectorText === '.text-base') {
            rule.style.setProperty('max-width', '100%', 'important');
            rule.style.setProperty('padding-left', '20px', 'important');
            rule.style.setProperty('padding-right', '20px', 'important');
        }
    }
})();

I’m really amazed this is still a thing… but… it is… anyways, there’s a nice Chrome extension called “Wide GPT” (ref) in the Chrome Web Store which makes things nice as they should be.

4 Likes

Expanded on @CalvinDale’s snippet (with GPT’s help of course) to make it into a tampermonkey script. It’s good if you want more control and don’t want to install that WideGPT extension:

// ==UserScript==
// @name         Expand Text Base on OpenAI Platform
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  Expand text-base elements on OpenAI's chat platform
// @author       You
// @match        https://openai.com/chat/
// @match        https://chat.openai.com/c*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    function expandTextBase() {
        const elements = document.querySelectorAll('.text-base:not([data-expanded])');
        if (elements.length === 0) {
            return; // No unprocessed elements, so exit
        }

        for (let i = 0; i < elements.length; i++) {
            elements[i].style.maxWidth = '100%';
            elements[i].style.paddingLeft = '20px';
            elements[i].style.paddingRight = '20px';
            elements[i].setAttribute('data-expanded', 'true');
        }
        console.log('expandTextBase executed'); // To verify it's running
    }

    let debounceTimer;
    function debouncedExpandTextBase() {
        clearTimeout(debounceTimer);
        debounceTimer = setTimeout(expandTextBase, 300); // waits 300ms after last mutation
    }

    const observer = new MutationObserver((mutationsList) => {
        for(let mutation of mutationsList) {
            // If the addedNodes property has one or more nodes
            if(mutation.addedNodes.length) {
                debouncedExpandTextBase();
                break; // No need to process other mutations if one already triggers the function
            }
        }
    });

    observer.observe(document.body, {
        childList: true,
        subtree: true
    });

})();

Thank you so much for the detailed step-by-step walk-through with images. It was really helpful! In just 2 mins, my biggest grievance with ChatGPT has been solved!

1 Like

Precisely. Its stunning how come such bright engineers did not tune this trivial detail by now.
That would be #1 to tune up, right ? So easy, obvious, YET with a significant impact :smiley: :slight_smile:

1 Like

took some fiddling today to colorize the various nested boxes in play, this breaks a lot, here’s a new version

#__next > div > div.relative.h-full > main > div.h-full > div.flex-1 > div > div > div.flex-col > div
{
    border: 3px solid red;
    background-color: pink;

}      

#__next > div > div.relative.h-full > main > div.h-full > div.flex-1 > div > div > div.flex-col > div > div
{
    border: 3px solid green;
    background-color: lime;

}      

#__next > div > div.relative.h-full > main > div.h-full > div.flex-1 > div > div > div.flex-col > div > div > div
{
    border: 3px solid blue;
    background-color: lightblue;
    min-width: 90vw !important;
    width: 90vw !important;
    max-width: 90vw !important;
}
1 Like

It’s absolutely mind boggling to me that some of the smartest humans that have ever existed in the history of the planet, let alone right now, haven’t figured out that the users would like a wider codeblock on the chat interface, to prevent horizontally scrolling.

It’s one thing if it’s an initial feature that gets overlooked, but to have not addressed it by now? That’s why people are typically cynical and disdainful of corporations. Seemingly common sense decisions are overlooked, and if there IS a good reason for it, then it could easily be addressed or explained away with a quick little blurb (even if people don’t agree with it, at least we could sort of begrudgingly accept it and say, “oh, so that’s your reason? Ugh. Ok, well, whatever”).

1 Like

the sad truth is, this fix would take me less than 1 hour of tinkering with tailwind css in nextjs if I could work on the chat.openai.com frontend, so there is zero justification to not fix it months ago.

I also would have added some basic local text search function before even launching, but maybe I have higher standards than OpenAI’s web frontend team. literally, debounce input, map(contains(query), messages) … if google is scary competition for openai, then it makes zero sense to not include basic text search. it works on iphone, why not aim for feature parity between web and mobile? you can edit GPTs on the web, but not search; you can search on mobile, but not edit GPTs. editing GPTs has no version control at all

just seems sloppy, and OpenAI ought to raise their quality standards dramatically. even this post, i can’t submit, because they think there is a link in my text here, but there totally is no link in my text here except the name of the website in question “chat dot openai dot com”

1 Like

I also would have added some basic local text search function before even launching, but maybe I have higher standards than OpenAI’s web frontend team. literally, debounce input, map(contains(query), messages) … if google is scary competition for openai, then it makes zero sense to not include basic text search.

Oh yeah, that’s another thing I’ve wished for for months - the ability to search our history for a specific String. The history is great, and being able to give them custom titles, but realistically, unless someone is literally creating new chats for every single conversation (maybe I’m doing it wrong), who’s gonna know “ok, topic X if I recall was in my conversation that I labeled Y.” So it’s almost useless as it is.

Yea if you’re really lazy like me, use the WideGPT google chrome extension to do this easily for you! :slight_smile:

1 Like

Chad? Is that you?

(mandatory additional text here)