☰

ChatGPT: Readability Styles for Engineers

Makes long, complicated, software-related chats much more readable.

// ==UserScript==
// @name         ChatGPT: Readability Styles for Engineers
// @namespace    zschuessler
// @version      1.0.2
// @description  Makes long, complicated, software-related chats much more readable.
// @author       [email protected]
// @license      Unlicense
// @match        https://chatgpt.com/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=chat.openai.com
// @grant        none
// ==/UserScript==

(function () {
    let domSelectors = {
        messageContainers: '.group.w-full > div, .group.w-full > div > div',
        messageCodeBlocks: '.group.w-full > div pre',
        messageParagraphs: '.group.w-full > div p, .group.w-full > div ul p, .group.w-full > div ol p, .group.w-full > div ol ul li'
    }

    create_style_node_for_css(`
    /***
    *Individual message divs:
    * - Now full width
    * - Reduces padding
    * - Forces scrollbar for extra-big code blocks
    */
    ${domSelectors.messageContainers} {
        min-width: 100%;
        padding: 20px;
        overflow: hidden;
    }

    /**
     * Message paragraphs
     * Puts a max width on paragraphs while keeping the container full width
     * This achieves a more readable paragraph width but still allows full width code blocks
     */
    ${domSelectors.messageParagraphs} {
       max-width: 750px;
       margin: 0 0 15px 0;
    }

    /**
     * Message Code Blocks
     * Scales code blocks to be 100%, but never more than 80vw.
     * This makes code blocks infinitely more readable on all viewports.
     */
     ${domSelectors.messageCodeBlocks} {
        width: 80vw;
        overflow: auto;
        max-width: 100%;
      }

    /**
     * Force scrollbars
     * Necessary for large code blocks that need to avoid line wrapping
     /
     .w-full {
       overflow: hidden;
     }

     /**
      * Override Tailwind styles
      */
      .xl\\:max-w-\\[48rem\\]{
        max-width: 80vw !important;
      }
   `);
})();

// Simple helper function to create the style tag
function create_style_node_for_css(cssStr) {
    let styleTag = document.createElement('style');
    styleTag.textContent = cssStr;

    let styleTagContainer = document.getElementsByTagName('head')[0]
        || document.body
        || document.documentElement;

    styleTagContainer.appendChild(styleTag);
}