☰

Greasy Fork is available in English.

Claude responsive + customizations

Claude website is more suitable for wide screens.

/* ==UserStyle==
@name           Claude responsive + customizations
@version        1.0.16
@description    Claude website is more suitable for wide screens.
@author         BreatFR (https://breat.fr)
@namespace      https://gitlab.com/breatfr
@homepageURL    https://gitlab.com/breatfr/claude
@supportURL     https://discord.gg/Q8KSHzdBxs
@license        AGPL-3.0-or-later; https://www.gnu.org/licenses/agpl-3.0.txt
@preprocessor   stylus

@var    checkbox    claudeicon      "Claude icon menu"      1
@var    text        fontsize        "Font size"             1.2rem
@var    checkbox    hideavatar      "Hide avatar in chat"   1
@var    checkbox    bubbleswidth    "Limited bubbles width" 1
@var    checkbox    bubblesright    "Our bubbles on right"  1
@var    checkbox    widemode        "Wide mode"             1
==/UserStyle== */

/* === Credits ===
Website         https://breat.fr
facebook        https://www.facebook.com/breatfroff
mastodon        https://mastodon.social/@breat_fr
telegram        https://t.me/breatfr
vk              https://vk.com/breatfroff
X (twitter)     https://x.com/breatfroff
=== Credits === */

@-moz-document domain("claude.ai") {
    :root {
        --themeversion: 'Theme v1.0.16 by BreatFR (https://breat.fr)';
        --install1: ' usercssjs.breat.fr ';
        --install2: ' gitlab.com/breatfr/claude';
        --space: '\00a0\00a0\00a0\00a0\00a0\00a0\00a0';
        --support1: ' ko-fi.com/breatfr ';
        --support2: ' paypal.me/breat';
        --fontsize: fontsize;
    }

    .inline-block.max-w-full.align-middle.max-md\\:line-clamp-2.max-md\\:break-words.md\\:overflow-hidden.md\\:overflow-ellipsis::after {
        background: linear-gradient(88.55deg, rgb(139, 109, 255) 22.43%, rgb(254, 132, 132) 92.28%);
        background-clip: text;
        -o-background-clip: text;
        -moz-background-clip: text;
        -ms-background-clip: text;
        -webkit-background-clip: text;
        color: transparent;
        content: var(--themeversion) '\A' 'Install: ' url("https://gitlab.com/breatfr/kindroid/-/raw/main/images/icon_breat.fr.png") var(--install1) var(--space) url("https://gitlab.com/breatfr/kindroid/-/raw/main/images/icon_gitlab.png") var(--install2) '\A' 'Support me: ' url("https://gitlab.com/breatfr/kindroid/-/raw/main/images/icon_ko-fi.png") var(--support1) var(--space)  url("https://gitlab.com/breatfr/kindroid/-/raw/main/images/icon_paypal.png") var(--support2);
        display: flex;
        flex-direction: column;
        font-family: var(--font-styrene-b), ui-sans-serif, system-ui, sans-serif;
        font-size: calc(var(--fontsize) + .2rem);
        line-height: 1.5;
        top: 20px;
        right: 20px;
        position: absolute;
        text-align: center;
        width: max-content;
        white-space: pre-line;        
    }
    
    .font-claude-message a,
    .font-user-message a {
        color: #da7756;
    }
    
    /* Custom font size */
    code,
    [data-testid="delete-chat-trigger"],
    [data-testid="rename-chat-trigger"],
    .font-claude-message,
    .font-tiempos,
    .font-user-message,
    .ProseMirror {
        font-size: fontsize;
        line-height: 1.5;
    }
    .inline-block.underline-offset-2.transition-opacity.hover\\:underline.opacity-100.duration-700,
    .text-xs {
        font-size: calc(var(--fontsize) - .2rem);
        line-height: 1.2;
    }
    /* Claude model choice under textarea */
    .font-tiempos.inline-flex.gap-\\[4px\\].text-\\[14px\\].leading-none {
        position: relative;
    }
    .font-tiempos.inline-flex.gap-\\[4px\\].text-\\[14px\\].leading-none > div {
        margin-left: 50px;
    }
    .font-tiempos.inline-flex.gap-\\[4px\\].text-\\[14px\\].leading-none > svg {
        position: absolute;
        top: 50% !important;
        transform: translateY(-50%) !important;
    }
    
    .md\\:h-12 {
        height: auto;
    }
    
    if claudeicon {
        .ml-px.flex.h-9.flex-1.items-center.leading-none.max-md\\:pointer-events-none.max-md\\:opacity-0 > a > svg,
        .ml-px.flex.h-9.flex-1.items-center.leading-none > a > svg {
            background-color: #da7756;
            fill: none;
            height: 2.25rem;
            margin: 10px 0 0 5px;
            mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg' class='text-text-000 h-6 sm:h-7' fill='currentColor'%3E%3Cpath d='m7.75 26.27 7.77-4.36.13-.38-.13-.21h-.38l-1.3-.08-4.44-.12-3.85-.16-3.73-.2-.94-.2L0 19.4l.09-.58.79-.53 1.13.1 2.5.17 3.75.26 2.72.16 4.03.42h.64l.09-.26-.22-.16-.17-.16-3.88-2.63-4.2-2.78-2.2-1.6L3.88 11l-.6-.76-.26-1.66L4.1 7.39l1.45.1.37.1 1.47 1.13 3.14 2.43 4.1 3.02.6.5.24-.17.03-.12-.27-.45L13 9.9l-2.38-4.1-1.06-1.7-.28-1.02c-.1-.42-.17-.77-.17-1.2L10.34.21l.68-.22 1.64.22.69.6 1.02 2.33 1.65 3.67 2.56 4.99.75 1.48.4 1.37.15.42h.26v-.24l.21-2.81.39-3.45.38-4.44.13-1.25.62-1.5L23.1.57l.96.46.79 1.13-.11.73-.47 3.05-.92 4.78-.6 3.2h.35l.4-.4 1.62-2.15 2.72-3.4 1.2-1.35 1.4-1.49.9-.71h1.7l1.25 1.86-.56 1.92-1.75 2.22-1.45 1.88-2.08 2.8-1.3 2.24.12.18.31-.03 4.7-1 2.54-.46 3.03-.52 1.37.64.15.65-.54 1.33-3.24.8-3.8.76-5.66 1.34-.07.05.08.1 2.55.24 1.09.06h2.67l4.97.37 1.3.86.78 1.05-.13.8-2 1.02-2.7-.64-6.3-1.5-2.16-.54h-.3v.18l1.8 1.76 3.3 2.98 4.13 3.84.21.95-.53.75-.56-.08-3.63-2.73-1.4-1.23-3.17-2.67h-.21v.28l.73 1.07 3.86 5.8.2 1.78-.28.58-1 .35-1.1-.2L26 33.14l-2.33-3.57-1.88-3.2-.23.13-1.11 11.95-.52.61-1.2.46-1-.76-.53-1.23.53-2.43.64-3.17.52-2.52.47-3.13.28-1.04-.02-.07-.23.03-2.36 3.24-3.59 4.85-2.84 3.04-.68.27-1.18-.61.11-1.09.66-.97 3.93-5 2.37-3.1 1.53-1.79-.01-.26h-.09L6.8 30.56l-1.86.24-.8-.75.1-1.23.38-.4 3.14-2.16Z' fill='%23D97757' shape-rendering='optimizeQuality'/%3E%3C/svg%3E");
            -o-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg' class='text-text-000 h-6 sm:h-7' fill='currentColor'%3E%3Cpath d='m7.75 26.27 7.77-4.36.13-.38-.13-.21h-.38l-1.3-.08-4.44-.12-3.85-.16-3.73-.2-.94-.2L0 19.4l.09-.58.79-.53 1.13.1 2.5.17 3.75.26 2.72.16 4.03.42h.64l.09-.26-.22-.16-.17-.16-3.88-2.63-4.2-2.78-2.2-1.6L3.88 11l-.6-.76-.26-1.66L4.1 7.39l1.45.1.37.1 1.47 1.13 3.14 2.43 4.1 3.02.6.5.24-.17.03-.12-.27-.45L13 9.9l-2.38-4.1-1.06-1.7-.28-1.02c-.1-.42-.17-.77-.17-1.2L10.34.21l.68-.22 1.64.22.69.6 1.02 2.33 1.65 3.67 2.56 4.99.75 1.48.4 1.37.15.42h.26v-.24l.21-2.81.39-3.45.38-4.44.13-1.25.62-1.5L23.1.57l.96.46.79 1.13-.11.73-.47 3.05-.92 4.78-.6 3.2h.35l.4-.4 1.62-2.15 2.72-3.4 1.2-1.35 1.4-1.49.9-.71h1.7l1.25 1.86-.56 1.92-1.75 2.22-1.45 1.88-2.08 2.8-1.3 2.24.12.18.31-.03 4.7-1 2.54-.46 3.03-.52 1.37.64.15.65-.54 1.33-3.24.8-3.8.76-5.66 1.34-.07.05.08.1 2.55.24 1.09.06h2.67l4.97.37 1.3.86.78 1.05-.13.8-2 1.02-2.7-.64-6.3-1.5-2.16-.54h-.3v.18l1.8 1.76 3.3 2.98 4.13 3.84.21.95-.53.75-.56-.08-3.63-2.73-1.4-1.23-3.17-2.67h-.21v.28l.73 1.07 3.86 5.8.2 1.78-.28.58-1 .35-1.1-.2L26 33.14l-2.33-3.57-1.88-3.2-.23.13-1.11 11.95-.52.61-1.2.46-1-.76-.53-1.23.53-2.43.64-3.17.52-2.52.47-3.13.28-1.04-.02-.07-.23.03-2.36 3.24-3.59 4.85-2.84 3.04-.68.27-1.18-.61.11-1.09.66-.97 3.93-5 2.37-3.1 1.53-1.79-.01-.26h-.09L6.8 30.56l-1.86.24-.8-.75.1-1.23.38-.4 3.14-2.16Z' fill='%23D97757' shape-rendering='optimizeQuality'/%3E%3C/svg%3E");
            -moz-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg' class='text-text-000 h-6 sm:h-7' fill='currentColor'%3E%3Cpath d='m7.75 26.27 7.77-4.36.13-.38-.13-.21h-.38l-1.3-.08-4.44-.12-3.85-.16-3.73-.2-.94-.2L0 19.4l.09-.58.79-.53 1.13.1 2.5.17 3.75.26 2.72.16 4.03.42h.64l.09-.26-.22-.16-.17-.16-3.88-2.63-4.2-2.78-2.2-1.6L3.88 11l-.6-.76-.26-1.66L4.1 7.39l1.45.1.37.1 1.47 1.13 3.14 2.43 4.1 3.02.6.5.24-.17.03-.12-.27-.45L13 9.9l-2.38-4.1-1.06-1.7-.28-1.02c-.1-.42-.17-.77-.17-1.2L10.34.21l.68-.22 1.64.22.69.6 1.02 2.33 1.65 3.67 2.56 4.99.75 1.48.4 1.37.15.42h.26v-.24l.21-2.81.39-3.45.38-4.44.13-1.25.62-1.5L23.1.57l.96.46.79 1.13-.11.73-.47 3.05-.92 4.78-.6 3.2h.35l.4-.4 1.62-2.15 2.72-3.4 1.2-1.35 1.4-1.49.9-.71h1.7l1.25 1.86-.56 1.92-1.75 2.22-1.45 1.88-2.08 2.8-1.3 2.24.12.18.31-.03 4.7-1 2.54-.46 3.03-.52 1.37.64.15.65-.54 1.33-3.24.8-3.8.76-5.66 1.34-.07.05.08.1 2.55.24 1.09.06h2.67l4.97.37 1.3.86.78 1.05-.13.8-2 1.02-2.7-.64-6.3-1.5-2.16-.54h-.3v.18l1.8 1.76 3.3 2.98 4.13 3.84.21.95-.53.75-.56-.08-3.63-2.73-1.4-1.23-3.17-2.67h-.21v.28l.73 1.07 3.86 5.8.2 1.78-.28.58-1 .35-1.1-.2L26 33.14l-2.33-3.57-1.88-3.2-.23.13-1.11 11.95-.52.61-1.2.46-1-.76-.53-1.23.53-2.43.64-3.17.52-2.52.47-3.13.28-1.04-.02-.07-.23.03-2.36 3.24-3.59 4.85-2.84 3.04-.68.27-1.18-.61.11-1.09.66-.97 3.93-5 2.37-3.1 1.53-1.79-.01-.26h-.09L6.8 30.56l-1.86.24-.8-.75.1-1.23.38-.4 3.14-2.16Z' fill='%23D97757' shape-rendering='optimizeQuality'/%3E%3C/svg%3E");
            -ms-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg' class='text-text-000 h-6 sm:h-7' fill='currentColor'%3E%3Cpath d='m7.75 26.27 7.77-4.36.13-.38-.13-.21h-.38l-1.3-.08-4.44-.12-3.85-.16-3.73-.2-.94-.2L0 19.4l.09-.58.79-.53 1.13.1 2.5.17 3.75.26 2.72.16 4.03.42h.64l.09-.26-.22-.16-.17-.16-3.88-2.63-4.2-2.78-2.2-1.6L3.88 11l-.6-.76-.26-1.66L4.1 7.39l1.45.1.37.1 1.47 1.13 3.14 2.43 4.1 3.02.6.5.24-.17.03-.12-.27-.45L13 9.9l-2.38-4.1-1.06-1.7-.28-1.02c-.1-.42-.17-.77-.17-1.2L10.34.21l.68-.22 1.64.22.69.6 1.02 2.33 1.65 3.67 2.56 4.99.75 1.48.4 1.37.15.42h.26v-.24l.21-2.81.39-3.45.38-4.44.13-1.25.62-1.5L23.1.57l.96.46.79 1.13-.11.73-.47 3.05-.92 4.78-.6 3.2h.35l.4-.4 1.62-2.15 2.72-3.4 1.2-1.35 1.4-1.49.9-.71h1.7l1.25 1.86-.56 1.92-1.75 2.22-1.45 1.88-2.08 2.8-1.3 2.24.12.18.31-.03 4.7-1 2.54-.46 3.03-.52 1.37.64.15.65-.54 1.33-3.24.8-3.8.76-5.66 1.34-.07.05.08.1 2.55.24 1.09.06h2.67l4.97.37 1.3.86.78 1.05-.13.8-2 1.02-2.7-.64-6.3-1.5-2.16-.54h-.3v.18l1.8 1.76 3.3 2.98 4.13 3.84.21.95-.53.75-.56-.08-3.63-2.73-1.4-1.23-3.17-2.67h-.21v.28l.73 1.07 3.86 5.8.2 1.78-.28.58-1 .35-1.1-.2L26 33.14l-2.33-3.57-1.88-3.2-.23.13-1.11 11.95-.52.61-1.2.46-1-.76-.53-1.23.53-2.43.64-3.17.52-2.52.47-3.13.28-1.04-.02-.07-.23.03-2.36 3.24-3.59 4.85-2.84 3.04-.68.27-1.18-.61.11-1.09.66-.97 3.93-5 2.37-3.1 1.53-1.79-.01-.26h-.09L6.8 30.56l-1.86.24-.8-.75.1-1.23.38-.4 3.14-2.16Z' fill='%23D97757' shape-rendering='optimizeQuality'/%3E%3C/svg%3E");
            -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg' class='text-text-000 h-6 sm:h-7' fill='currentColor'%3E%3Cpath d='m7.75 26.27 7.77-4.36.13-.38-.13-.21h-.38l-1.3-.08-4.44-.12-3.85-.16-3.73-.2-.94-.2L0 19.4l.09-.58.79-.53 1.13.1 2.5.17 3.75.26 2.72.16 4.03.42h.64l.09-.26-.22-.16-.17-.16-3.88-2.63-4.2-2.78-2.2-1.6L3.88 11l-.6-.76-.26-1.66L4.1 7.39l1.45.1.37.1 1.47 1.13 3.14 2.43 4.1 3.02.6.5.24-.17.03-.12-.27-.45L13 9.9l-2.38-4.1-1.06-1.7-.28-1.02c-.1-.42-.17-.77-.17-1.2L10.34.21l.68-.22 1.64.22.69.6 1.02 2.33 1.65 3.67 2.56 4.99.75 1.48.4 1.37.15.42h.26v-.24l.21-2.81.39-3.45.38-4.44.13-1.25.62-1.5L23.1.57l.96.46.79 1.13-.11.73-.47 3.05-.92 4.78-.6 3.2h.35l.4-.4 1.62-2.15 2.72-3.4 1.2-1.35 1.4-1.49.9-.71h1.7l1.25 1.86-.56 1.92-1.75 2.22-1.45 1.88-2.08 2.8-1.3 2.24.12.18.31-.03 4.7-1 2.54-.46 3.03-.52 1.37.64.15.65-.54 1.33-3.24.8-3.8.76-5.66 1.34-.07.05.08.1 2.55.24 1.09.06h2.67l4.97.37 1.3.86.78 1.05-.13.8-2 1.02-2.7-.64-6.3-1.5-2.16-.54h-.3v.18l1.8 1.76 3.3 2.98 4.13 3.84.21.95-.53.75-.56-.08-3.63-2.73-1.4-1.23-3.17-2.67h-.21v.28l.73 1.07 3.86 5.8.2 1.78-.28.58-1 .35-1.1-.2L26 33.14l-2.33-3.57-1.88-3.2-.23.13-1.11 11.95-.52.61-1.2.46-1-.76-.53-1.23.53-2.43.64-3.17.52-2.52.47-3.13.28-1.04-.02-.07-.23.03-2.36 3.24-3.59 4.85-2.84 3.04-.68.27-1.18-.61.11-1.09.66-.97 3.93-5 2.37-3.1 1.53-1.79-.01-.26h-.09L6.8 30.56l-1.86.24-.8-.75.1-1.23.38-.4 3.14-2.16Z' fill='%23D97757' shape-rendering='optimizeQuality'/%3E%3C/svg%3E");
            mask-position: center;
            -o-mask-position: center;
            -moz-mask-position: center;
            -ms-mask-position: center;
            -webkit-mask-position: center;
            mask-repeat: no-repeat;
            -o-mask-repeat: no-repeat;
            -moz-mask-repeat: no-repeat;
            -ms-mask-repeat: no-repeat;
            -webkit-mask-repeat: no-repeat;
            width: 2.25rem;
        }
    }
    
    if hideavatar {
        .flex.flex-row.gap-2>.shrink-0,
        .flex.flex-row.gap-2>.shrink-0>div {
            display: none;
            height: 0;
            width: 0;
        }
    }
    
    if bubbleswidth {
        [style="height: auto; opacity: 1;"],
        .mb-1.mt-1 {
            max-width: 80% !important;
            width: fit-content;
        }
    }
    
    if bubblesright {
        .mb-1.mt-1,
        [data-testid="paste.txt"],
        [data-testid="image.png"] {
            margin-left: auto;
        }
        .flex.flex-wrap.gap-0\\.5,
        .flex.flex-wrap.gap-2 {            
            flex-direction: row-reverse;
        }
    }
    
    if widemode {
        .max-w-\\[60rem\\],
        .max-w-\\[75ch\\],
        .max-w-\\[60ch\\],
        .max-w-3xl,
        .max-w-2xl,
        .max-w-xl {
            max-width: 100%;
            width: 100%;
        }
        .w-\\[36rem\\] {
            max-width: 100%;
            width: 100%;
            min-width: 36rem;
        }
    }
}

@-moz-document url("https://claude.ai/new") {
    if widemode {
        .\\32xl\\:pr-20 {
            max-width: 100%;
            width: 100%;
        }
    }
}

@-moz-document url-prefix("https://claude.ai/settings/billing") {
    if widemode {
        .max-w-3xl {
            max-width: 48rem;
        }
    }
}

@-moz-document url("https://claude.ai/upgrade/pro") {
    if widemode {
        .max-w-xl {
            max-width: 36rem;
        }
    }
}

@-moz-document domain("anthropic.com") {
    if widemode {
        .lg\\:max-w-160,
        .w-240 {
            max-width: 100%;
            width: 100%;
        }
        
        .s\\:grid-12 {
            grid-template-columns: auto;
        }
        .s\\:col-start-3 {
            grid-column-start: 1;
        }
    }
}