Pure CSS rules to expand code blocks in T3 Chat to fill horizontal space on wide screens to make reading long code blocks easier. (check comment for another version that only expands when text-wrap is enabled)
// ==UserScript==
// @name T3 Chat wide code block (always expand)
// @namespace http://tampermonkey.net/
// @version 1.1.0
// @description Pure CSS rules to expand code blocks in T3 Chat to fill horizontal space on wide screens to make reading long code blocks easier. (check comment for another version that only expands when text-wrap is enabled)
// @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==
// Expands when text-wrap is enabled version: https://gist.github.com/dicksonhk/8b63c005a9ab8fa94ca82246f43b6724/raw/t3-chat-expand-codeblock--expand-on-wrap.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 = `
@media (min-width: ${WRAPPER_MAX_WIDTH}) {
[role="log"] {
max-width: ${WRAPPER_MAX_WIDTH};
container-type: inline-size;
width: 100%;
}
[role="log"] [data-message-id]:not(.justify-end) > .w-full [role="article"] {
container-type: inline-size;
width: 100%;
}
[role="log"] [data-message-id]:not(.justify-end) > .w-full [role="article"]
:has(> * > * > * > pre)
{
container-type: inline-size;
}
[role="log"] [data-message-id]:not(.justify-end) > .w-full [role="article"]
:has(> * > * > pre)
{
margin-left: min(0px, calc(-1 * (100vw - ${WRAPPER_MAX_WIDTH}) / 2));
margin-right: min(0px, calc(-1 * (100vw - ${WRAPPER_MAX_WIDTH}) / 2));
}
[role="log"] [data-message-id]:not(.justify-end) > .w-full [role="article"]
> * :has(> * > * > pre)
{
margin-left: min(0px, calc(-1 * (100vw - 100cqw) / 2));
}
[role="log"] [data-message-id]:not(.justify-end) > .w-full [role="article"]
:has(> * > 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;
}
.group\\/sidebar-wrapper > [data-state="expanded"] ~ main
[role="log"] [data-message-id]:not(.justify-end) > .w-full [role="article"]
:has(> * > * > 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));
}
.group\\/sidebar-wrapper > [data-state="expanded"] ~ main
[role="log"] [data-message-id]:not(.justify-end) > .w-full [role="article"]
> * :has(> * > * > 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);
}
})();