Mastodon: Allow resizing columns

Created on 6 Sep 2018  路  3Comments  路  Source: tootsuite/mastodon

My main issue with Mastodon's design is that the columns are too narrow, which makes the content look cramped and the thumbnails look too small.

Is it possible to let the user resize columns?

suggestion

Most helpful comment

This issue has come up time and again in some form or another, and rightfully so.
See: #5736, #5727, #5341, #3583, #1195, #1020, #820, #697, #499

@Gargron closed some of those, referencing #3207, which is related (in that it does influence how space is used) but doesn't solve the problems raised at all since it doesn't deal with the problem (a fixed column width).

The fix @Kjwon15 suggested also comes up in many variations within those discussions. But expecting someone to install tampermonkey or such just for mastodon is a horrible idea and sure to slow down adoption, when the default configuration has very low-hanging fruit in terms of UX improvement.
So please, @Gargron, don't close this as solved, because it is really not.

All 3 comments

Use this user-style:

// Pawoo style column expand
:not(#mastodon-timeline) > .column {
  @media screen and (min-width: 631px) {
    flex: 1 0 330px;
  }
}

Or modify it as you want.

This issue has come up time and again in some form or another, and rightfully so.
See: #5736, #5727, #5341, #3583, #1195, #1020, #820, #697, #499

@Gargron closed some of those, referencing #3207, which is related (in that it does influence how space is used) but doesn't solve the problems raised at all since it doesn't deal with the problem (a fixed column width).

The fix @Kjwon15 suggested also comes up in many variations within those discussions. But expecting someone to install tampermonkey or such just for mastodon is a horrible idea and sure to slow down adoption, when the default configuration has very low-hanging fruit in terms of UX improvement.
So please, @Gargron, don't close this as solved, because it is really not.

Just as an aside, the rule for something like Stylus would be:

/* https://github.com/tootsuite/mastodon/issues/8632 */
@media screen and (min-width: 631px) {
  :not(#mastodon-timeline) > .column {
    flex: 1 0 330px;
  }
}

(@Kjwon15's code above has the @media and :not rules inverted compared to how CSS expects them)

Was this page helpful?
0 / 5 - 0 ratings