Claude.ai Wide Mode

README.md

Claude.ai Wide Mode

A minimal, configurable Stylus UserStyle that widens the chat area on claude.ai. No ads, no branding, no bloat.

Install

1. Install the Stylus browser extension (Firefox / Chromium).
2. Open the raw URL of claude-wide.user.css in your browser — Stylus will prompt to install.
3. Reload claude.ai. Tweak the options via the Stylus popup.

Options

Option	Default	Purpose
Content width	95%	Max width of the chat column (60–100%)
Right-align user messages	off	Messenger-style layout: user on right, Claude on left
User message max width	80%	Only used when right-align is on (40–100%)
Use custom font size	off	Enables the font size override
Font size	1rem	Any CSS length, e.g. 1rem, 16px, 1.2em

License

MIT

claude_wide.user.css

/* ==UserStyle==
@name           Claude.ai Wide Mode
@namespace      github.com/Xitee1
@version        1.0.1
@description    Configurable wide layout for claude.ai. No ads, no bloat.
@author         Xitee1
@license        MIT
@preprocessor   stylus

@var range      contentWidth    "Content width"                 [95, 60, 100, 5, '%']
@var checkbox   chatMode        "Constrain user message width"  0
@var range      userMsgWidth    "User message max width"        [80, 40, 100, 5, '%']
@var checkbox   customFont      "Use custom font size"          0
@var text       fontSize        "Font size (only if enabled)"   "1rem"
==/UserStyle== */

@-moz-document domain("claude.ai") {
    /* ---------------------------------------------------------------
       Wide mode
       Claude caps the chat area with Tailwind `max-w-*` utility
       classes on nested containers. We lift those caps site-wide.
       The :not() filters exclude Radix UI overlays (popovers,
       menus, dialogs, listboxes) so interactive UI stays intact.
       --------------------------------------------------------------- */
    [class*="max-w-"]:not([data-state="open"], [data-state="closed"], [role="dialog"], [role="menu"], [role="listbox"]) {
        max-width: contentWidth !important;
    }

    /* ---------------------------------------------------------------
       Chat mode (optional)
       Keep user message bubbles narrower than the main column —
       a messenger-style look. User messages are already right-
       aligned by Claude's own `flex-col items-end` wrapper, so
       we only need to cap their width here.
       --------------------------------------------------------------- */
    if chatMode {
        [data-test-render-count]:has([data-testid="user-message"]) [class*="max-w-"] {
            max-width: userMsgWidth !important;
        }
    }

    /* ---------------------------------------------------------------
       Custom font size (optional)
       Accepts any CSS length, e.g. `1rem`, `16px`, `1.2em`.
       --------------------------------------------------------------- */
    if customFont {
        .standard-markdown,
        .standard-markdown *,
        .ProseMirror,
        .font-claude-response,
        .font-claude-response-body,
        .font-user-message {
            font-size: fontSize !important;
        }
    }
}