CHatGPT+Grok Make Wide Tamper Monkey

gistfile1.txt

// ==UserScript==
// @name         Chat Width Presets (ChatGPT + Grok)
// @namespace    http://tampermonkey.net/
// @version      3.5
// @description  Keep it simple: ChatGPT uses original v2.1; Grok uses lightweight CSS presets (no observers)
// @match        *://chatgpt.com/*
// @match        *://grok.com/*
// @match        *://x.com/*
// @grant        none
// @noframes
// ==/UserScript==

(function () {
  'use strict';
  const host = location.hostname.toLowerCase();
  const isChatGPT = host.endsWith('chatgpt.com');
  const isGrokHost = host.endsWith('grok.com') || host === 'x.com';

  // ---------------- ChatGPT: EXACT v2.1 (unchanged) ----------------
  if (isChatGPT) {
    (function () {
      const ORIGINAL_FACTOR = 1.00;  // A
      const B_FACTOR        = 1.30;  // B
      const C_FACTOR        = 1.85;  // C

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

      function cacheOriginal(el) {
        if (!el.dataset.origMax) {
          const cw = getComputedStyle(el).maxWidth;
          el.dataset.origMax = parseFloat(cw) || el.getBoundingClientRect().width;
        }
      }
      function clearWidths(el) {
        el.style.maxWidth = '';
        el.style.width    = '';
        el.style.minWidth = '';
      }
      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';
        });
      }

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

      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: '2147483647', userSelect: 'none', backdropFilter: 'blur(6px)', opacity: '0.9'
        });
        ['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();
      }
      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';
        });
      }
      function observeMutations() {
        new MutationObserver(() => presets[active]()).observe(document.body, { childList: true, subtree: true });
      }
      window.addEventListener('load', () => { makeUI(); presets.A(); observeMutations(); });
    })();
    return;
  }

  // ---------------- Grok: Lightweight CSS presets ----------------
  if (!isGrokHost) return;

  // On x.com only act on Grok pages (keep it simple)
  if (host === 'x.com' && !/\/grok\b/i.test(location.pathname)) return;

  const PRESETS = { A: null, B: '80vw', C: '98vw' };
  const KEY = 'wp-active:' + location.host;
  let active = localStorage.getItem(KEY) || 'B';

  const TARGETS = [
    '[style*="--content-max-width"]', // Grok content column
    '.breakout',
    '[class*="max-w-"][class*="content"]',
    '.w-full.h-full.overflow-y-auto.flex.flex-col.items-center'
  ].join(',\n');

  function cssFor(widthVal) {
    const scope = '.wp-scope-grok';
    const tableFix = `
${scope} table { width: 100% !important; max-width: none !important; table-layout: auto !important; }
${scope} td, ${scope} th { white-space: normal !important; word-break: break-word !important; }
${scope} .tableContainer { overflow-x: auto !important; }`.trim();

    if (!widthVal) return '';
    return `
:root { --wp-target-width: ${widthVal}; }
${scope} ${TARGETS} {
  max-width: var(--wp-target-width) !important;
  width: 100%;
  margin-left: auto !important;
  margin-right: auto !important;
  align-self: center !important;
  box-sizing: border-box !important;
}
${scope} ${TARGETS} > *[class*="max-w-"] {
  margin-left: auto !important;
  margin-right: auto !important;
}
${tableFix}`.trim();
  }

  function ensureStyleTag() {
    let tag = document.getElementById('wp-style-grok');
    if (!tag) { tag = document.createElement('style'); tag.id = 'wp-style-grok'; document.head.appendChild(tag); }
    return tag;
  }

  function apply(preset) {
    active = preset; localStorage.setItem(KEY, active);
    const st = ensureStyleTag();
    const css = PRESETS[active] ? cssFor(PRESETS[active]) : '';
    st.textContent = css;
    document.documentElement.classList.toggle('wp-scope-grok', !!css);
    updateUI();
  }

  function style(el, obj){ Object.assign(el.style, obj); }

  function makeUI() {
    if (document.getElementById('wp-box-grok')) return;
    const box = document.createElement('div');
    box.id = 'wp-box-grok';
    style(box, {
      position: 'fixed', bottom: '18px', right: '18px', display: 'flex', gap: '6px',
      padding: '6px 10px', background: 'rgba(0,0,0,0.55)', color: '#fff',
      borderRadius: '18px', fontFamily: 'system-ui, sans-serif', fontSize: '13px',
      zIndex: '2147483647', userSelect: 'none', backdropFilter: 'blur(6px)', boxShadow: '0 2px 12px rgba(0,0,0,0.3)'
    });
    ['A','B','C'].forEach(p => {
      const btn = document.createElement('button');
      btn.type = 'button'; btn.textContent = p;
      btn.title = ({A:'Original width',B:'80% (centered)',C:'Near full (centered)'}[p]);
      style(btn, {
        width: '26px', height: '26px', lineHeight: '26px', textAlign: 'center',
        border: '0', borderRadius: '50%', cursor: 'pointer',
        background: 'rgba(255,255,255,0.25)', color: '#fff'
      });
      btn.addEventListener('click', () => apply(p));
      box.appendChild(btn);
    });
    const label = document.createElement('div');
    label.textContent = (host === 'x.com') ? 'Grok@X' : 'Grok';
    style(label, { paddingLeft: '6px', opacity: '0.9' });
    box.appendChild(label);
    document.body.appendChild(box);
    updateUI();
  }

  function updateUI() {
    const btns = Array.from(document.querySelectorAll('#wp-box-grok button'));
    ['A','B','C'].forEach((p,i) => {
      const b = btns[i]; if (!b) return;
      const on = p === active;
      b.style.background = on ? 'rgba(255,255,255,0.9)' : 'rgba(255,255,255,0.25)';
      b.style.color = on ? '#000' : '#fff';
    });
  }

  // No observers, no history hooks — simple & stable
  window.addEventListener('load', () => { makeUI(); apply(active); });

})();