Microsoft Copilot responsive + customizations

Microsoft Copilot website is more suitable for wide screens.
Från och med 2025-02-12. Se den senaste versionen.
Visit the author's site for support, ask a question, post a review, or report the script.
Wrap lines
/* ==UserStyle==
@name           Microsoft Copilot responsive + customizations
@version        1.0.0
@description    Microsoft Copilot website is more suitable for wide screens.
@author         BreatFR (https://breat.fr)
@namespace      https://gitlab.com/breatfr
@homepageURL    https://gitlab.com/breatfr/microsoft-copilot
@supportURL     https://discord.gg/Q8KSHzdBxs
@license        AGPL-3.0-or-later; https://www.gnu.org/licenses/agpl-3.0.txt
@preprocessor   stylus

@var    checkbox    chatmode            "Chat mode"                 1
@var    text        fontsize            "Font size"                 1.2rem
@var    checkbox    hidecopilotpro      "Hide Copilot Pro"          1
@var    checkbox    hidedownloadapp     "Hide Download Application" 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("copilot.microsoft.com") {
/* =============================================
    Whole website
============================================= */
    /* Font size */
    .text-3xs,
    .text-base,
    .text-sm,
    p,
    span {
        font-size: fontsize;
        line-height: 1.5
    }
    /* Fix background for source number with bigger font size */
    .dark\\:bg-slate-750:is([data-theme=dark] *),
    .light\\:bg-slate-750:is([data-theme=light] *) {
        height: auto;
        padding: 0 .5em;
    }

    if widemode {
        [data-testid="composer"] > div:nth-of-type(2) > div,
        [data-testid="composer"] > div:nth-of-type(2) > div > div:nth-of-type(2) > div > div {
            max-width: 100%;
            width: 100%
        }
    }
}

@-moz-document url("https://copilot.microsoft.com/") {
/* ===================================================
    Discover page
=================================================== */
    if widemode {
        [data-testid="discover-page"] > div {
            max-width: 100%;
            width: 100%
        }
        [data-testid="discover-page"] > div > section > div {
            display: flex;
            flex-wrap: wrap;
            gap: 2em;
            justify-content: center;
        }
        [data-testid="discover-page"] > div > section > div > button {
            width: 30%;
        }
        [data-testid="discover-page"] > div > section > div > button > div {
            flex-direction: column;
        }
        [data-testid="discover-page"] > div > section > div > button > div > div {
            font-size: 1.5rem;
            font-variation-settings: "opsz" 40, "wght" 440;
            justify-content: center;
            line-height: 1.9375rem;
            letter-spacing: -.01em;
            padding-inline-end: 1rem;
            padding-bottom: 1.25rem;
        }
        [data-testid="discover-page"] > div > section > div > button > div > div > h2 {
            text-align: center;
        }
        [data-testid="discover-page"] > div > section > div > button > div > img {
            flex-shrink: 1;
            object-fit: cover;
            width: 100%
        }
    }
}

@-moz-document url-prefix("https://copilot.microsoft.com/chats/") {
/* ================================================================
    Chats
================================================================ */
    if chatmode {
        [data-content="ai-message"] {
            max-width: 80%;
        }
    }
    
    if hidecopilotpro {
        [data-testid="settings-menu"] > div > div:nth-of-type(1) {
            display: none;
        }
    }
    
    if hidedownloadapp {
        [data-testid="settings-menu"] > div > button[data-testid="promotion-button"],
        [data-testid="settings-menu"] > div > div:nth-of-type(4) {
            display: none;
        }
    }
    
    if widemode {
        [data-content="conversation"]{
            max-width: 100%;
            width: 100%
        }
        [data-testid="settings-menu"] > div > div:last-child {
            flex-wrap: nowrap;
            white-space: nowrap;
        }
    }
}