ChatGPT / Claude / Gemini UI anpassen — breitere Chats, bessere Schriften, Upsells ausblenden

15 Mai 2026 · von JustZix Team

Du verbringst 4 Stunden täglich in ChatGPT, Claude oder Gemini. Jede Standard-UI trifft Entscheidungen, die auf den Neuling zielen: schmale Nachrichtenblasen (~700px auf einem 1920px-Monitor), dünne Sans-Serif in Code-Blöcken (du kneifst die Augen, um l von 1 zu unterscheiden), „Upgrade to Pro"-Banner, der um ein Abo bettelt. Alles in 5 Minuten mit JustZix behebbar. CSS-Regeln + JS-Observer, einmal gespeichert, funktionieren für immer. Kein Tracking, keine Konten, keine „powered by"-Spielereien.

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

Domain-Match: *://chatgpt.com/* und *://chat.openai.com/* (Legacy-Domain).

1. Breitere Nachrichtenblasen (max-width 1200px)

/* ChatGPT-Standard: max-width ~768px. Power-User auf 1080p+ = verschwendet */
.text-message, [data-message-author-role] > div {
  max-width: min(1200px, 92vw) !important;
}
/* Auch der Prompt-Eingabe-Container */
form .stretch, form[data-type="unified-composer"] {
  max-width: min(1200px, 92vw) !important;
}

2. Monospace für Code-Blöcke (Fira Code mit Ligaturen)

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;
}
/* Mehr Padding in Code-Blöcken = leichteres Lesen */
pre {
  padding: 16px !important;
  border-radius: 8px !important;
}

3. „Upgrade to Plus"-Banner + Vorschlags-Chips ausblenden

/* Banner oben in der Sidebar „Upgrade your plan" */
nav a[href*="upgrade"], nav button[aria-label*="Upgrade"],
[data-testid="upgrade-button"], [class*="upgrade-banner"] {
  display: none !important;
}
/* Vorgeschlagene Prompts über der Eingabe — Clutter für Power-User */
[class*="suggestions"], [class*="prompt-card"] {
  display: none !important;
}

Claude.ai — breiter Chat + Sidebar behalten

Domain: *://claude.ai/*. Claude nutzt standardmäßig einen Chat mit 720px max-width, selbst auf 4K. Beheben wir das:

/* Hauptbereich der Konversation */
.h-screen [class*="max-w-"], main [class*="max-w-3xl"],
[data-testid="conversation"] > div {
  max-width: min(1180px, 90vw) !important;
}
/* Code-Blöcke — Claude hat schon Monospace, aber zu klein und ohne Ligaturen */
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 (rechtes Seitenpanel) breiter, wenn offen */
[data-testid="artifact-panel"] {
  width: 50% !important;
  min-width: 600px !important;
}

Bonus: Ctrl+Enter sendet die Nachricht (Standard Enter = Zeilenumbruch in Claudes Textarea). Wenn du nur Enter bevorzugst:

// JS-Regel auf claude.ai
document.addEventListener('keydown', (e) => {
  if (e.key === 'Enter' && !e.shiftKey && !e.ctrlKey && e.target.tagName === 'TEXTAREA') {
    // Nur wenn die Textarea Text hat (erlaubt Enter in leerer 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) — der am wenigsten verzeihliche Standard

Domain: *://gemini.google.com/*. Gemini hat den schlechtesten Standard — Chat in ~640px auf einem 4K eingezwängt, mit niedrigem Kontrast.

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

/* Besserer Textkontrast — Gemini-Standard ist #5f6368 auf #ffffff (3.5:1, fällt WCAG AA durch) */
.markdown, [class*="response-content"] {
  color: #202124 !important;
}

/* Code-Block-Farben — Gemini hat kontrastarmes 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; }

Anwendungsfall 1 — TOGGLE3 zum Umschalten der Breite

Mal schmal (du liest Langform), mal breit (Code). TOGGLE3 mit 3 Zuständen:

// Aktion TOGGLE3 „📐 Breite"
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');

Und die CSS-Regel nutzt diese Variable:

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

3 Klicks = 3 Breiten. Die Memory pro Domain behält deine letzte Wahl.

Anwendungsfall 2 — SLIDER zur Schriftgrößensteuerung

Code-Blöcke zu klein = Augenkneifen. SLIDER 10-20px:

// Aktion SLIDER „🔤 Code-Größe"
min: 10, max: 20, step: 1, defaultValue: 14, unit: 'px'

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

CSS-Regel:

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

Ziehe den Slider → Live-Vorschau. Perfekt während eines Screen-Shares mit deinem Team (auf 18-20px zoomen, aus der Ferne leicht lesbar).

Anwendungsfall 3 — Output Console als Prompt-Journal

Sehr spezifischer Power-User-Trick: logge jede gesendete Nachricht in die Output Console für eine Prompt-Historie:

// JS-Regel
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 aktiv.');

Öffne ein an die Seite eingerastetes Output-Console-Pane → du siehst die Historie deiner Prompts (auf 200 Zeichen gekürzt). Kopiere sie am Tagesende in ein Dokument. Null Off-Server-Tracking.

Fallstricke

Selektoren ändern sich. Chat-Apps liefern oft alle paar Wochen UI-Redesigns. [data-message-author-role] ist stabil (ARIA-basiert), aber [class*="upgrade-banner"] matcht alles mit „upgrade-banner" in einer Klasse — fragil. Monatlich testen.
!important ist der letzte Ausweg. KI-Chat-Apps nutzen Tailwind mit hash-suffigierten Klassen — deine Overrides müssen die Spezifität schlagen. Außerdem: manche Styles sind inline (style-Attribut) — dann hilft !important + ein :where()-Selektor.
Dark-Mode-Override. Hat die App einen Dark-Mode-Toggle (Claude, ChatGPT), kann dein color: im CSS mit dem Theme kollidieren. Nutze die CSS-Variablen der Seite, falls verfügbar: color: var(--text-primary, #202124) !important.
MutationObserver kann teuer sein. Chat-Apps rendern Hunderte Knoten pro Sekunde während einer gestreamten Antwort. Throttle/filtere im Callback.
Single-Page-App + Auto-Reload. JustZix-CSS-Regeln werden einmal beim Laden angewendet. Ein SPA-Routenwechsel kann eine neue Nav ohne vollen Reload rendern. Die CSS-Regel bleibt aktiv (style-Tag im head), aber wenn du eine JS-Regel für DOM-Cleanup nutzt → brauchst du einen MutationObserver oder einen URL-Change-Listener (popstate / hashchange).

Wie es weitergeht

Die 3 meistgenutzten KI-Chat-Apps, ein JustZix-Setup pro App. Sieh dir auch Verwandtes an:

Cookie-Banner ausblenden — dasselbe Muster (CSS + !important) für lästige Overlays
TOGGLE3 — 3-Zustands-Umschalter (Beispiel oben)
SLIDER — nativer Range für Schriftgröße
Mini-IDE im Tab — vollständige Karte der JustZix-Werkzeuge

Installiere JustZix — füge die Regeln aus diesem Beitrag ein, und die KI-Chat-Apps sehen genau so aus, wie du es willst. Kein Konto, kein Server, kein Tracking.

Bewerte diesen Beitrag

Noch keine Bewertungen — sei der Erste.