Customize ChatGPT / Claude / Gemini UI — szersze chaty, lepszy font, ukryj upsells
Spędzasz w ChatGPT, Claude albo Gemini 4 godziny dziennie. Default UI każdego z nich ma decyzje wycelowane w nowicjusza: wąskie message bubbles (~700px na 1920px monitorze), cienki sans-serif w code blockach (musisz mrużyć oczy żeby odróżnić l od 1), banner "Upgrade to Pro" żebrający o subscribe. Wszystko fixable w 5 minut z JustZix. CSS reguły + JS observers, zapisane raz, działają na zawsze. Bez tracking'u, bez kont, bez "powered by" wodotrysków.
ChatGPT (chat.openai.com / chatgpt.com) — 3 reguły CSS
Domain match: *://chatgpt.com/* oraz *://chat.openai.com/* (legacy domain).
1. Szersze message bubbles (max-width 1200px)
/* ChatGPT default: max-width około 768px. Power user na 1080p+ = marnowanie */
.text-message, [data-message-author-role] > div {
max-width: min(1200px, 92vw) !important;
}
/* Container z prompt input też */
form .stretch, form[data-type="unified-composer"] {
max-width: min(1200px, 92vw) !important;
}2. Monospace dla code blocks (Fira Code z 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;
}
/* Większy padding wewnątrz code block = łatwiejsze czytanie */
pre {
padding: 16px !important;
border-radius: 8px !important;
}3. Ukryj "Upgrade to Plus" banner + suggestions chips
/* Banner u góry sidebaru "Upgrade your plan" */
nav a[href*="upgrade"], nav button[aria-label*="Upgrade"],
[data-testid="upgrade-button"], [class*="upgrade-banner"] {
display: none !important;
}
/* Suggested prompts gridowe nad polem input — clutter dla power usera */
[class*="suggestions"], [class*="prompt-card"] {
display: none !important;
}Claude.ai — wide chat + zachowaj sidebar
Domain: *://claude.ai/*. Claude domyślnie pokazuje 720px max-width chatu nawet na 4K. Naprawmy:
/* Główny obszar konwersacji */
.h-screen [class*="max-w-"], main [class*="max-w-3xl"],
[data-testid="conversation"] > div {
max-width: min(1180px, 90vw) !important;
}
/* Code blocks — Claude już ma monospace, ale za mały i bez 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 (prawy side panel) szerszy gdy otwarty */
[data-testid="artifact-panel"] {
width: 50% !important;
min-width: 600px !important;
}Bonus: Ctrl+Enter wysyła wiadomość (default Enter = newline w textarea Claude). Jeśli wolisz tylko Enter:
// JS rule na claude.ai
document.addEventListener('keydown', (e) => {
if (e.key === 'Enter' && !e.shiftKey && !e.ctrlKey && e.target.tagName === 'TEXTAREA') {
// Tylko gdy textarea ma więcej niż 0 znaków (zostawia możliwość Enter w pustym 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) — najmniej forgivable default
Domain: *://gemini.google.com/*. Gemini ma najgorszy default — chat zamknięty w ~640px na 4K monitorze, niskim contrast'em.
/* Wider chat */
[class*="conversation-container"], chat-window, main {
max-width: min(1240px, 92vw) !important;
}
[class*="user-query"], [class*="model-response"] {
max-width: 100% !important;
}
/* Większy contrast tekstu — Gemini default to #5f6368 na #ffffff (3.5:1, fail WCAG AA) */
.markdown, [class*="response-content"] {
color: #202124 !important;
}
/* Kolorystyka code blocks — Gemini ma niskotraktowy syntax-highlight */
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 do przełączania szerokości
Czasem chcesz wąsko (czytasz long-form), czasem szeroko (kod). TOGGLE3 z 3 stanami:
// Akcja 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');I CSS rule używa tej variable:
main, [class*="conversation"] {
max-width: var(--jz-chat-width, 1180px) !important;
}3 klik = 3 szerokości. Memory per-domena trzyma ostatni wybór.
Use case 2 — SLIDER do regulacji font-size
Code blocks za małe = mrużysz oczy. SLIDER 10-20px:
// Akcja 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 slider → live preview. Idealne przy share screen'ie z zespołem (zoom up na 18-20px, łatwo czytelne z dalsza).
Use case 3 — Output Console jako prompt journal
Bardzo specific power-user trick: log każdej swojej wiadomości do Output Console żeby mieć historię prompts:
// 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.');Otwórz Output Console pane snap'nięty z boku → widzisz historię swoich prompts (truncated to 200 chars). Kopiuj-paste do dokumentu na koniec dnia. Zero tracking off-server.
Pułapki
- Selektory się zmieniają. Chat apps często deployują UI redesigns co kilka tygodni.
[data-message-author-role]jest stabilny (ARIA-based), ale[class*="upgrade-banner"]łapie cokolwiek z "upgrade-banner" w classie — kruche. Testuj raz w miesiącu. - !important to ostatnia deska ratunku. AI chat apps używają Tailwind z hash-suffixed classes — twoje override'y muszą wygrywać specifity. Plus: niektóre stylowania są inline (style attr), wtedy !important + selector :where() pomaga.
- Dark mode override. Jeśli aplikacja ma dark mode toggle (Claude, ChatGPT), twoje color: w CSS może klipować się z theme. Use CSS variables strony jeśli istnieją:
color: var(--text-primary, #202124) !important. - MutationObserver może być expensive. Chat apps render setki nodes na sekundę podczas streaming response. Throttle/filter observer wewnątrz callback'a.
- Single-page app + auto-reload. JustZix CSS reguły aplikują się raz przy load. SPA route change może wyrenderować nowy nav bez ponownego load. CSS rule pozostaje aktywne (style tag w head), ale jeśli używasz JS rule dla DOM cleanup → potrzebny MutationObserver albo URL change listener (popstate / hashchange).
Co dalej
3 najczęściej używane AI chat apps, jeden setup JustZix per app. Sprawdź też powiązane:
- Ukryj cookie banery — ten sam pattern (CSS + !important) dla irritujących overlays
- TOGGLE3 — 3-stanowy switcher (przykład powyżej)
- SLIDER — natywny range dla font-size
- Mini-IDE w karcie — pełna mapa narzędzi JustZix
Zainstaluj JustZix — wkleisz reguły z tego postu i AI chat apps natychmiast będą wyglądać tak jak chcesz. Bez konta, bez serwera, bez tracking'u.
Oceń ten wpis
Brak ocen — oceń jako pierwszy.