Last active
June 2, 2025 14:38
-
-
Save alexchexes/d2ff0b9137aa3ac9de8b0448138125ce to your computer and use it in GitHub Desktop.
ChatGPT web-interface width fix (and other UI improvements)
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // ==UserScript== | |
| // @name ChatGPT CSS fixes | |
| // @version 2025-06-02 | |
| // @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 }, | |
| tableMargins: { 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[class][class][class], code[class][class][class].whitespace-pre\\!, code.whitespace-pre\\!:not([data-highlighted="true"]) > 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; | |
| } | |
| `, | |
| tableMargins: ` | |
| article [class^="_tableContainer"] { | |
| width: 100%; | |
| max-width: 100%; | |
| margin: 0; | |
| scrollbar-width: auto; | |
| pointer-events: auto; | |
| } | |
| article [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; | |
| 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(); | |
| })(); |
@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!
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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: