Responsive Steam Chat by lightwo

/* ==UserStyle==
@name           Responsive Steam Chat
@namespace      steamcommunity.com/chat
@version        1.4
@description    Makes Steam Chat responsive.
@author         lightwo
@homepageURL    https://lightwo.net
==/UserStyle== */

@-moz-document url-prefix("https://steamcommunity.com/chat") {
@media all and (max-width: 960px) {

    /* Steam header */
    .main_SteamPageHeader_3NLSM {
        display: none;
    }
    
    
    /* Settings modal (could be better) */
    .ModalPosition_Content {
        margin: 0;
        max-width: unset !important;
    }
    
    .pagedsettings_PagedSettingsDialog_2sssI {
        flex-direction: column;
    }
    
    .pagedsettings_PagedSettingsDialog_PageListColumn_2kwFF {
        padding-top: 1em;
        max-width: unset !important;
    }
    
    .pagedsettings_PagedSettingsDialog_PageList_18QCu {
        padding-bottom: 1em;
    }
    
    .pagedsettings_PagedSettingsDialog_PageContent_CFTLX {
        padding: 1em 0.2em;
    }
    
    .DialogContentTransition {
        max-width: 100%;
        overflow-y: auto;
    }


    /* Open Friends List button
     * Made as small as possible to fit only the icon */
    .chatTabOpenFriendsList {
        justify-content: left;
        overflow-x: hidden;
        width: 20px;
        height: 20px;
        padding: 0;
    }


    /* Chat tabs */
    :not(.ChatTabContextMenuItem) > .chattabs_ChatTab_2Vrcp {
        max-width: 30vw;
    }


    /* Chat entry (text box) */
    .chatEntry {
        padding: 0 !important;
        margin: 5px 0;
    }

    .chatentry_chatEntryControls_3Ule3 {
        margin-bottom: 0 !important;
    }

    .chatentry_chatSubmitButton_RVIs8 {
        display: none;
    }

    .chatentry_chatEntryActionsGroup_2WfNo {
        margin-left: 0;
    }

    .chatentry_chatEntryActionsContainer_W0Ohk {
        margin-bottom: 0 !important;
    }

    .chatentry_chatEntryActionsGroup_2WfNo {
        padding: 0;
    }

    .ChatMessageEntryVoice {
        margin-left: 0;
    }


    /* Emoticon box */
    .contextmenu_contextMenu_PP7LM:has(.addonpicker_Picker_tid_O) {
        bottom: 3em !important;
        left: 0 !important;
        max-height: unset !important;
        padding: 0;
    }

    .addonpicker_Content_dUQIH {
        padding: 0;
        max-width: 100vw;
    }

    .addonpicker_Tabs_1yVkT,
    .addonpicker_FilterInputContainer_EuFeP {
        box-sizing: content-box !important;
        max-width: 100vw;
        padding: 6px 0;
    }
    
    /* "Not a friend" warning */
    .NotAFriendBody {
        flex-direction: column;
    }

}
    
@media all and (max-width: 400px) {
    
    /* Hide friend names in top list */
    :not(.ChatTabContextMenuItem)
        > .chattabs_ChatTab_2Vrcp .chattabs_ChatTabContent_Friend_2ZiZ7 .personanameandstatus_compactView_3bbRZ {
        display: none;
    }
    
    /* Chat tabs; make items as narrow as possible */
    :not(.ChatTabContextMenuItem) > .chattabs_ChatTab_2Vrcp {
        max-width: 60px;
    }
    
}
}