A repair of the new ChatGPT redesign - for desktop coders and designers (Tampermonkey script)

The new ChatGPT that is rolling out this week? Just disappointing.

Future generations will look back at this cartoon bubble mobile phone interface and think “what were they thinking”, (like brushed-aluminum iTunes or ribbed Aqua jellybeans of 2002 MacOS).

I got in to the CSS code and started fixing. I spent a good amount of time tackling every narrow text box that looks like a chat bubble, every rounded button, everything that wastes 2/3s of the screen, everything that jumps around when you resize to ensure maximum unused space. All the settings, GPTs and store. And make it available as a Tampermonkey CSS script.

Before and after animations.

For the art creators
chatgpt-compare-1

For the coders - and those that want to see twice as many chats
chatgpt-compare-2

On light theme, white space is no longer just white.
chatgpt-compare-3
(and bye bye upgrade ad)

Controls also un-bubbled.
chatgpt-compare-4

Plus every width was carefully considered: wide text for your past inputs. Paragraphs the AI writes narrow, while lists and headlines are longer. A huge clean input box. Buttons unhidden and moved, and highlighted with a light border. Top bar that is transparent. Everything check in both light and dark theme.

You’ll have to install the Tampermonkey extension (or Greasemonkey). (or create a bookmarklet. Then paste the understandable script into a new userscript in the extension’s dashboard.

ChatGPT redesign tampermonkey script 2024-05-15
// ==UserScript==
// @name         ChatGPT Max Code Width
// @namespace    http://tampermonkey.net/
// @version      2024.05.22
// @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 = `
.w-\\[90\\%\\] {width: 100% !important; background-color: var(--main-surface-tertiary) !important;}
.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-\\[400px\\] {max-width: 768px !important;}
.aspect-\\[4\\/7\\] {max-width:512px !important}
.aspect-\\[7\\/4\\] {aspect-ratio: 7/4; max-width: 896px;}
.max-w-\\[90\\%\\] {max-width: 77rem !important;}
.max-w-\\[70\\%\\] {max-width: 77rem !important;}
.xl\\:px-5 {padding: 0.25rem !important;}
.w-8 {width: 1.5rem !important; min-height: 2.5rem !important; margin-bottom: 0; border-radius:0px ! important;}
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;}
.items-end {align-items: unset !important; background-color: var(--main-surface-tertiary) !important;}
.justify-end {justify-content: unset !important;}
.dark\\:bg-token-main-surface-secondary {background-color: var(--main-surface-tertiary) !important;}
.juice\\:items-end {align-items: flex-start !important;}
.juice\\:w-8 {width: unset !important;}
.juicex\\:h-8 {height: unset !important;}
.ZnJ1aXRqdWljZQ .juice\\:rounded-2xl {border-radius: 0rem !important;}
.ZnJ1aXRqdWljZQ .juice\\:rounded-lg {border-radius: 0rem !important;}
a.p-2 {padding: 0 !important;}
.sticky.juice\\:p-3 {background-color: #00f3 ! important; height: unset ! important; padding: 0;}
div.absolute.bottom-0.right-full.top-0 {	display: flex !important; position: unset !important;}
button.flex.h-9.w-9.items-center.justify-center {height: unset !important}
.ZnJ1aXRqdWljZQ .btn {border-radius:0px ! important; padding:.2rem .4rem ! important; min-width: 4rem;}
.rounded-\\[26px\\] {border-radius: 0px ! important; padding: 0px ! important;}
.rounded-sm {border-radius: 0px; height: 30px;}
.rounded-full, .rounded-md, .rounded-2xl {border-radius:0px;}
.rounded-3xl, .rounded-xl {border-radius: 0px !important;}
.rounded-lg {border-radius: unset !important; border: 1px solid #aaa2;}
div[class~="flex"][class~="flex-col"][class~="pt-2"][class~="juice:py-2"] {display: none;}
.ZnJ1aXRqdWljZQ.juice\\:w-full {width: 1.5rem;}
div[class~="gizmo-shadow-stroke"][class~="rounded-full"] {max-width: 30px;}
.ZnJ1aXRqdWljZQ .juice\\:rounded-full {border-radius: 0px;}
.h-14 {height: unset ! important;}
.text-xs {padding: 1px ! 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);
})();

(please DM any bugs. Note that the user settings menu has been moved to the upper-right in this update.)

4 Likes

The most appalling thing to me is white backgrounds!! I don’t even know which websites or webapps have that because I use “Dark Reader” browser extension for Chrome, so I never see white. Even your animated gifs there caused me a little eye trauma. haha.

1 Like

I’m unfamiliar with Tampermonkey but this new interface is driving me nuts please help

1 Like

Tampermonkey is one of the most popular browser extension with over 10 million users. It’s available for Chrome, Microsoft Edge, Safari, Opera Next, and Firefox.

It allows its users to customize and enhance the functionality of your favorite web pages. Userscripts are small JavaScript programs that can be used to add new features or modify existing ones on web pages. With Tampermonkey, you can easily create, manage, and run these userscripts on any website you visit.

For example, with Tampermonkey, you could add a new button to a web page that lets you quickly share a link on social media, or to automatically fill in a form with your personal information. This is especially useful in the age of digitization, where web pages are often used as user interfaces for accessing a wide range of services and applications.

In the browser extension, after installing to browser, you just have to click the extension, launch dashboard, click the “plus” tab to create new user script, paste the expanded code block above, and save from within the extension’s menu. Then a reload of ChatGPT and you get the modified user interface, which is just a stylesheet injected into the start of the page, not active javascript (as would be needed to overcome some other javascript, like the chat history width.)

I am very suspicious of people telling me to run scripts without explaining exactly what they do, due to my past experiences fighting the G2A scam that tricks you into running a Tampermonkey script to redirect a payment to the scammer. Please explain what the script does in detail.

I could lie to you about what the script does, which is pretty straightforward if you expand the code above.

ChatGPT with its new look can do my describing for me. https://chatgpt.com/share/24907956-c2bc-434c-810a-2d732b0180eb

I do not have any script update mechanism.

Looks a bit off but it works. Thanks!

I don’t know. I prefer the narrower width. This is common in news websites, as well as blogs. Humans seem to prefer a certain max width size for readability. For those that know Tailwind, check out the prose typography plugin – it uses well tested principles for text design on systems.

Fortunately, your concerns are already considered.

Yep the AI will keep its writing to one side, meanwhile your writing can stretch about twice as far from the left edge.

That is a deliberate decision so that coders can see their input.

You can adjust this line’s value to 44 to have your input half the width.

.max-w-\\[90\\%\\] {max-width: 88rem !important;}
1 Like

Thank you, this is really cool. I use the same. I like the wide version and I like to see the entire thing. Also if it’s writing long code or long text, it’s using my entire screen instead of just a little piece and becoming too long.