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.
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:
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.
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!
Precisely. Its stunning how come such bright engineers did not tune this trivial detail by now.
That would be #1 to tune up, right ? So easy, obvious, YET with a significant impact
It’s absolutely mind boggling to me that some of the smartest humans that have ever existed in the history of the planet, let alone right now, haven’t figured out that the users would like a wider codeblock on the chat interface, to prevent horizontally scrolling.
It’s one thing if it’s an initial feature that gets overlooked, but to have not addressed it by now? That’s why people are typically cynical and disdainful of corporations. Seemingly common sense decisions are overlooked, and if there IS a good reason for it, then it could easily be addressed or explained away with a quick little blurb (even if people don’t agree with it, at least we could sort of begrudgingly accept it and say, “oh, so that’s your reason? Ugh. Ok, well, whatever”).
the sad truth is, this fix would take me less than 1 hour of tinkering with tailwind css in nextjs if I could work on the chat.openai.com frontend, so there is zero justification to not fix it months ago.
I also would have added some basic local text search function before even launching, but maybe I have higher standards than OpenAI’s web frontend team. literally, debounce input, map(contains(query), messages) … if google is scary competition for openai, then it makes zero sense to not include basic text search. it works on iphone, why not aim for feature parity between web and mobile? you can edit GPTs on the web, but not search; you can search on mobile, but not edit GPTs. editing GPTs has no version control at all
just seems sloppy, and OpenAI ought to raise their quality standards dramatically. even this post, i can’t submit, because they think there is a link in my text here, but there totally is no link in my text here except the name of the website in question “chat dot openai dot com”
I also would have added some basic local text search function before even launching, but maybe I have higher standards than OpenAI’s web frontend team. literally, debounce input, map(contains(query), messages) … if google is scary competition for openai, then it makes zero sense to not include basic text search.
Oh yeah, that’s another thing I’ve wished for for months - the ability to search our history for a specific String. The history is great, and being able to give them custom titles, but realistically, unless someone is literally creating new chats for every single conversation (maybe I’m doing it wrong), who’s gonna know “ok, topic X if I recall was in my conversation that I labeled Y.” So it’s almost useless as it is.