Responsive Discord by wac

/* ==UserStyle==
@name         Responsive Discord
@version      20220228.00.06
@namespace    userstyles.world/user/wac
@description  Makes Discord work with smaller screens. No hovering, just makes every sidebar skinny by removing almost all the text.
@author       wac
@license      GNU
==/UserStyle== */

@-moz-document domain("discord.com") {
@media only screen and (max-width: 650px) {
    :root {
        --channelbar-width: 64px;
    }
    /* Most of these are hidden because clicking on them takes you to a
    screen you either can't use or can't exit (usually both) */
    [aria-label="Send a gift"],
    [aria-label="Open GIF picker"],
    [aria-label="Open sticker picker"],
    [aria-label="Select emoji"],
    [aria-label="Click to copy username"] .usernameContainer-3PPkWq,
    [aria-label="Create Invite"],
    [aria-label="User Settings"],
    [aria-label="Create Invite"],
    [aria-label="Edit Channel"],
    [aria-label="Add Reaction"],
    [aria-label="Create Thread"],
    [aria-label="Create Channel"],
    [aria-label="Close DM"],
    [aria-label="Leave Group"],
    #message-actions-thread {
        display: none !important;
    }
    /* Make the channels/friends sidebar narrower */
    .sidebar-1tnWFu {
        width: var(--channelbar-width, 72px) !important;
        overflow-x: auto !important;
    }
    /* Hide the "Members" list */
    .membersWrap-3NUR2t {
        display: none;
    }
    /* Fixes image zoom issues where you can't exit the zoom. */
    .fullscreenOnMobile-ixj0e3 {
        position: static;
        min-height: 5rem;
    }
    /* Makes images and embeds horizontally scrollable, so they don't just cut off. */
    .messageAttachment-CZp8Iv, .grid-1aWVsE {
        max-width: calc(100vw - 72px - var(--channelbar-width) - 16px - 12px);
        /* In order: screen width, server sidebar, channels sidebar, right padding, fix*/
        overflow: auto;
    }
    /* Quick fix for some popouts */
    .layerContainer-2v_Sit {
        overflow-x: auto;
    }
    /* Hide the text that says "Direct Messages" because you only need the "Add DM" button, really */
    .headerText-1qIDDT {
        display: none !important;
    }
    /* Center the "Add DM" button (the plus sign) */
    .privateChannelsHeaderContainer-1UWASm.container-q97qHp {
        justify-content: center;
    }
    /* Put the user profile and the "Settings" gear in a column. Center the avatar */
    [aria-label="User area"] .container-YkUktl,
    [aria-label="User area"] .container-YkUktl .flex-2S1XBF {
        flex-direction: column;
        height: fit-content;
    }
    [aria-label="Set Status"] {
        margin-right: 0;
        margin-top: 8px;
    }
    /* Hide the "Hashtag" and arrows */
    [aria-label="Text"],
    [aria-label="Text (NSFW)"],
    [aria-label="Text (Limited)"],
    .arrow-2HswgU,
    .headerChildren-2qV9P8 {
        display: none;
    }
    /* Removes excessive padding */
    .compact-2Nkcau .contents-2MsGLg {
        margin-left: 0;
        padding-left: 0;
    }
    .message-2CShn3 {
        padding-right: 0 !important;
    }
    .compact-2Nkcau .contents-2MsGLg {
        text-indent: 0;
    }
    [aria-roledescription="Message"] {
        padding-left: 1rem !important;
    }
    .content-1gYQeQ{
        /* Text channels */
        padding: 0;
        padding-left: 2px;
    }
    .wrapper-1S43wv {
        /* section headings */
        padding: 0;
        padding-left: 10px;
    }
    [aria-label="Upload a file or send invites"] {
        /* File attachment button */
        padding: 0 4px;
    }
    /* Hides the less important timestamps */
    .timestampVisibleOnHover-9PEuZS,
    .cozy-VmLDNB .timestamp-p1Df1m.alt-1dvXnH {
        display: none;
    }
    /* Hides avatars in messages (Cozy mode only) */
    .avatar-2e8lTP {
        display: none;
    }
    /* Fixes the "Events" display (prevents it from wrapping) */
    .name-28HaxV {
        height: 20px; /* value from line-height */
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    /* Hides the "Create Thread" screen */
    .container-3XgAHv {
        display: none;
    }
    /* Moves upload file button to the right */
    .inner-NQg18Y {
        flex-direction: row-reverse;
    }
}
}