☰

T3 Chat wide code block (expand on text-wrap)

Pure CSS rules to expand code blocks in in T3 Chat to fill horizontal space on wide screens to make reading long code blocks easier. (check comment for another version that always expands)

// ==UserScript==
// @name         T3 Chat wide code block (expand on text-wrap)
// @namespace    http://tampermonkey.net/
// @version      1.1.0
// @description  Pure CSS rules to expand code blocks in in T3 Chat to fill horizontal space on wide screens to make reading long code blocks easier. (check comment for another version that always expands)
// @author       https://github.com/dicksonhk, https://t3.chat
// @license      MIT
// @match        https://beta.t3.chat/*
// @match        https://t3.chat/*
// @grant        GM_addStyle // Grant GM_addStyle for the first part
// @grant        none
// ==/UserScript==

// Always expand version: https://gist.github.com/dicksonhk/8b63c005a9ab8fa94ca82246f43b6724/raw/t3-chat-expand-codeblock--always-expand.user.js
// Combined version: https://gist.github.com/dicksonhk/8b63c005a9ab8fa94ca82246f43b6724/raw/t3-chat-expand-codeblock.user.js

(function () {
  'use strict';

  // The original max-width for the wrapper, needs to match chat wrapper ([role="log"])'s max-width
  const WRAPPER_MAX_WIDTH = '48rem';

  const CODEBLOCK_EXPANDED_WIDTH = 'fit-content';
  const CODEBLOCK_EXPANDED_MAX_WIDTH = '100%';
  const CODEBLOCK_EXPANDED_MIN_WIDTH = WRAPPER_MAX_WIDTH;


  const CUSTOM_CSS = `
/*
  Sets the width explicitly to make sure style is not broken
  in-case the chat wrapper max-width changes in the future.
*/
[role="log"] {
    max-width: ${WRAPPER_MAX_WIDTH};
}

/*
  Only activate when the messages wrapper is smaller than the viewport,
  the styles are designed to work without this guard but just to be safe.
 */
@media (min-width: ${WRAPPER_MAX_WIDTH}) {
    /*
      The selector [role="log"] [data-message-id]:not(.justify-end) .w-full [role="article"]
      only select responses that are full-width, as the calculations 
      assume the wrapper is full-width and would break otherwise.
    */

    /* Expand code blocks wrapper beyond its container */

    [role="log"] [data-message-id]:not(.justify-end) > .w-full [role="article"]
      :has(> * > .\\[\\&_pre\\]\\:whitespace-pre-wrap > pre)
    {
        margin-left: min(0px, calc(-1 * (100vw - ${WRAPPER_MAX_WIDTH}) / 2));
        margin-right: min(0px, calc(-1 * (100vw - ${WRAPPER_MAX_WIDTH}) / 2));
    }

    /*
      Expand and center code blocks to fit available space, 
      while preventing it from shrinking.
    */

    [role="log"] [data-message-id]:not(.justify-end) > .w-full [role="article"]
      :has(> .\\[\\&_pre\\]\\:whitespace-pre-wrap > pre)
    {
        width: ${CODEBLOCK_EXPANDED_WIDTH} !important;
        max-width: min(100%, ${CODEBLOCK_EXPANDED_MAX_WIDTH});
        min-width: min(100vw, ${CODEBLOCK_EXPANDED_MIN_WIDTH});
        min-width: min(100cqw, ${CODEBLOCK_EXPANDED_MIN_WIDTH});
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /*
      Prevent the floating copy button being covered by overlay settings menu.
      (Have false positives but better than covered.)
    */

    [role="log"] [data-message-id]:not(.justify-end) > .w-full [role="article"]
      :has(> .\\[\\&_pre\\]\\:whitespace-pre-wrap > pre)
      > .sticky
    {
        top: 74px; /* comes from .max-900:top-[74px] */
    }

    /*
      The following two rules handles code block that are indented.
      By setting container-type on its immediate parent, 
      children can use 100cqw to calculate the extra space on the left.
      Otherwise the expanded code block will be shifted to the right 
      and go out of view.
    */

    [role="log"] [data-message-id]:not(.justify-end) > .w-full [role="article"],
    [role="log"] [data-message-id]:not(.justify-end) > .w-full [role="article"]
     :has(> * > * > .\\[\\&_pre\\]\\:whitespace-pre-wrap > pre)
    {
        container-type: inline-size;
        width: 100%;
    }

    [role="log"] [data-message-id]:not(.justify-end) > .w-full [role="article"]
      > * :has(> * > .\\[\\&_pre\\]\\:whitespace-pre-wrap > pre)
    {
        margin-left: min(0px, calc(-1 * (100vw - 100cqw) / 2));
    }

    /* Take into account sidebar size when expanded */

    .group\\/sidebar-wrapper > [data-state="expanded"] ~ main 
      [role="log"] [data-message-id]:not(.justify-end) > .w-full [role="article"]
      :has(> * > .\\[\\&_pre\\]\\:whitespace-pre-wrap > pre)
    {
        margin-left: min(0px, calc(-1 * ((100vw - var(--sidebar-width)) - ${WRAPPER_MAX_WIDTH}) / 2));
        margin-right: min(0px, calc(-1 * ((100vw - var(--sidebar-width)) - ${WRAPPER_MAX_WIDTH}) / 2));
    }

    /* Take into account sidebar size when expanded and block indented. */

    .group\\/sidebar-wrapper > [data-state="expanded"] ~ main
      [role="log"] [data-message-id]:not(.justify-end) > .w-full [role="article"]
      > * :has(> * > .\\[\\&_pre\\]\\:whitespace-pre-wrap > pre)
    {
        margin-left: min(0px, calc(-1 * ((100vw - var(--sidebar-width)) - 100cqw) / 2));
    }
}
`;

  injectCss(CUSTOM_CSS);

  // --- Function to add CSS, checking for GM_addStyle ---
  function injectCss(css) {
    // Check if GM_addStyle is available
    if (typeof GM_addStyle === 'function') {
      GM_addStyle(css);
      return;
    }

    // Inject using a style element
    const styleElement = document.createElement('style');
    styleElement.textContent = css;

    // Append to head if available
    if (document.head) {
      document.head.appendChild(styleElement);
      return;
    }

    // As a last resort, append to the document's root element
    // This is less ideal for performance but ensures the style is applied
    document.documentElement.appendChild(styleElement);
  }
})();