Preset widths for ChatGPT interface

ChatGPT-Make-Wide

// ==UserScript==
// @name         ChatGPT Width Presets v2.1 by Curtis White
// @namespace    http://tampermonkey.net/
// @version      2.1
// @description  A=original, B=30% wider, C=85% wider — sleek floating toggle with easy-to-change factors
// @match        https://chatgpt.com/*
// @grant        none
// ==/UserScript==

(function () {
  'use strict';

  // ==== SCALING FACTORS (adjust as desired) ====
  const ORIGINAL_FACTOR = 1.00;  // Preset A (no change)
  const B_FACTOR        = 1.30;  // Preset B (30% wider)
  const C_FACTOR        = 1.85;  // Preset C (85% wider)

  const SEL = {
    layers:
      'div[class*="thread-content-max-width"], div.markdown.prose, .tableContainer, .tableContainer table',
    cells: '.tableContainer table td, .tableContainer table th'
  };

  /** Cache original max-width (px) */
  function cacheOriginal(el) {
    if (!el.dataset.origMax) {
      const cw = getComputedStyle(el).maxWidth;
      el.dataset.origMax = parseFloat(cw) || el.getBoundingClientRect().width;
    }
  }

  /** Clear any width constraints */
  function clearWidths(el) {
    el.style.maxWidth = '';
    el.style.width    = '';
    el.style.minWidth = '';
  }

  /** Resize all target layers by a factor */
  function resizeLayers(factor) {
    document.querySelectorAll(SEL.layers).forEach(el => {
      cacheOriginal(el);
      clearWidths(el);
      if (factor !== ORIGINAL_FACTOR) {
        const newPx = Math.round(parseFloat(el.dataset.origMax) * factor);
        el.style.maxWidth = newPx + 'px';
      }
    });
    document.querySelectorAll(SEL.cells).forEach(td => {
      td.style.maxWidth   = 'none';
      td.style.whiteSpace = 'normal';
    });
  }

  // Preset implementations
  const presets = {
    A: () => resizeLayers(ORIGINAL_FACTOR),
    B: () => resizeLayers(B_FACTOR),
    C: () => resizeLayers(C_FACTOR)
  };
  let active = 'A';

  /** Build the floating toggle UI */
  function makeUI() {
    const box = document.createElement('div');
    Object.assign(box.style, {
      position:       'fixed',
      bottom:         '20px',
      right:          '20px',
      display:        'flex',
      gap:            '6px',
      padding:        '6px 10px',
      background:     'rgba(0,0,0,0.5)',
      color:          '#fff',
      borderRadius:   '20px',
      fontFamily:     'sans-serif',
      fontSize:       '13px',
      zIndex:         '9999',
      userSelect:     'none',
      backdropFilter: 'blur(6px)',
      opacity:        '0.8'
    });

    ['A', 'B', 'C'].forEach(p => {
      const btn = document.createElement('div');
      btn.id          = 'wp-' + p;
      btn.textContent = p;
      Object.assign(btn.style, {
        width:        '26px',
        height:       '26px',
        lineHeight:   '26px',
        textAlign:    'center',
        borderRadius: '50%',
        cursor:       'pointer',
        transition:   'background 0.2s'
      });
      btn.onclick = () => {
        active = p;
        presets[p]();
        updateUI();
      };
      box.appendChild(btn);
    });

    document.body.appendChild(box);
    updateUI();
  }

  /** Highlight active preset button */
  function updateUI() {
    ['A', 'B', 'C'].forEach(p => {
      const btn = document.getElementById('wp-' + p);
      if (!btn) return;
      btn.style.background = (p === active)
        ? 'rgba(255,255,255,0.85)'
        : 'rgba(255,255,255,0.25)';
      btn.style.color = (p === active) ? '#000' : '#fff';
    });
  }

  /** Reapply the current preset on new content */
  function observeMutations() {
    new MutationObserver(() => presets[active]()).observe(document.body, {
      childList: true,
      subtree:   true
    });
  }

  // Initialize
  window.addEventListener('load', () => {
    makeUI();
    presets.A();       // start with original
    observeMutations();
  });
})();