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

CHANGELOG.md

2026-07-23

• Fix/improve "Chat|Work" toggle: add an accent color for the active one, and remove styles meant for in-chat top bar buttons.

2026-07-19

• Update for recent UI changes (black background bleeding in dark theme)

2026-07-09

• fix(ChatGPT UI/DOM changes): fix user message bubble color for messages other than the first one in a thread

2026-06-29

• Fix dark background being accidentally applied to white theme for certain UI elements. Thanks @simcc!

2026-06-28

• Fix background color for https://chatgpt.com/codex/cloud (see previous log entry about adding new mainBgColor tweak)
• Fix dark background color being accidentally applied to white theme

2026-06-17

• Add mainBgColor default option that restores a readable UI background in place of the eye-bleeding #000-black. If you like #000 or use an OLED display, you can remove this by setting defaultSettings.mainBgColor.enabled to false.

2026-05-02

• apply width fix for group chats as well
• fix newer accessibility regression: code blocks' font size in ChatGPT messages has become unreadable at 12.5px, fix that by applying 14px font size CSS

chatgpt_ui_fix.user.js

// ==UserScript==
// @name         ChatGPT CSS fixes
// @version      2026-07-23
// @description  Adjusts the ChatGPT web UI for convenience: wider chat area, colored message bubbles, clearer code blocks, multi-line history items, and a few other tweaks for heavy ChatGPT use. ❤️ CONSIDER SUPPORT: ko-fi.com/alexchexes ❤️
// @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
// @author       alexchexes
// @website      https://ko-fi.com/alexchexes
// @namespace    http://tampermonkey.net/
// @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: `#stage-slideover-sidebar[style*="sidebar-width"]`,
    CHAT_MESSAGE: `[data-turn]`,
  };
 
  // 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 = {
    // Main UI background color
    mainBgColor: {
      enabled: true,
      bgColorDark: `#292828`,
    },
 
    /* 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 },
 
    tableMargins: { enabled: true },
 
    /* TOP BAR */
 
    topBarTransparency: { enabled: true },
 
    projectChatNameVisibility: { enabled: true },
 
    gptVersionVisibility: {
      enabled: true,
      colorLegacy: accentForDark,
    },
 
    /* SIDEBAR */
 
    sidebarWidth: {
      enabled: true,
      sidebarWidth: `330px`,
    },
    sidebarHeadingsVisibility: {
      enabled: true,
      color: accentForDark,
    },
    multilineHistoryTitles: {
      enabled: true,
    },
 
    /* MISC (chatGPT) */
 
    // modal in Personalisation > Memory height
    saneModalHeight: {
      enabled: true,
    },
 
    projectChatsSubtitles: {
      enabled: true,
    },
 
    projectChatsListWidth: {
      enabled: true,
    },
 
    projectChatsPaddings: {
      enabled: true,
    },
 
    headersColor: {
      enabled: true,
    },
 
    listBulletsColors: {
			enabled: true
		},
 
    chatTypeButtonColor: {
			enabled: true,
      color: `var(--theme-secondary-btn-bg)`,
		},
 
    /* CODEX */
    inTaskTextAreaSize: {
      enabled: true,
    },
  };
  
  const constructFeaturesCss = () => {
    const cssByFeature = {
      // Main UI BG color
      mainBgColor: `
        html.dark,
        html.dark body,
        html.dark .bg-token-sidebar-surface-primary,
        html.dark .bg-surface-primary,
        html.dark .bg-\\(--sidebar-surface-primary\\),
        html.dark .dark\\:bg-token-bg-secondary-surface,
        html.dark .bg-token-main-surface-primary,
        html.dark #thread-bottom-container:after
        {
          background-color: ${defaultSettings.mainBgColor.bgColorDark} !important;
        }

        html.dark .content-fade:after {
          background-color: ${defaultSettings.mainBgColor.bgColorDark} !important;
          -webkit-mask-image: linear-gradient(to bottom, #0000 0, ${defaultSettings.mainBgColor.bgColorDark} var(--content-fade-distance), ${defaultSettings.mainBgColor.bgColorDark} 100%) !important;
          -webkit-mask-image: linear-gradient(to bottom, #0000 0, ${defaultSettings.mainBgColor.bgColorDark} var(--content-fade-distance), ${defaultSettings.mainBgColor.bgColorDark} 100%) !important;
          -webkit-mask-image: linear-gradient(to bottom, #0000 0, ${defaultSettings.mainBgColor.bgColorDark} var(--content-fade-distance), ${defaultSettings.mainBgColor.bgColorDark} 100%) !important;
          -webkit-mask-image: linear-gradient(to bottom, #0000 0, ${defaultSettings.mainBgColor.bgColorDark} var(--content-fade-distance), ${defaultSettings.mainBgColor.bgColorDark} 100%) !important;
          mask-image: linear-gradient(to bottom, #0000 0, ${defaultSettings.mainBgColor.bgColorDark} var(--content-fade-distance), ${defaultSettings.mainBgColor.bgColorDark} 100%) !important;
        }

        [data-testid="thread-disclaimer"] {
          display: none;
        }
      `,
 
      /*------------------------------*
       *         CHAT ELEMENTS         *
       *-------------------------------*/
 
      /* Main chat section width */
      chatWidth: `
				@container (min-width: 768px) {
					${SELECTORS.CHAT_MESSAGE} > div > .\\[--thread-content-max-width\\:40rem\\],
          /* group chats: */
          main > div[role="presentation"] > section > div > div > .\\[--thread-content-max-width\\:40rem\\]
          {
						max-width: ${defaultSettings.chatWidth.maxWidth} !important;
					}
 
					/* Deep Research containers */
					${SELECTORS.CHAT_MESSAGE} > div > .\\[--thread-content-max-width\\:40rem\\] .p-4.sm\\:p-8,
					${SELECTORS.CHAT_MESSAGE} > div > .\\[--thread-content-max-width\\:40rem\\] .p-4.sm\\:p-8 > .\\[--thread-content-max-width\\:40rem\\] {
						max-width: 100%;
					}
				}
			`,
 
      userInputWidth: `
				@container (min-width: 768px) {
          #thread-bottom-container .\\[--thread-content-max-width\\:40rem\\] {
            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;
          font-size: 14px;
				}
			`,
 
      /* Code blocks background color */
      codeBlockBackground: `
				/* DARK */
				html.dark pre > div.rounded-md,
        html.dark .bg-token-bg-elevated-secondary {
					background-color: ${defaultSettings.codeBlockBackground.bgColorDark};
				}
			`,
 
      // Break lines in code blocks (both chatGPT and user messages)
      codeBlockLineBreaks: `
				@media (min-width: 768px) {
					pre .cm-content,
					pre.overflow-x-auto > code {
						white-space: pre-wrap !important;
						overflow-wrap: anywhere !important;
						min-width: unset !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 .user-message-bubble-color {
					background: ${defaultSettings.userMessageVisibility.backgroundDark};
				}
 
				/* LIGHT */
				html.light .user-message-bubble-color {
					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 ${SELECTORS.CHAT_MESSAGE} p strong.font-semibold.text-token-text-primary {
			  	color: ${defaultSettings.botThinkingHeadings.colorDark};
			  }
		  	html.light ${SELECTORS.CHAT_MESSAGE} p strong.font-semibold.text-token-text-primary {
		  		color: ${defaultSettings.botThinkingHeadings.colorLight};
		  	}
			`,
 
      responseVariantsVisibility: `
			  ${SELECTORS.CHAT_MESSAGE} 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;
        }
			`,
 
      tableMargins: `
        ${SELECTORS.CHAT_MESSAGE} [class*="_tableContainer"] {
	        width: 100%;
	        max-width: 100%;
	        margin: 0;
	        scrollbar-width: auto;
          pointer-events: auto;
        }
        ${SELECTORS.CHAT_MESSAGE} [class*="_tableContainer"] > [class*="_tableWrapper"] {
	        margin: 0;
        }
      `,
 
      /*----------------*
       *     TOP BAR     *
       *-----------------*/
 
      /* Make top bar transparent as it consumes vertical space for no reason */
      topBarTransparency: `
				#page-header {
					background: transparent !important;
	        width: 100%;
	        box-shadow: none;
				}
 
				/* Background for top bar element that shows the current GPT version */
				/* DARK */
				html.dark #page-header button:not(:hover):not([data-state="on"]):not([data-state="off"]),
        html.dark .translucent-surface {
					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: `
        /* OLD: */
				/* DARK */
				html.dark .sticky.top-0 [type="button"] > div > span.text-token-text-tertiary {
					color: ${defaultSettings.gptVersionVisibility.colorLegacy};
				}
				/* LIGHT */
				html.light .sticky.top-0 [type="button"] > div > span.text-token-text-tertiary {
					color: #000;
				}
 
        /* NEW (2026-04) */
        button.__composer-pill--neutral > span {
          color: var(--default-theme-entity-accent);
        }
			`,
 
      /*------------------*
       *      SIDEBAR      *
       *-------------------*/
 
      /* Sidebar width */
      sidebarWidth: `
				@media not all and (max-width: 768px) {
					${SELECTORS.SIDEBAR},
					${SELECTORS.SIDEBAR} .w-\\(--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} #history a[draggable="true"] .truncate {
					overflow: visible;
					white-space: normal;
				}
				${SELECTORS.SIDEBAR} #history a[draggable="true"] > div.text-token-text-tertiary.flex.items-center.self-stretch {
          position: absolute;
	        right: 5px;
	        top: 50%;
	        translate: 0 -50%;
				}
			`,
 
      /* MISC */
      saneModalHeight: `
				div[role="dialog"] .h-\\[24rem\\] {
					height: 75vh;
				}
			`,
 
      projectChatsSubtitles: `
        html.dark li.hover\\:bg-token-bg-tertiary a .text-token-text-secondary.truncate.text-sm {
	        color: #999999;
        }
      `,
 
      projectChatsListWidth: `
        .text-base.overflow-y-auto.my-auto.mx-auto:has(li.hover\\:bg-token-bg-tertiary) {
          width: 100%;
        }
      `,
 
      projectChatsPaddings: `
        li.hover\\:bg-token-bg-tertiary .group.relative.flex.flex-col.gap-1.p-4 {
	        padding-block: 8px;
        }
      `,
 
      headersColor: `
				html.dark ${SELECTORS.CHAT_MESSAGE} h1,
				html.dark ${SELECTORS.CHAT_MESSAGE} h2,
				html.dark ${SELECTORS.CHAT_MESSAGE} h3,
				html.dark ${SELECTORS.CHAT_MESSAGE} h4,
				html.dark ${SELECTORS.CHAT_MESSAGE} h5,
				html.dark ${SELECTORS.CHAT_MESSAGE} h6 {
					color: #ffcc6d;
				}
			`,
 
      listBulletsColors: `
				html.dark ${SELECTORS.CHAT_MESSAGE} li::marker {
					color: #e4cc9e;
				}
			`,

      chatTypeButtonColor: `
        html.dark #page-header button[data-state="on"]:not(:hover) {
          background-color: ${defaultSettings.chatTypeButtonColor.color};
        }
      `,
 
      inTaskTextAreaSize: `
        ._prosemirror-parent_kfgfu_2 {
          max-height: 50vh !important;
        }
      `,
    };
 
    // Adding a unique string to find our <style> element later
    const cssIdComment = `/* USERSCRIPT_FEATURES_STYLES */`;
 
    const cssBase = `
      #stage-sidebar-tiny-bar {
        cursor: pointer;
      }
    `;
 
    let cssStyles = cssIdComment + cssBase;
 
    // 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 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();
})();

Great work, absolutely love the wide view of chats, that helps so much! I really don't understand why their UI/UX is so damn horrible.
I've been making some changes to the sticky move-to-bottom button which I found so annoying being right in the middle overlapping the chat and moved it to the right hand side, which looks so much cleaner now.
Maybe you could add that to the script as well:

        div:has(article) > div:last-child > button {
            right: 40px !important;
            left: auto !important;
            bottom: 40px !important;
        }

Also it would be kinda nice if the given settings could be edited in the frontend (for the people who just added your github version with auto updates instead of forking). I am not really a fan of the light blue for example.

They seem to have broken your script in Safari... the sidebar is all wonky...but Chrome is still working fine...odd

Also it would be kinda nice if the given settings could be edited in the frontend (for the people who just added your github version with auto updates instead of forking). I am not really a fan of the light blue for example.

f2e8e6 is what I always change it to...manually...muted pastel red grey pink ish...easy to read/spot, but not too distinct...

@DediqaTech and @simcc, thanks for the feedback! Yes, it was indeed planned to make the options configurable via the UI, I just didn't have enough time to finish it.

Regarding the reported problem in macOS Safari, @simcc, thanks - I'll check it and fix it.

As for the "move-to-bottom" button position, @DediqaTech, a customization option for this would be nice to have, though I'm afraid people might get used to having that button in the center, and moving it somewhere else by default for everyone might break muscle memory (I personally use it often and have kinda gotten used to where it's placed now).

They seem to have broken your script in Safari... the sidebar is all wonky...but Chrome is still working fine...odd

fixed

They seem to have broken your script in Safari... the sidebar is all wonky...but Chrome is still working fine...odd

fixed

Thanks a mil Alex!

It appears that OpenAI just redid some of the UI options in the web interface (such as the dropdown to select the model) that have broken this script. It's no longer working for me on either of my machines (Vivaldi browser).

@yagoiroot Yes, thank you, I'm aware, going to fix this in the nearest days.

@yagoiroot Yes, thank you, I'm aware, going to fix this in the nearest days.

Glad to hear, thank you so much!

@yagoiroot Fixed, tell me if you still see any problems after updating.

New in version 2026-04-22

Added distinct headings and list marker colors in the dark theme. Before/After:

You can disable that by setting headersColor/listBulletsColors enabled: false.

I've made an extension that widens chat window https://github.com/ibobak/WideChat, welcome to try

Update. See #CHANGELOG.md

Hi, thanks for keeping this updated...recently my older version started acting up, so I updated to latest...but things are looking a bit weird on Safari, code is blacked out, and is that gradient down the bottom supposed to be there?

Ah it's just light mode...dark mode is OK...I use light mode mostly

OK I think I fixed it: https://pastebin.com/wKfWW14k

@simcc Thanks! Updated the gist with your fix (if you sync, restore your custom color for userMessageVisibility if you want).