FR

← Tous les articles

Tutoriels

Personnaliser l'UI de ChatGPT / Claude / Gemini — chats plus larges, meilleures polices, masquer les upsells

· par JustZix Team

Vous passez 4 heures par jour dans ChatGPT, Claude ou Gemini. Chaque UI par défaut fait des choix visant le nouveau venu : bulles de messages étroites (~700px sur un écran de 1920px), sans-serif fine dans les blocs de code (vous plissez les yeux pour distinguer l de 1), bannière « Upgrade to Pro » qui mendie un abonnement. Tout corrigeable en 5 minutes avec JustZix. Règles CSS + observers JS, sauvegardés une fois, fonctionnent pour toujours. Pas de tracking, pas de comptes, pas de gadgets « powered by ».

ChatGPT (chat.openai.com / chatgpt.com) — 3 règles CSS

Match de domaine : *://chatgpt.com/* et *://chat.openai.com/* (domaine legacy).

1. Bulles de messages plus larges (max-width 1200px)

/* Défaut ChatGPT : max-width ~768px. Power user sur 1080p+ = gaspillé */
.text-message, [data-message-author-role] > div {
  max-width: min(1200px, 92vw) !important;
}
/* Le conteneur de saisie du prompt aussi */
form .stretch, form[data-type="unified-composer"] {
  max-width: min(1200px, 92vw) !important;
}

2. Monospace pour les blocs de code (Fira Code avec 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;
}
/* Plus de padding dans les blocs de code = lecture plus facile */
pre {
  padding: 16px !important;
  border-radius: 8px !important;
}

3. Masquer la bannière « Upgrade to Plus » + les chips de suggestions

/* Bannière en haut de la sidebar « Upgrade your plan » */
nav a[href*="upgrade"], nav button[aria-label*="Upgrade"],
[data-testid="upgrade-button"], [class*="upgrade-banner"] {
  display: none !important;
}
/* Grille de prompts suggérés au-dessus de la saisie — du fouillis pour les power users */
[class*="suggestions"], [class*="prompt-card"] {
  display: none !important;
}

Claude.ai — chat large + garder la sidebar

Domaine : *://claude.ai/*. Claude utilise par défaut un chat en max-width 720px même sur 4K. Corrigeons ça :

/* Zone principale de conversation */
.h-screen [class*="max-w-"], main [class*="max-w-3xl"],
[data-testid="conversation"] > div {
  max-width: min(1180px, 90vw) !important;
}
/* Blocs de code — Claude a déjà du monospace, mais trop petit et sans 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;
}
/* Panneau Artifact (panneau latéral droit) plus large quand ouvert */
[data-testid="artifact-panel"] {
  width: 50% !important;
  min-width: 600px !important;
}

Bonus : Ctrl+Entrée envoie le message (par défaut Entrée = saut de ligne dans la textarea de Claude). Si vous préférez juste Entrée :

// Règle JS sur claude.ai
document.addEventListener('keydown', (e) => {
  if (e.key === 'Enter' && !e.shiftKey && !e.ctrlKey && e.target.tagName === 'TEXTAREA') {
    // Seulement quand la textarea a du texte (permet Entrée dans une textarea vide)
    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) — le défaut le moins pardonnable

Domaine : *://gemini.google.com/*. Gemini a le pire défaut — chat coincé dans ~640px sur un 4K, avec un faible contraste.

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

/* Meilleur contraste du texte — le défaut Gemini est #5f6368 sur #ffffff (3.5:1, échoue WCAG AA) */
.markdown, [class*="response-content"] {
  color: #202124 !important;
}

/* Couleurs des blocs de code — Gemini a une coloration syntaxique à faible contraste */
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; }

Cas d'usage 1 — TOGGLE3 pour changer la largeur

Parfois étroit (vous lisez du long format), parfois large (du code). TOGGLE3 à 3 états :

// Action TOGGLE3 « 📐 Largeur »
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');

Et la règle CSS utilise cette variable :

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

3 clics = 3 largeurs. La mémoire par domaine garde votre dernier choix.

Cas d'usage 2 — SLIDER pour le contrôle de la taille de police

Blocs de code trop petits = vous plissez les yeux. SLIDER 10-20px :

// Action SLIDER « 🔤 Taille du code »
min: 10, max: 20, step: 1, defaultValue: 14, unit: 'px'

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

Règle CSS :

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

Glissez le slider → aperçu en direct. Parfait pendant un partage d'écran avec votre équipe (zoomez à 18-20px, facile à lire de loin).

Cas d'usage 3 — Output Console comme journal de prompts

Astuce de power user très spécifique : journalisez chaque message envoyé dans l'Output Console pour un historique de prompts :

// Règle JS
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('Journal de prompts actif.');

Ouvrez un pane Output Console aimanté sur le côté → vous voyez l'historique de vos prompts (tronqués à 200 caractères). Copiez-collez dans un document en fin de journée. Zéro tracking hors serveur.

Pièges

La suite

Les 3 apps de chat IA les plus utilisées, un setup JustZix par app. Voyez aussi les articles liés :

Installez JustZix — collez les règles de cet article et les apps de chat IA auront exactement l'apparence que vous voulez. Pas de compte, pas de serveur, pas de tracking.

aichatgptclaudegeminicssux

Notez cet article

Aucune note — soyez le premier.

Voir aussi

Essayez vous-même

Installez JustZix et collez n'importe quel snippet de cet article. Deux minutes de zéro à une règle fonctionnelle sur tous vos appareils.

Obtenir JustZix

Fonctionnalités · Comment ça marche · Exemples · Cas d'usage