Customize ChatGPT / Claude / Gemini UI — wider chats, better fonts, hide upsells

15 May 2026 · by JustZix Team

You spend 4 hours a day in ChatGPT, Claude or Gemini. Each one's default UI makes choices aimed at the newcomer: narrow message bubbles (~700px on a 1920px monitor), thin sans-serif in code blocks (you squint to tell l from 1), "Upgrade to Pro" banner begging for a subscription. All fixable in 5 minutes with JustZix. CSS rules + JS observers, saved once, work forever. No tracking, no accounts, no "powered by" gimmicks.

ChatGPT (chat.openai.com / chatgpt.com) — 3 CSS rules

Domain match: *://chatgpt.com/* and *://chat.openai.com/* (legacy domain).

1. Wider message bubbles (max-width 1200px)

/* ChatGPT default: max-width ~768px. Power user on 1080p+ = wasted */
.text-message, [data-message-author-role] > div {
  max-width: min(1200px, 92vw) !important;
}
/* Prompt input container too */
form .stretch, form[data-type="unified-composer"] {
  max-width: min(1200px, 92vw) !important;
}

2. Monospace for code blocks (Fira Code with ligatures)

pre code, code, .markdown code, .prose code {
  font-family: 'Fira Code', 'JetBrains Mono', ui-monospace, monospace !important;
  font-variant-ligatures: contextual !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
}
/* Bigger padding inside code blocks = easier reading */
pre {
  padding: 16px !important;
  border-radius: 8px !important;
}

3. Hide "Upgrade to Plus" banner + suggestion chips

/* Banner at top of sidebar "Upgrade your plan" */
nav a[href*="upgrade"], nav button[aria-label*="Upgrade"],
[data-testid="upgrade-button"], [class*="upgrade-banner"] {
  display: none !important;
}
/* Suggested prompts grid above the input — clutter for power users */
[class*="suggestions"], [class*="prompt-card"] {
  display: none !important;
}

Claude.ai — wide chat + keep the sidebar

Domain: *://claude.ai/*. Claude defaults to a 720px max-width chat even on 4K. Let's fix it:

/* Main conversation area */
.h-screen [class*="max-w-"], main [class*="max-w-3xl"],
[data-testid="conversation"] > div {
  max-width: min(1180px, 90vw) !important;
}
/* Code blocks — Claude already has monospace, but too small and no ligatures */
pre, code {
  font-family: 'Fira Code', 'JetBrains Mono', ui-monospace, monospace !important;
  font-variant-ligatures: contextual !important;
}
pre {
  font-size: 13px !important;
  line-height: 1.55 !important;
}
/* Artifact panel (right side panel) wider when open */
[data-testid="artifact-panel"] {
  width: 50% !important;
  min-width: 600px !important;
}

Bonus: Ctrl+Enter sends the message (default Enter = newline in Claude's textarea). If you prefer just Enter:

// JS rule on claude.ai
document.addEventListener('keydown', (e) => {
  if (e.key === 'Enter' && !e.shiftKey && !e.ctrlKey && e.target.tagName === 'TEXTAREA') {
    // Only when the textarea has any text (allows Enter in empty textarea)
    if (e.target.value.trim()) {
      e.preventDefault();
      const sendBtn = document.querySelector('button[aria-label*="end"], button[type="submit"]');
      if (sendBtn) sendBtn.click();
    }
  }
}, true);

Gemini (gemini.google.com) — least forgivable default

Domain: *://gemini.google.com/*. Gemini has the worst default — chat boxed into ~640px on a 4K, with low contrast.

/* Wider chat */
[class*="conversation-container"], chat-window, main {
  max-width: min(1240px, 92vw) !important;
}
[class*="user-query"], [class*="model-response"] {
  max-width: 100% !important;
}

/* Better text contrast — Gemini default is #5f6368 on #ffffff (3.5:1, fails WCAG AA) */
.markdown, [class*="response-content"] {
  color: #202124 !important;
}

/* Code block colours — Gemini has low-contrast syntax highlighting */
pre code .keyword, pre code .token.keyword { color: #d73a49 !important; }
pre code .string,  pre code .token.string  { color: #032f62 !important; }
pre code .comment, pre code .token.comment { color: #6a737d !important; font-style: italic !important; }

Use case 1 — TOGGLE3 to switch width

Sometimes narrow (you're reading long-form), sometimes wide (code). TOGGLE3 with 3 states:

// Action TOGGLE3 "📐 Width"
states[0] = { label: 'Narrow', value: '760' }
states[1] = { label: 'Wide',   value: '1180' }
states[2] = { label: 'Max',    value: '92vw' }

// Code:
document.documentElement.style.setProperty('--jz-chat-width',
  value.endsWith('vw') ? value : value + 'px');

And the CSS rule uses that variable:

main, [class*="conversation"] {
  max-width: var(--jz-chat-width, 1180px) !important;
}

3 clicks = 3 widths. Per-domain memory keeps your last choice.

Use case 2 — SLIDER for font-size control

Code blocks too small = squinting. SLIDER 10-20px:

// Action SLIDER "🔤 Code size"
min: 10, max: 20, step: 1, defaultValue: 14, unit: 'px'

code: |
  document.documentElement.style.setProperty('--jz-code-size', value + 'px');

CSS rule:

pre, code, pre code { font-size: var(--jz-code-size, 14px) !important; }

Drag the slider → live preview. Perfect during screen-share with your team (zoom up to 18-20px, easy to read from a distance).

Use case 3 — Output Console as a prompt journal

Very specific power-user trick: log every message you send to Output Console for a prompt history:

// JS rule
const observer = new MutationObserver((mutations) => {
  for (const m of mutations) {
    for (const node of m.addedNodes) {
      if (node.nodeType !== 1) continue;
      const userMsg = node.matches('[data-message-author-role="user"]')
        ? node : node.querySelector('[data-message-author-role="user"]');
      if (userMsg && !userMsg.dataset.jzLogged) {
        userMsg.dataset.jzLogged = '1';
        const txt = userMsg.textContent.trim().slice(0, 200);
        JUSTZIX.log(`[prompt] ${txt}${txt.length === 200 ? '…' : ''}`);
      }
    }
  }
});
observer.observe(document.body, { childList: true, subtree: true });
JUSTZIX.info('Prompt journal active.');

Open an Output Console pane snapped to the side → you see history of your prompts (truncated to 200 chars). Copy-paste to a document at end of day. Zero off-server tracking.

Pitfalls

Selectors change. Chat apps often ship UI redesigns every few weeks. [data-message-author-role] is stable (ARIA-based), but [class*="upgrade-banner"] matches anything with "upgrade-banner" in a class — fragile. Test monthly.
!important is the last resort. AI chat apps use Tailwind with hash-suffixed classes — your overrides must win specificity. Plus: some styles are inline (style attr) — then !important + :where() selector helps.
Dark mode override. If the app has a dark mode toggle (Claude, ChatGPT), your color: in CSS might clip with the theme. Use the page's CSS variables if available: color: var(--text-primary, #202124) !important.
MutationObserver can be expensive. Chat apps render hundreds of nodes per second during streaming response. Throttle/filter inside the callback.
Single-page app + auto-reload. JustZix CSS rules apply once on load. SPA route change might render a new nav without a full reload. The CSS rule stays active (style tag in head), but if you use a JS rule for DOM cleanup → you need a MutationObserver or a URL-change listener (popstate / hashchange).

What's next

The 3 most-used AI chat apps, one JustZix setup per app. Check also related:

Hide cookie banners — same pattern (CSS + !important) for annoying overlays
TOGGLE3 — 3-state switcher (example above)
SLIDER — native range for font-size
Mini-IDE in a tab — full map of JustZix tools

Install JustZix — paste the rules from this post and AI chat apps will look exactly how you want them. No account, no server, no tracking.

Rate this post

No ratings yet — be the first.