Last active
July 15, 2024 23: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 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 2024-06-01 | |
| // @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 none | |
| // ==/UserScript== | |
| (function() { | |
| const cssBlocks = {}; | |
| const accentForDark = `#f39c12`; | |
| /* Message body width */ | |
| cssBlocks.chatWidth = ` | |
| @media (min-width: 1280px) { | |
| .xl\\:max-w-3xl { | |
| max-width: 90% !important; | |
| } | |
| } | |
| @media (min-width: 1024px) { | |
| .lg\\:max-w-\\[38rem\\] { | |
| max-width: 90% !important; | |
| } | |
| } | |
| @media (min-width: 768px) { | |
| .md\\:max-w-2xl { | |
| max-width: 90% !important; | |
| } | |
| .md\\:max-w-3xl { | |
| max-width: 90% !important; | |
| } | |
| } | |
| `; | |
| /* Code blocks font */ | |
| cssBlocks.codeBlockFontFamily = ` | |
| code, pre { | |
| font-family: Consolas,Söhne Mono,Monaco,Andale Mono,Ubuntu Mono,monospace!important; | |
| } | |
| `; | |
| /* Break lines in code blocks */ | |
| cssBlocks.codeBlockLinebreaks = ` | |
| code.\\!whitespace-pre { | |
| white-space: pre-wrap !important; | |
| } | |
| `; | |
| /* Code blocks background color */ | |
| cssBlocks.codeBlockBackground_DARK = ` | |
| html.dark pre > div.rounded-md { | |
| background-color: #181818; | |
| } | |
| `; | |
| cssBlocks.codeBlockBackground_LIGHT = ` | |
| html.light pre > div.rounded-md { | |
| background-color: #252525; | |
| } | |
| `; | |
| /* Make top bar transparent as it consumes vertical space for no reason */ | |
| cssBlocks.topBarTransparency_DARK = ` | |
| html.dark div.sticky.top-0.flex.items-center.justify-between.z-10.h-14.p-2.font-semibold { | |
| background-color: rgba(52,53,65,0); | |
| } | |
| html.dark .sticky.top-0 [type="button"]:not(:hover) { | |
| background-color: #0000001f; | |
| } | |
| `; | |
| cssBlocks.topBarTransparency_LIGHT = ` | |
| html.light div.sticky.top-0.flex.items-center.justify-between.z-10.h-14.p-2.font-semibold { | |
| background-color: rgba(52,53,65,0); | |
| } | |
| html.light .sticky.top-0 [type="button"]:not(:hover) { | |
| background-color: #ffffffb0; | |
| } | |
| `; | |
| /* Make GPT version number more visible. REMOVE THIS BLOCK IF YOU DON'T LIKE IT */ | |
| cssBlocks.topBar_LIGHT = ` | |
| html.dark .sticky.top-0 [type="button"] > div > span.text-token-text-secondary { | |
| color: ${accentForDark}; | |
| } | |
| `; | |
| /* Make our messages more visible. REMOVE THIS BLOCK IF YOU DON'T LIKE IT */ | |
| cssBlocks.ownMessagesVisibility_DARK = ` | |
| html.dark .text-message .dark\\:bg-token-main-surface-secondary { | |
| background-image: linear-gradient(45deg, #3c4b83, #343a79); | |
| } | |
| `; | |
| cssBlocks.ownMessagesVisibility_LIGHT = ` | |
| html.light .text-message .dark\\:bg-token-main-surface-secondary { | |
| background: #c1d6f6; | |
| } | |
| `; | |
| /* Make it more visible where bot message starts by icreasing visibility of its avatar. REMOVE THIS BLOCK IF YOU DON'T LIKE IT */ | |
| cssBlocks.botMessagesVisibility_DARK = ` | |
| html.dark .gizmo-bot-avatar > div { | |
| background: linear-gradient(45deg, #3F51B5, #00BCD4); | |
| } | |
| html.dark .gizmo-bot-avatar { | |
| outline: none; | |
| } | |
| `; | |
| cssBlocks.botMessagesVisibility_LIGHT = ` | |
| html.light .gizmo-bot-avatar > div { | |
| background: #252525; | |
| color: #ffffff; | |
| } | |
| `; | |
| /************ SIDEBAR ************/ | |
| const sidebar_new_width = `330px`; | |
| const sidebar_container_selector = `.flex-shrink-0.overflow-x-hidden[style^="width: 260px"]`; | |
| /* Sidebar width */ | |
| cssBlocks.sidebarWidth = ` | |
| ${sidebar_container_selector}, | |
| ${sidebar_container_selector} .w-\\[260px\\] { | |
| width: ${sidebar_new_width} !important; | |
| } | |
| `; | |
| /* History periods headings color. REMOVE THIS BLOCK IF YOU DON'T LIKE IT */ | |
| cssBlocks.sidebarHeadingsVisibility_DARK = ` | |
| html.dark ${sidebar_container_selector} h3 { | |
| color: ${accentForDark}; | |
| } | |
| `; | |
| /* Make buttons on active chat colored to make it more visible when title is too long. REMOVE THIS BLOCK IF YOU DON'T LIKE IT */ | |
| cssBlocks.sidebarItemButtonsVisibility_DARK = ` | |
| html.dark div.group.relative.rounded-lg.active\\:opacity-90.bg-token-sidebar-surface-secondary button.flex.items-center.justify-center.text-token-text-primary.transition.hover\\:text-token-text-secondary.radix-state-open\\:text-token-text-secondary svg > path { | |
| fill: ${accentForDark}; | |
| } | |
| ol > li > div > a > div.relative.grow.overflow-hidden.whitespace-nowrap { | |
| overflow: visible; | |
| white-space: unset; | |
| } | |
| ol > li > div > a > div.relative.grow.overflow-hidden.whitespace-nowrap > div.absolute.to-transparent { | |
| background-image: none; | |
| } | |
| `; | |
| let cssStyles = ''; | |
| for (let key in cssBlocks) { | |
| if (cssBlocks.hasOwnProperty(key)) { | |
| cssStyles += cssBlocks[key] + '\n'; | |
| } | |
| } | |
| cssStyles = cssStyles.replaceAll("\t", ' '); | |
| // Create a new <style> element and set its content to the CSS rules | |
| var styleElement = document.createElement("style"); | |
| styleElement.innerHTML = cssStyles; | |
| // Append the new <style> element to the <head> section of the document | |
| document.head.appendChild(styleElement); | |
| })(); |
Same but without the theme changes:
// ==UserScript==
// @name ChatGPT CSS fixes
// @version 2024-05-15
// @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 none
// ==/UserScript==
(function() {
const accentColor = `#f39c12`;
const messagesCss = `
/* Message body width */
@media (min-width: 1280px) {
.xl\\:max-w-3xl {
max-width: 90% !important;
}
}
@media (min-width: 1024px) {
.lg\\:max-w-\\[38rem\\] {
max-width: 90% !important;
}
}
@media (min-width: 768px) {
.md\\:max-w-2xl {
max-width: 90% !important;
}
.md\\:max-w-3xl {
max-width: 90% !important;
}
}
/* Make GPT version number more visible */
html.dark .group.flex.cursor-pointer.items-center.gap-1.rounded-xl.py-2.px-3.text-lg.font-medium.hover\\:bg-gray-50.radix-state-open\\:bg-gray-50.dark\\:hover\\:bg-black\\/10.dark\\:radix-state-open\\:bg-black\\/20 span.text-token-text-secondary {
}
/* BREAK LINES IN CODE BLOCKS */
code.\\!whitespace-pre {
white-space: pre-wrap !important;
}
`;
const sidebar_new_width = `330px`;
const sidebar_container_selector = `.flex-shrink-0.overflow-x-hidden[style^="width: 260px"]`;
const sidebarCss = `
/* Sidebar width */
${sidebar_container_selector},
${sidebar_container_selector} .w-\\[260px\\] {
width: ${sidebar_new_width} !important;
}
/* Adjust position of the new show/hide-sidebar control button to match the new width */
main div.fixed.left-0.top-1\\/2.z-40 {
transform: translateX(0px) translateY(-50%) rotate(180deg) translateZ(0px) !important;
}
/*------------------*/
/* Sidebar elements */
/*------------------*/
/* History periods headings color */
html.dark h3.h-9.pb-2.pt-3.px-2.text-xs.font-medium.text-ellipsis.overflow-hidden.break-all.text-token-text-tertiary {
color: ${accentColor};
}
/* Buttons on active chat (to make it visible when title is too long) */
html.dark div.group.relative.rounded-lg.active\\:opacity-90.bg-token-sidebar-surface-secondary button.flex.items-center.justify-center.text-token-text-primary.transition.hover\\:text-token-text-secondary.radix-state-open\\:text-token-text-secondary svg > path {
fill: ${accentColor};
}
ol > li > div > a > div.relative.grow.overflow-hidden.whitespace-nowrap {
overflow: visible;
white-space: unset;
}
ol > li > div > a > div.relative.grow.overflow-hidden.whitespace-nowrap > div.absolute.to-transparent {
background-image: none;
}
a.hover\\:pr-4:hover,
a.flex.py-3.px-3.items-center.gap-3.relative.rounded-md.hover\\:bg-gray-100.dark\\:hover\\:bg-\\[\\#2A2B32\\].cursor-pointer.break-all.bg-gray-50.hover\\:pr-4.dark\\:bg-gray-900.group
{
padding-right: unset !important;
}
div.absolute.inset-y-0.right-0.w-8.z-10.bg-gradient-to-l.dark\\:from-gray-900.from-gray-50.group-hover\\:from-gray-100.dark\\:group-hover\\:from-\\[\\#2A2B32\\] {
background: none;
}
`;
const cssStyles = (messagesCss + sidebarCss).replaceAll("\t", ' ');
// Create a new <style> element and set its content to the CSS rules
var styleElement = document.createElement("style");
styleElement.innerHTML = cssStyles;
// Append the new <style> element to the <head> section of the document
document.head.appendChild(styleElement);
})();
Thanks rigwild 👍 👍
Works fine until the 'official' revision 😁
@airsidworld The very official revision is rolled out 😊 Enjoy!
P.S. For anyone who don't like the visibility-improving changes: Feel free to remove the lines where you see "REMOVE IT" comments (inside the CSS)
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Nice one! Thanks! 👍