Please widen the code block style element in chat

There is also a Greasy Fork script called “ChaptGPT Widescreen Mode”

Works like a charm.

1 Like

This tampermonkey script works (still leaving margin though), while my previous “wide” was broken by page changes.

https://www.reddit.com/r/ChatGPT/comments/15nbpaa/chatgpts_webinterface_width_fix/

1 Like

Well, let’s try. My chrome is not able to access google account.

Thanks for the setup details, this has been bugging me for ages!

Something (things) has changed. c h a t . o p e n a i . c o m now redirects to c h a t g p t . c o m. This breaks the Wide GPT extension. I tried modifying the tampermonkey script posted here and add a new match line. It doesn’t seem to work. Tried to change the manifest on the Wide GPT extension - but I am missing something. Might need to be resigned (might be cached). I could dig into the page’s CSS and js, but will take time and I am a bit rusty.

Go to the Chrome Store and search for WideGPT, I’m actively maintaining this extension to address this problem.

Yup, they did, I just fixed my extension to address this change. Look for WideGPT on Google Chrome app store.

I modified my own script, and that modification was just changing the domain to have it work again.

I have more UI tweaks that don’t play nice with “light” theme and are suited to just what I like.

image

The original request was for code blocks to be expanded in width, which is sorely needed. However, the solutions presented thus far, including the extension by @juanbiscaia just expand the width of the entire text column. This unfortunately significantly affects the readability of the non-code blocks of text on wider displays. The ideal character length per line is around 45-75, which is why the chat interface has relatively narrow columns in the first place.

The question is: can the fix be applied just to code blocks, leaving the rest of the interface intact?

The extension I made has a slider to set how wide the column should be. Targeting only code blocks is a challenge, but doable, I’m working to add this feature to it.

It can be applied to everything but code blocks…

In the above, I have variable maximum widths that should cover all scenarios, including images wider but not too wide, inputs that allow you to see your wide code, lists a bit longer because the eye follows them without needing wrap. etc.

Minimum Tampermonkey script to inject CSS (with the !important CSS you can get into ChatGPT with other methods also)

// ==UserScript==
// @name         ChatGPT Max Code Width
// @namespace    http://tampermonkey.net/
// @version      2024-05-14
// @description  make all widths wide, then narrow message text
// @author       -J
// @match        https://chatgpt.com/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=chatgpt.com
// @grant        none
// ==/UserScript==

(function() {
	const messagesCss = `
        .xl\\:max-w-\\[48rem\\] {
            max-width: 100% !important;
        }
        .lg\\:max-w-\\[40rem\\] {
            max-width: 100% !important;
        }
        .md\\:max-w-3xl {
            max-width: 100% !important;
        }
        .max-w-\\[90\\%\\] {
            max-width: 99rem !important;
        }
        .xl\\:px-5 {
            padding-left: .25rem !important;
            padding-right: .25rem;
        }
        .w-8 {
            width: 1.5rem !important;
        }
        .aspect-\\[7\\/4\\] {
            aspect-ratio: 7/4;
            max-width: 1280px;
        }
        ul, ol, li {
            max-width: 66rem !important;
        }
        fieldset, figure, h1, h2, h3, h4, h5, h6 {
            max-width: 55rem !important;
        }
        p, ul, ol {
            max-width: 44rem !important;
        }
`;

	const cssStyles = (messagesCss).replaceAll("\t", ' ');

	// Create a new <style> element and set its content to the CSS rules
	var styleElement = document.createElement("style");
	styleElement.innerHTML = cssStyles;

	// Append the new <style> element to the <head> section of the document
	document.head.appendChild(styleElement);
})();