Claude.ai CSS Fixes

A pure-CSS Tampermonkey userscript that improves the Claude.ai interface. No DOM manipulation - just an injected <style> tag, and no special permissions (@grant none) - it works with any userscript manager.

Inspired by alexchexes/chatgpt_ui_fix for ChatGPT.

---

Install

1. Install the Tampermonkey browser extension
2. Click the link below to install the script directly: ⬇️ Install claude-ai-css-fixes.user.js Tampermonkey will detect the @downloadURL header and prompt you to install it automatically.

---

Features

All features can be toggled on/off via the settings object at the top of the script.

Feature	Default	What it does
debug	❌ Off	Logs active features, injected CSS size, and a live selector health-check to console
chatWidth	✅ On	Widens the chat column to 90% of the screen
textAreaHeight	✅ On	Lets the input box grow taller before scrolling
codeBlockFont	✅ On	Uses Consolas font in code blocks
codeBlockBackground	✅ On	Darker background on code blocks for contrast
codeBlockLineBreaks	✅ On	Wraps long code lines instead of horizontal scroll
inlineCodeColor	✅ On	Warmer colour on inline code so it stands out
userMessageVisibility	✅ On	Blue/purple gradient on your message bubbles
topBarTransparency	✅ On	Makes the chat page top bar transparent
sidebarWidth	❌ Off	Widens the sidebar (enable if titles get cut off)
sidebarHeadingsVisibility	✅ On	Colours the "Recents" date headings in the sidebar
multilineHistoryTitles	✅ On	Lets sidebar chat titles wrap instead of truncating
alwaysVisibleActions	✅ On	Always shows copy/retry/thumbs buttons under messages
subtleInviteButton	✅ On	Fades the "Invite team members" sidebar button
homePageTopBar	✅ On	Fades the top-right buttons on the home page

---

Customising

Open the script in Tampermonkey's editor. At the top you'll find a settings object:

chatWidth: {
  enabled: true,   // set to false to turn off
  maxWidth: '90%', // change to e.g. '1200px'
},

• Set enabled: false to turn any feature off
• Most features expose a value you can tweak (width, colour, font, etc.)

---

Debug Mode

To see which features are active and how much CSS was injected, enable debug mode:

debug: {
  enabled: true,
  checkSelectors: true, // set to false to skip the selector health-check table
},

With debug on, the browser console will show:

• A styled banner confirming the script loaded
• A list of every active feature by name
• The total number of CSS characters injected
• A selector health-check table (checkSelectors) - for every enabled feature, it queries each of that feature's selectors against the live page and reports the match count. A feature with 0 matches across every one of its selectors gets a console warning naming that feature, so you know exactly what's broken without having to guess. Useful whenever Claude.ai ships a UI change.

Set debug.enabled back to false before normal use - it produces no output when off.

Auto-updates

The script includes @updateURL and @downloadURL headers pointing to this repo. Tampermonkey will check for updates automatically based on your update settings.

Notes

• CSS selectors are verified against the live Claude.ai DOM (including the newer "dframe" shell layout) - if Anthropic update their frontend again, some selectors may need refreshing. Most features now chain a legacy selector with resilient fallbacks so a single class rename shouldn't break them outright
• Requires no special permissions - @grant none, so it works with any userscript manager
• Tested on Chrome, Edge & FireFox + Tampermonkey
• No data is collected or sent anywhere

---

Selector Health Check

Claude.ai uses Tailwind utility classes that can change without notice. If a feature silently stops working:

1. Enable Debug Mode first - the checkSelectors table will tell you exactly which feature has 0 matches, and which of its selectors are dead, without any manual digging.
2. If you still need to find a replacement selector: open Chrome DevTools → Elements tab
3. Find the element the feature should affect
4. Compare its current classes/attributes to the selectors in the css {} block inside the script
5. Update the selector to match, or open an issue

Every feature's selectors are written as a comma-separated chain of a legacy exact match plus one or more resilient fallbacks, so a redesign that breaks one selector doesn't necessarily break the feature - but it's still worth checking the health-check table after any Claude.ai UI update.

ARIA-based selectors (e.g. aside[aria-label="Sidebar"]), data-testid/data-* attribute selectors, and semantic tags are more stable than Tailwind class combinations and are preferred where possible.

Changelog

Version	Changes
2026-08-04.4	Removed the GM_addStyle dependency (and the @grant GM_addStyle permission) - styles are now injected via a plain document.createElement('style'), so @grant is now none and the script works on any userscript manager
2026-08-04.3	Confirmed selectors against a live active-chat page dump; fixed the message-actions toolbar (role="group" → role="toolbar", and the real show/hide opacity lives on a [data-message-action-bar] wrapper), the user message bubble (now targets data-user-message-bubble="true"), the header (<div data-testid="chat-header">, not a <header> tag), and the code-block background (wrapper div now contains <pre>, not the reverse)
2026-08-04.2	Confirmed selectors against a live new-UI page dump. The new UI is a "dframe" shell: sidebar is <aside class="dframe-sidebar"> (not <nav>); "Recents"/"Pinned" headings are plain <div data-sidebar-group-label> with no heading tag; sidebar chat titles use a marquee-scroll effect instead of simple truncation; the composer gained a stable data-testid="chat-input"; the home top-right action bar dropped its z-header class; width wrappers now mix max-w-7xl, max-w-2xl, and arbitrary values like max-w-[40rem]
2026-08-04.1	Reworked every selector to chain a legacy exact match plus resilient ARIA/attribute/semantic/anchor-class fallbacks, so the script degrades gracefully across UI redesigns instead of failing silently and completely; added a debug.checkSelectors live selector health-check that reports per-feature match counts to console
2026-04-03.1	Fixed chatWidth outer container selector for existing chat pages: size-full → w-full flex-1 to match current live DOM
2026-03-31.3	README - added Known Issues section covering fragile selectors and other known issues; added Debug Mode section; added Selector Health Check section
2026-03-31.2	Fixed textAreaHeight to suppress horizontal scrollbars; fixed sidebarHeadingsVisibility font-weight to use !important so Tailwind can't override it
2026-03-31.1	Added debug mode, changelog, and selector health-check notes; moved console.info inside IIFE
2026-03-25.5	Added homePageTopBar and subtleInviteButton features

---

Licence

MIT - do whatever you like with it.