User CSS to make Mastodon behave somewhat more like a native, desktop app. https://cybre.space/@ticky/100530005338444142

mastodon-desktop.user.css

.ui {
    flex-direction: row;
}

.tabs-bar {
    margin: 0;
    margin-bottom: 0;
    flex-direction: column;
    height: auto;
}

.tabs-bar__link {
    font-size: 16px;
    padding: .9em .55em .9em .8em;
    text-align: left;
    flex-grow: 0;
    border-bottom: none;
    border-right: .25em solid transparent;
}

.tabs-bar__link .fa {
    font-size: 1.5em;
    vertical-align: -0.14em;
}

.tabs-bar__link.active {
    border-bottom: none;
    border-right: .25em solid currentColor;
}

.floating-action-button {
    right: 0;
    left: 1.3125rem;
}

.tabs-bar__link[aria-label="Getting started"] {
    background-position-x: center;
}

.tabs-bar__link[aria-label="Getting started"]:before {
    display: none;
}

@media screen and (min-width: 600px) {
    .tabs-bar__link .fa {
        margin-right: .5em;
    }

    .tabs-bar__link span {
        margin-left: 0;
    }

    .tabs-bar__link[aria-label="Getting started"]:after {
        content: attr(aria-label);
    }
}

.scrollable {
    overflow-y: auto;
}

mastodon-desktop.user.js

// For all the local stylesheet link tags in the document
Array.from(document.querySelectorAll('link[rel="stylesheet"][href^="/"]'))
    .forEach(async (stylesheetLinkTag) => {
        // Download the stylesheet's contents
        const response = await fetch(stylesheetLinkTag.href);
        // Get the stylesheet as text
        const stylesheet = await response.text();

        // Create a new style element
        const styleTag = document.createElement('style');
        // Set its contents to the stylesheet but without any of the webkit scrollbar overrides in it
        styleTag.innerHTML = stylesheet.replace(/::?-webkit-scrollbar[^{]*{[^}]*}/g, '');

        // Replace the stylesheet link with the style tag
        stylesheetLinkTag.parentNode.replaceChild(styleTag, stylesheetLinkTag);
    });