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
For the coders - and those that want to see twice as many chats
On light theme, white space is no longer just white.
(and bye bye upgrade ad)
Controls also un-bubbled.
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.)
