/* Apply this customization only on smaller screens */
@media (max-width: 700px) {

    /* Hide unpinned inactive tabs */
    .tabbrowser-tab:not([pinned]):not([selected]) {
        visibility: hidden !important;
        min-width: 0 !important;
    }

    /* Expand unpinned active tab */
    .tabbrowser-tab:not([pinned])[selected] {
        min-width: 100vw !important;
    }

    /* Shorten tab content width so that tab number is more visible */
    .tabbrowser-tab[selected]:not(:hover,[pinned]) > .tab-stack > .tab-content {
        width: calc(100vw - 30px) !important;
    }

    /* Hide Newtab and New-tab buttons */
    #new-tab-button,
    #tabs-newtab-button {
        display: none !important;
    }

}