Mastodon FE Userstyle

16.07.2020

Screenshot of Mastodon FE userstyle. All columns are resized to remove the need for a horizontal scrollbar.

For the last few years I have been maintaining a “variable-width” edit to the Mastodon front-end (including masto-fe/glitch-soc front-end) in the form of a userstyles script, which can be loaded by the Firefox/Chrome extension Stylus. While I have it on their (shitty) website, I’ve decided to add it here so that I don’t have to bother with their awful website anymore.

Installation instructions are slightly involved if you don’t use the userstyles website:

All should be good!

I mainly use it for snugging the columns to my 1280x1024 monitor without having a horizontal scrollbar, but should help use up extra space on wider monitors. On my 1080p monitor, it works fine with 4-5 columns before the default front-end sizes kick in.

/* Adjusts to remove horizontal scrollbar
   in smaller window size (e.g. 1280x1024) */
@media (min-width: 800px) {
    .wide .drawer {
        min-width: 280px;
    }
}

/* Adjusts to use up space in larger
   window size (e.g. 1920x1080)      */
@media (min-width: 1024px) {
    .columns-area>div{
        width: 25%;
        max-width: 25%;
    }
    .wide .drawer,
    .wide .column,
    .columns-area>div>.column,
    .columns-area>div>.mastodon-column-container>.column,
    .wide .columns-area:not(.columns-area--mobile) .column {
        max-width: 100%;
        flex: auto;
    }
}

Comments via Fediverse post