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

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