How to increase the code view box size of ChatGPT web interface

Question

It is frustrating how small the code viewing area is in ChatGPT and to make the matters worse it has a fixed width that does not change with the size of the browser window.

UPDATE: Guys use the extension in the answer below. It is a better solution than mine.

A temporary solution is this bookmarklet to maximize all the elements:

Create a bookmark and put this in the URL. Then run by selecting the bookmark on ChatGPT UI.

javascript:(function() { 
  document.querySelectorAll('div[class*="group w-full"] > div > div')
    .forEach((element) => { element.className = "flex flex-1"; }); 
})();

Is there a better solution than this?

Answer 1

I'm not sure if you consider this a better solution, but an alternative to the JavaScript code is using custom CSS. For example, the following CSS code will make the chat occupy the whole available space:

.text-base {
    max-width: 100% !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
}

You can apply custom CSS to a website with a browser extension, for example Stylebot. This way it's also easy to toggle it on/off.

More information on this forum.