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

chatgpt_ui_fix.user.js

// ==UserScript==
// @name         ChatGPT CSS fixes
// @version      2024-11-08
// @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 accentForDark = `#f39c12`;

	const defaultSettings = {
		/* CHAT ELEMENTS */

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

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

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

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

		userMessageVisibility: {
			enabled: true,
			backgroundDark: `linear-gradient(45deg, #3c4b83, #343a79)`,
			backgroundLight: `#c1d6f6`,
		},

		botAvatarVisibility: { enabled: true },

		/* TOP BAR */

		topBarTransparency: { enabled: true },

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

		/* SIDEBAR */

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

	const constructFeaturesCss = () => {
		const sidebar_container_selector = `.flex-shrink-0.overflow-x-hidden[style*="260px"]`;
	
		const cssByFeature = {
			/*------------------------------*
			*         CHAT ELEMENTS         *
			*-------------------------------*/
			
			/* Main chat section width */
			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;
					}
				}
			`,
	
			/* 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 {
					white-space: pre-wrap !important;
				}
			`,
	
			/* Code blocks inside user messages */
			codeBlocksInUserMessages: `
				/* inline code */
				[data-message-author-role="user"] div > code {
					background: #00000030;
					border-radius: 11px;
					padding: 2px 5px;
				}

				/* 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 > .flex.w-full.flex-col > .bg-token-message-surface {
					background: ${defaultSettings.userMessageVisibility.backgroundDark};
				}
	
				/* LIGHT */
				html.light [data-message-author-role="user"].text-message > .flex.w-full.flex-col > .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;
				}
			`,
	
			/*----------------*
			*     TOP BAR     *
			*-----------------*/
			
			/* Make top bar transparent as it consumes vertical space for no reason */
			topBarTransparency: `
				html div.sticky.top-0.flex.items-center.justify-between.z-10.font-semibold {
					background-color: rgba(0,0,0,0);
				}
	
				/* Background for top bar element that shows the current GPT version */
				/* DARK */
				html.dark .sticky.top-0 [type="button"]:not(:hover) {
					background-color: #0000001f;
					border-radius: 8px;
				}
				/* LIGHT */
				html.light .sticky.top-0 [type="button"]:not(:hover) {
					background-color: #ffffffb0;
					border-radius: 8px;
				}
			`,
	
			/* GPT version visibility */
			gptVersionVisibility: `
				/* DARK */
				html.dark .sticky.top-0 [type="button"] > div > span.text-token-text-secondary {
					color: ${defaultSettings.gptVersionVisibility.color};
				}
				/* LIGHT */
				html.light .sticky.top-0 [type="button"] > div > span.text-token-text-secondary {
					color: #000;
				}
			`,
	
			/*------------------*
			*      SIDEBAR      *
			*-------------------*/
	
			/* Sidebar width */
			sidebarWidth: `
				@media not all and (max-width: 768px) {
					${sidebar_container_selector},
					${sidebar_container_selector} .w-\\[260px\\] {
						width: ${defaultSettings.sidebarWidth.sidebarWidth} !important;
					}
				}
			`,
			
			/* History periods headings (like "Today", "Yesterday") visibility */
			sidebarHeadingsVisibility: `
				/* DARK */
				html.dark ${sidebar_container_selector} h3 {
					color: ${defaultSettings.sidebarHeadingsVisibility.color};
				}
	
				/* LIGHT */
				html.light ${sidebar_container_selector} h3 {
					font-weight: 700;
				}
			`,

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

		// 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();
})();

@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! 🙌