ChatGPT web-interface width fix (and other UI improvements)

chatgpt_ui_fix.user.js

// ==UserScript==
// @name         ChatGPT CSS fixes
// @version      2025-05-16
// @updateURL    https://gist.github.com/alexchexes/d2ff0b9137aa3ac9de8b0448138125ce/raw/chatgpt_ui_fix.user.js
// @downloadURL  https://gist.github.com/alexchexes/d2ff0b9137aa3ac9de8b0448138125ce/raw/chatgpt_ui_fix.user.js
// @namespace    http://tampermonkey.net/
// @description  Adjusts width of side bar and messages of the ChatGPT web interface
// @author       alexchexes
// @match        https://chat.openai.com/*
// @match        https://chatgpt.com/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=openai.com
// @grant        GM_addStyle
// ==/UserScript==

/* global GM_addStyle */

console.info("%c'ChatGPT CSS fixes' userscript is connected", 'color: #8ff; background: #000');

(function () {
	const SELECTORS = {
		PROMPT_INPUT: `div#prompt-textarea.ProseMirror`,
		SIDEBAR: `.shrink-0.overflow-x-hidden[style*="260px"]`,
	};

	// Prevent chatGPT bug that breaks interface when PageUp/PgDown key is pressed when textarea is focused and not empty
	document.addEventListener('keydown', function (e) {
		if (
			(e.key === 'PageUp' || e.key === 'PageDown') &&
			e.target.matches(SELECTORS.PROMPT_INPUT)
		) {
			e.preventDefault();
		}
	});

	const accentForDark = `#f39c12`;

	const defaultSettings = {
		/* CHAT ELEMENTS */

		chatWidth: {
			enabled: true,
			maxWidth: `90%`,
		},

    userInputWidth: {
			enabled: true,
			maxWidth: `70%`,
    },

    projectScreenWidth: {
			enabled: true,
			maxWidth: `70vw`,
    },

		textAreaHeight: {
			enabled: true,
			maxHeight: '50dvh',
		},

		codeBlockFont: {
			enabled: true,
			fontFamily: `Consolas`,
		},

		codeBlockBackground: {
			enabled: true,
			bgColorDark: `#181818`,
			// bgColorLight: `#252525`,
		},

		codeBlockLineBreaks: { enabled: true },
		inlineCodeColor: { enabled: true },
		codeBlocksInUserMessages: { enabled: true },

		userMessageVisibility: {
			enabled: true,
			backgroundDark: `linear-gradient(135deg, #34437a, #2b2f54)`,
			backgroundLight: `#c1d6f6`,
		},

		botAvatarVisibility: { enabled: true },

		botThinkingHeadings: {
			enabled: true,
			colorDark: `#66ceff`,
			colorLight: `#0047c2`,
		},

    responseVariantsVisibility: { enabled: true },

		/* TOP BAR */

		topBarTransparency: { enabled: true },

		projectChatNameVisibility: { enabled: true },

		gptVersionVisibility: {
			enabled: true,
			color: accentForDark,
		},

		/* SIDEBAR */

		sidebarWidth: {
			enabled: true,
			sidebarWidth: `330px`,
		},
		sidebarHeadingsVisibility: {
			enabled: true,
			color: accentForDark,
		},
		multilineHistoryTitles: {
			enabled: true,
		},

		/* MISC */

		// modal in Personalisation > Memory height
		saneModalHeight: {
			enabled: true,
		},

    projectChatsSubtitles: {
      enabled: true,
    },

    projectChatsPaddings: {
      enabled: true,
    },
	};

	const constructFeaturesCss = () => {
		const cssByFeature = {
			/*------------------------------*
			 *         CHAT ELEMENTS         *
			 *-------------------------------*/

			/* Main chat section width */
			chatWidth: `
				@container (min-width: 768px) {
					article .\\@\\[64rem\\]\\:\\[--thread-content-max-width\\:48rem\\] {
						max-width: ${defaultSettings.chatWidth.maxWidth} !important;
					}
				}
			`,

			userInputWidth: `
				@container (min-width: 768px) {
          #thread-bottom-container .\\@\\[64rem\\]\\:\\[--thread-content-max-width\\:48rem\\] {
            max-width: ${defaultSettings.userInputWidth.maxWidth} !important;
          }
				}
			`,

			projectScreenWidth: `
				@container (min-width: 850px) {
          .px-\\(--thread-content-margin\\).h-full > .mx-auto.flex.max-w-\\(--thread-content-max-width\\).flex-1.text-base.flex-col {
            max-width: ${defaultSettings.projectScreenWidth.maxWidth} !important;
          }
				}
			`,

			textAreaHeight: `
				@media (min-width: 768px) {
					.max-h-\\[25dvh\\].overflow-auto {
						max-height: ${defaultSettings.textAreaHeight.maxHeight};
					}
				}
			`,

			/* Code blocks font */
			codeBlockFont: `
				code, pre {
					font-family: ${defaultSettings.codeBlockFont.fontFamily}, ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace !important;
				}
			`,

			/* Code blocks background color */
			codeBlockBackground: `
				/* DARK */
				html.dark pre > div.rounded-md {
					background-color: ${defaultSettings.codeBlockBackground.bgColorDark};
				}
			`,

			/* Break lines in code blocks */
			codeBlockLineBreaks: `
				code, code.whitespace-pre\\!, code.whitespace-pre\\! > span:only-child {
	        display: inline-block;
	        white-space: pre-wrap !important;
	        overflow-wrap: anywhere !important;
        }
			`,

      inlineCodeColor: `
        html.dark [data-message-author-role="user"] div > code,
				html.dark .prose code:not(:where(pre code)) {
	        color: #eab38a;
	        background: #272727;
	        border: 1px solid rgba(94, 93, 89, 0.25);
        }
        html.dark .prose a>code:not(:where(pre code)) {
	        color: inherit;
        }
      `,

			/* Code blocks inside user messages */
			codeBlocksInUserMessages: `
				/* inline code */
				[data-message-author-role="user"] div > code {
					font-size: 14px;
					background: #00000030 !important;
					border-radius: .25rem;
					padding: 1px 5px;
					border: 1px solid #00000026 !important;
				}

				/* multiline code blocks */
				[data-message-author-role="user"] pre {
					background: #00000030;
					padding: 2px 7px;
					border-radius: 11px;
				}

				/* multiline code blocks FONT SIZE */
				[data-message-author-role="user"] pre > code {
					font-size: 14px;
				}
			`,

			/* Make our messages more visible. */
			userMessageVisibility: `
				/* DARK */
				html.dark [data-message-author-role="user"].text-message > .w-full > .bg-token-message-surface {
					background: ${defaultSettings.userMessageVisibility.backgroundDark};
				}

				/* LIGHT */
				html.light [data-message-author-role="user"].text-message > .w-full > .bg-token-message-surface {
					background: ${defaultSettings.userMessageVisibility.backgroundLight};
				}
			`,

			/* Make bot message start more visible by increasing visibility of its avatar. */
			botAvatarVisibility: `
				/* DARK */
				html.dark .gizmo-bot-avatar > div {
					background: linear-gradient(45deg, #3F51B5, #00BCD4);
				}
				html.dark .gizmo-bot-avatar {
					outline: none;
				}

				/* LIGHT */
				html.light .gizmo-bot-avatar > div {
					background: #252525;
					color: #ffffff;
				}
			`,

			botThinkingHeadings: `
			  html.dark article p strong.font-semibold.text-token-text-primary {
			  	color: ${defaultSettings.botThinkingHeadings.colorDark};
			  }
		  	html.light article p strong.font-semibold.text-token-text-primary {
		  		color: ${defaultSettings.botThinkingHeadings.colorLight};
		  	}
			`,


			responseVariantsVisibility: `
			  article div.has-data-\\[state\\=open\\]\\:opacity-100:has(button[aria-label="Previous response"]) {
			  	opacity: 1 !important;
			  }
        button[aria-label="Previous response"] + div.tabular-nums {
          background: #f39c12;
	        border-radius: 6px;
	        color: #181818;
	        padding: 0 5px;
        }
			`,



			/*----------------*
			 *     TOP BAR     *
			 *-----------------*/

			/* Make top bar transparent as it consumes vertical space for no reason */
			topBarTransparency: `
				#page-header {
					background: transparent !important;
	        position: absolute;
	        width: 100%;
	        box-shadow: none;
				}
        #page-header + div .\\@thread-xl\\/thread\\:pt-header-height {
	        padding-top: 32px;
        }

				/* Background for top bar element that shows the current GPT version */
				/* DARK */
				html.dark #page-header button:not(:hover) {
					background-color: #2121218a;
					border-radius: 8px;
					backdrop-filter: blur(2px);
				}
				/* LIGHT */
				html.light #page-header button:not(:hover) {
					background-color: #ffffffb0;
					border-radius: 8px;
					backdrop-filter: blur(2px);
				}
			`,

			/* Project chat name visibility */
			projectChatNameVisibility: `
				/* DARK */
				html.dark main .sticky.top-0 .flex.items-center.gap-0.overflow-hidden button > div.truncate {
					color: #e9cc9e;
				}
				/* LIGHT */
				html.light main .sticky.top-0 .flex.items-center.gap-0.overflow-hidden button > div.truncate {
					color: #000;
				}
			`,

			/* GPT version visibility */
			gptVersionVisibility: `
				/* DARK */
				html.dark .sticky.top-0 [type="button"] > div > span.text-token-text-tertiary {
					color: ${defaultSettings.gptVersionVisibility.color};
				}
				/* LIGHT */
				html.light .sticky.top-0 [type="button"] > div > span.text-token-text-tertiary {
					color: #000;
				}
			`,

			/*------------------*
			 *      SIDEBAR      *
			 *-------------------*/

			/* Sidebar width */
			sidebarWidth: `
				@media not all and (max-width: 768px) {
					${SELECTORS.SIDEBAR},
					${SELECTORS.SIDEBAR} .w-\\[var\\(--sidebar-width\\)\\] {
						width: ${defaultSettings.sidebarWidth.sidebarWidth} !important;
					}
				}
			`,

			/* History periods headings (like "Today", "Yesterday") visibility */
			sidebarHeadingsVisibility: `
				/* DARK */
				html.dark ${SELECTORS.SIDEBAR} h3 {
					color: ${defaultSettings.sidebarHeadingsVisibility.color};
				}

				/* LIGHT */
				html.light ${SELECTORS.SIDEBAR} h3 {
					font-weight: 700;
				}
			`,

			multilineHistoryTitles: `
				${SELECTORS.SIDEBAR} li > div > a > div.relative.grow.overflow-hidden.whitespace-nowrap {
					overflow: visible;
					white-space: unset;
				}
				${SELECTORS.SIDEBAR} li:not(:hover) > div > a > div.relative.grow.overflow-hidden.whitespace-nowrap > div.absolute.to-transparent {
					background-image: none;
				}
				${SELECTORS.SIDEBAR} li > div {
					height: auto !important;
				}
			`,

			/* MISC */
			saneModalHeight: `
				div[role="dialog"] .h-\\[24rem\\] {
					height: 75vh;
				}
			`,

      projectChatsSubtitles: `
        html.dark li.hover\\:bg-token-main-surface-secondary .text-token-text-secondary.truncate.text-sm {
	        color: #999999;
        }
      `,

      projectChatsPaddings: `
        li.hover\\:bg-token-main-surface-secondary .group.relative.flex.flex-col.gap-1.p-4 {
	        padding-block: 8px;
        }
      `,
		};

		// Adding a unique string to find our <style> element later
		let cssStyles = `/* USERSCRIPT_FEATURES_STYLES */`;

		// Combine feature CSS blocks into a single CSS string if enabled in the current settings
		for (let key in cssByFeature) {
			if (Object.prototype.hasOwnProperty.call(cssByFeature, key)) {
				if (typeof defaultSettings[key] !== 'undefined' && defaultSettings[key].enabled) {
					cssStyles += cssByFeature[key] + '\n';
				}
			}
		}

		cssStyles = cssStyles.replaceAll('\t', ' ');
		return cssStyles;
	};

	const renderFeaturesStyles = () => {
		const css = constructFeaturesCss();
		GM_addStyle(css);
	};

	/* Stub for the later feature update */
	// const removeFeaturesStyles = () => {
	// 	let style_elements = document.querySelectorAll('style');

	// 	style_elements.forEach(style_el => {
	// 		if (style_el.innerHTML.includes('USERSCRIPT_FEATURES_STYLES')) {
	// 			style_el.remove();
	// 		}
	// 	});
	// };

	renderFeaturesStyles();
})();

Now it worked!! LOL
I removed the extension "Custom Style Script" and now it magically worked again haha. Oops! 😅
It's weird because I'm pretty sure I didnt have any custom styles in that extension because I tried to use it mainly to change fonts, not UI 🤔. Guess I'll never know.

Anyway, I think my issue is resolved.

Thank you very much @alexchexes lmL

One more thing, it seems Stylebot is also reverting the CSS fixes this userscript does, even if I'm using it only to change the font_family. Guess I'll need to find a way to change this userscript to read a local woff2 file.

@dievilz Glad to hear it's working!
Could you clarify one thing please?
After disabling the "Custom Style Script," did the script start working without updating to the latest version (the one I just rolled out that uses the GM_addStyle API)?
Or did you update to the latest version, but it still didn’t work until you disabled the "Custom Style Script"?

Regarding your issue with the local font, I think you can try to grant Tampermonkey permission to read local files, but wouldn’t it be easier to find or convert font to TTF and install it as a system font and then add the appropriate CSS in the script like this:

/* Code blocks font */
cssBlocks.codeBlockFontFamily = `
  code, pre {
    font-family: PragmataPro, Consolas,Söhne Mono,Monaco,Andale Mono,Ubuntu Mono,monospace!important;
  }
`;

Yeah, ofc.
I updated to the latest version (the one that uses GM_addStyle), and then disabled Custom Syle Script and Stylebot and it worked! Right now is working with GM_addStyle.

I have them in TTF too. I already tried it this way:

  cssBlocks.userFont = `
    pre, code {
      font-family: 'PragmataPro', monospace !important;
      font-size: 16.9px;
    }
  `;

and it worked, except the font-size property :(

@dievilz
So even with the latest version, it didn’t work until you disabled the other extensions? I’m just trying to figure out what’s happening here since you mentioned earlier that this script wasn’t working while "Wider AI Chat" was 🙂 I changed the main difference between the scripts, expecting that this one would start working under the same conditions as "Wider AI Chat", but it isn't, right?

---

Try

font-size: 16.9px !important;

P.S. Just updated the script to handle changes to the upper bar selectors to restore its transparency, and I also added a new style for code blocks inside user input (they now have a background and text wrapping).

Vanilla:

Userscript:

@alexchexes

So even with the latest version, it didn’t work until you disabled the other extensions?

Yes, just as you said, because I still made some testing after the GM_addStyle addition and it didn't work.

I changed the main difference between the scripts, expecting that this one would start working under the same conditions as "Wider AI Chat", but it isn't, right?

I tested again by enabling 'Wider AI Chat', enabling Stylebot, and that userscript is working fine.

My guess is that Stylebot is removing your CSS fixes at load time, because if I try the following flow:

1. Disable Stylebot custom style for ChatGPT.
2. Disable Wider AI Chat in Violentmonkey
3. Enable ChatGPT CSS fixes in Violentmonkey
4. Reopen the browser, then ChatGPT
5. ChatGPT now shows CSS fixes
6. If I enable my custom style in Stylebot...

Then the font changes I made are applied without disabling the CSS fixes. I guess was the same for Custom Style Script extension.

Try

font-size: 16.9px !important;

It worked! Thank you!
I'mma save it here for userscript updates:

  cssBlocks.userFont = `
    code, pre {
      font-family: 'PragmataPro', monospace !important;
      font-size: 16.9px !important;
    }
  `;

@dievilz Ok, I'll investigate the interaction between this script and Stylebot a bit later.
Thank you!

Thank you very much for it. Works exactly as I expected 🥳

@pqeiufc You're welcome! 😎

Hi, @alexchexes!

Sorry to bother you again, but the userscript is failling again 😓.

The best way to describe it is that without other extensions enabled, if I reload the tab, the UI fixes (the userscript) load correctly and everything is nice, but if I change to another chat, the CSS for the sidebar (only the sidebar really) reverts to default, and it can't be enabled again, unless I reload the tab, although is useless because of the previously mentioned behaviour.

To be specific, the immediate changes I can quickly notice is that the sidebar is narrower again, the subtitles for 'last time used' are not orange but the modification to wrap the name of the chat is still working (I don't remember if that's something you fixed or was a default). Also I notice like a week ago (when the userscript was working) the default font for the website changed for another one that was nicer to see and was bold and also that was reverted.

And strangely, everything else is working fine, the chat view is still wide and for example, the cssBlocks.userFont snippet that you gave me, is still working fine, I can still see my custom font.

I tested on Brave and Opera and both have the same problem.

It's not a dealbreaker but I got used to that orange hue and bold text hehe.

@dievilz Yeah I'm aware of the problem, it came up recently, going to update the script soon. Thank you

UPD: The script is updated

Yeah, it's working again! Thank you @alexchexes! 🙌

Updated script:

• Fixed a recent regression with history titles heights.
• Textareas (where you type a new message or edit an existing one) can now occupy more vertical space, which is useful, for example, when pasting a large piece of code and editing it directly in the chat.

Before/After:

Thanks for your work on this, if this didn't exist I would have to personally manage api stuff to use chatgpt in some entire different interface I'd have to run as a service locally.

Thanks for your work on this, if this didn't exist I would have to personally manage api stuff to use chatgpt in some entire different interface I'd have to run as a service locally.

You're welcome! Tell me if you have any problems with it.

You can also check this out: ChatGPT improved syntax highlighting

Reddit post

You're welcome! Tell me if you have any problems with it.

I've had my tab crash out when pasting large amounts of text in my chats. This crashing will happen as soon as I press 'send'.

Removing the sections responsible for changing formatting of my sent text resolves it:

 
// ==UserScript==
// @name         ChatGPT CSS fixes2
// @version      2025-01-16
// @updateURL    https://gist.github.com/alexchexes/d2ff0b9137aa3ac9de8b0448138125ce/raw/chatgpt_ui_fix.user.js
// @downloadURL  https://gist.github.com/alexchexes/d2ff0b9137aa3ac9de8b0448138125ce/raw/chatgpt_ui_fix.user.js
// @namespace    http://tampermonkey.net/
// @description  Adjusts width of side bar and messages of the ChatGPT web interface
// @author       alexchexes
// @match        https://chat.openai.com/*
// @match        https://chatgpt.com/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=openai.com
// @grant        GM_addStyle
// ==/UserScript==

/* global GM_addStyle */

console.info('%c\'ChatGPT CSS fixes\' userscript is connected', 'color: #8ff; background: #000');

(function() {
	const defaultSettings = {
		chatWidth: {
			enabled: true,
			maxWidth: `90%`,
		},
		textAreaHeight: {
			enabled: true,
			maxHeight: '65dvh',
		},
		codeBlockFont: {
			enabled: true,
			fontFamily: `Consolas`,
		},
		codeBlockBackground: {
			enabled: true,
			bgColorDark: `#181818`,
		},
		sidebarWidth: {
			enabled: true,
			sidebarWidth: `330px`,
		},
	};

	const constructFeaturesCss = () => {
		const sidebar_container_selector = `.flex-shrink-0.overflow-x-hidden[style*="260px"]`;

		const cssByFeature = {
			chatWidth: `
				@media (min-width: 1280px) {
					.xl\\:max-w-3xl {
						max-width: ${defaultSettings.chatWidth.maxWidth} !important;
					}
				}
				@media (min-width: 1024px) {
					.lg\\:max-w-\\[38rem\\] {
						max-width: ${defaultSettings.chatWidth.maxWidth} !important;
					}
				}
				@media (min-width: 768px) {
					.md\\:max-w-2xl {
						max-width: ${defaultSettings.chatWidth.maxWidth} !important;
					}
					.md\\:max-w-3xl {
						max-width: ${defaultSettings.chatWidth.maxWidth} !important;
					}
				}
			`,
			textAreaHeight: `
				@media (min-width: 768px) {
					.max-h-\\[25dvh\\].overflow-auto {
						max-height: ${defaultSettings.textAreaHeight.maxHeight};
					}
				}
			`,
			codeBlockFont: `
				code, pre {
					font-family: ${defaultSettings.codeBlockFont.fontFamily}, ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace !important;
				}
			`,
			codeBlockBackground: `
				html.dark pre > div.rounded-md {
					background-color: ${defaultSettings.codeBlockBackground.bgColorDark};
				}
			`,
			sidebarWidth: `
				@media not all and (max-width: 768px) {
					${sidebar_container_selector},
					${sidebar_container_selector} .w-\\[260px\\] {
						width: ${defaultSettings.sidebarWidth.sidebarWidth} !important;
					}
				}
			`,
		};

		let cssStyles = `/* USERSCRIPT_FEATURES_STYLES */`;

		for (let key in cssByFeature) {
			if (Object.prototype.hasOwnProperty.call(cssByFeature, key)) {
				if (defaultSettings[key]?.enabled) {
					cssStyles += cssByFeature[key] + '\n';
				}
			}
		}

		cssStyles = cssStyles.replaceAll("\t", ' ');
		return cssStyles;
	};

	const renderFeaturesStyles = () => {
		const css = constructFeaturesCss();
		GM_addStyle(css);
	};

	renderFeaturesStyles();
})();

 

@LaptopDev What are the overall specs of your machine? I didn't have this problem, but my laptop is quite powerful, so I'm interested in what you are using and whether you have other userscripts/extensions for chatgpt.com.

By the way, you could also disable features by changing enabled: true to enabled: false in the defaultSettings object.

v2025-04-08:
Fix everything that was broken after ChatGPT CSS selectors update

Is it only for me on firefox, there isn't anymore full width ? how to fix this ? Thanks you

Yeah they broke it last night. I’ll fix it soon, stay tuned

Full width is fixed! Everything is working again. Link to the raw code for fast update:
https://gist.github.com/alexchexes/d2ff0b9137aa3ac9de8b0448138125ce/raw/chatgpt_ui_fix.user.js

Thanks youuu for you speed !!

Hi they broke your script again.

@jaydee0004 Hi, could you share a screenshot or describe what's wrong? I don't see any issue on my side at the moment - but maybe it's a gradual update...

Here's a screenshot:

The output text is fixed, it's just the textbox input that is not scaling properly.

@jaydee0004 I just adjusted the input screen width. Try it out and let me know if that works for you.

P.S. Interesting enough, you and I have different interfaces (on this screen I didn't change anything):

this is great thanks

@simcc You're welcome! Thanks for the feedback!