Hi, I like to code with chat gpt, but one annoyance is the code block element in your UI is quite narrow and doesn’t respond to changes in screen width. Horizontal scrolling to read code is annoying and it doesn’t use all the space on the screen, too much padding.
Also, when you have side by side comparisons with code, they get really really narrow and this makes it harder to decide which response is better
It’s annoying that the code blocks (all the output for that matter) only occupies about half of the available screen real estate. Hence, one must scroll horizontally a great deal while trying to read the code or alternatively copy it into a code editor and read it there. It would be quite helpful if the code blocks expanded dynamically to occupy the available screen real estate.
As an intermediate solution you can just somehow include additional styles, for example:
.text-base {
max-width: 100% !important;
padding-left: 20px !important;
padding-right: 20px !important;
}
You can write an extension for Chrome, or try to use any appropriate extension that can apply custom user CSS.
By the way, you can ask ChatGPT directly how to do so
Thanks!
Used Stylebot with Chrome.
With Stylebot disabled
With Stylebot enabled
Install Stylebot
Using the ChatGPT web page enter a prompt to create lines longer than 100 characters, e.g. Create some CSV lines that are more than 100 characters.
In the upper right of Chrome click the extensions icon (looks like a puzzle piece)
This will show a list of installed extensions.
Click Stylebot
Click Open Sytlebot
At the bottom select <> Code
Paste in the CSS as given by @EugenS
.text-base {
max-width: 100% !important;
padding-left: 20px !important;
padding-right: 20px !important;
}
If you want to be able to quickly enable/disable Stylebot then click the pin icon in the list of extensions.
Before clicking pin for Stylebot
After click pin for Stylebot
and then can click on the Stylebot icon in the upper right of Chrome.
Nice, guide @EricGT
You should edit the code block containing the css to say .text-base instead of text-base.
Cheers.
That works*!*
Another one-off approach is to apply styling in the Dev Tools console:
const elements = document.getElementsByClassName('text-base');
for (let i = 0; i < elements.length; i++) {
elements[i].style.maxWidth = '100%';
elements[i].style.paddingLeft = '20px';
elements[i].style.paddingRight = '20px';
}
Hello, CalvinDale,
Nice snippet, but unfortunately it won’t work for new .text-base blocks
I think something like this is can be used if you want to use JS in Dev Tools:
const style = document.createElement('style');
style.innerText = `
.text-base {
max-width: 100% !important;
padding-left: 20px !important;
padding-right: 20px !important;
}
`;
document.head.appendChild(style);
ironically that works so well that the output box is wider even with dev tools open.
OpenAI are super good at some of the most advanced things in the world and practically the worst at some very basic things.
This is especially strange when their AI acts like big brother bot all the time yet fails hard when it comes to accessibility and such for its users.
Sorry, not meaning to rant. I actually love how powerful it can be and I’m sure all the staff do their best and then some. Just baffles my mind.
I agree it would be nice to have a setting to change the width. @EricGT solution worked great for me.
This will modify the css rule, so it applies to any element as they are created, rather being limited to the ones that exist at the time.
Make a bookmark, create a bookmarklet folder [optional, I use this to organize my bookmarklets], I also use surfingkeys to quickly use any bookmark, but you can put this on your bookmark bar.
Name the bookmark to anything, like, “ChatGPT Window Text Size”, save this as the url.
javascript:(function() {
var styleSheet = document.styleSheets[0];
var rules = styleSheet.cssRules || styleSheet.rules;
for (var i = 0; i < rules.length; i++) {
var rule = rules[i];
if (rule.selectorText === '.text-base') {
rule.style.setProperty('max-width', '100%', 'important');
rule.style.setProperty('padding-left', '20px', 'important');
rule.style.setProperty('padding-right', '20px', 'important');
}
}
})();
I’m really amazed this is still a thing… but… it is… anyways, there’s a nice Chrome extension called “Wide GPT” (ref) in the Chrome Web Store which makes things nice as they should be.
Expanded on @CalvinDale’s snippet (with GPT’s help of course) to make it into a tampermonkey script. It’s good if you want more control and don’t want to install that WideGPT extension:
// ==UserScript==
// @name Expand Text Base on OpenAI Platform
// @namespace http://tampermonkey.net/
// @version 0.1
// @description Expand text-base elements on OpenAI's chat platform
// @author You
// @match https://openai.com/chat/
// @match https://chat.openai.com/c*
// @grant none
// ==/UserScript==
(function() {
'use strict';
function expandTextBase() {
const elements = document.querySelectorAll('.text-base:not([data-expanded])');
if (elements.length === 0) {
return; // No unprocessed elements, so exit
}
for (let i = 0; i < elements.length; i++) {
elements[i].style.maxWidth = '100%';
elements[i].style.paddingLeft = '20px';
elements[i].style.paddingRight = '20px';
elements[i].setAttribute('data-expanded', 'true');
}
console.log('expandTextBase executed'); // To verify it's running
}
let debounceTimer;
function debouncedExpandTextBase() {
clearTimeout(debounceTimer);
debounceTimer = setTimeout(expandTextBase, 300); // waits 300ms after last mutation
}
const observer = new MutationObserver((mutationsList) => {
for(let mutation of mutationsList) {
// If the addedNodes property has one or more nodes
if(mutation.addedNodes.length) {
debouncedExpandTextBase();
break; // No need to process other mutations if one already triggers the function
}
}
});
observer.observe(document.body, {
childList: true,
subtree: true
});
})();
Thank you so much for the detailed step-by-step walk-through with images. It was really helpful! In just 2 mins, my biggest grievance with ChatGPT has been solved!