Side bar gets squished in prescense of long text

Author Topic
pepyo

Posted 2022-09-01 14:25:00

Just today, it looks like someone broke the site's sidebar by including one continuous and long word that the site is unable to break. While funny, this could become a problem for usability since it seems like just the one post could make the site look wonky for everybody, not to mention it also seems like posts can stay on status.cafe's front page for like, 9 months if I have that right.

Image: https://i.imgur.com/yDEJ8oA.png

lucidiot

Posted 2022-09-02 04:32:24

This can be fixed by just adding this CSS:

.status-content {
  word-break: break-word;
}

You can also totally cause this to occur on this forum!

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

pepyo

Posted 2022-09-02 04:43:35

oh naur...

username

Posted 2022-09-02 23:24:25

Speaking about posts staying on the front page for a long time, I think it's a good idea to add pagination.

skykristal

Posted 2022-09-03 17:37:04

oh yea I noticed this too. it´s even more squished for me lol. Only one emote row. (because smaller screen ig). Well.. I´ll just fix that using my custom stylus style for this site in the meantime. :P

ngoomie

Posted 2023-07-08 07:47:19

Seems to be happening again because of this person's latest status: https://status.cafe/users/louiestevens

(not to single them in particular out to attempt to get them in trouble or anything weird like that, I just figured it'd be good to point to a specific cause of this happening for debugging purposes)

lucidiot

Posted 2023-07-15 19:11:10

Stylus users: create a new style then hit the Import button. This should open a big text box where you can paste this:

@-moz-document domain("status.cafe") {
.status-content {
    word-break: break-word;
}
}

@-moz-document domain("forum.status.cafe") {
.posted + div {
    word-break: break-word;
}
}

This fixes the issues on both status.cafe and this forum.

Note that there is a different import button in Stylus which opens a dialog to look for a JSON file. That's the wrong button, that one is to backup/restore all of your styles at once! Create a new style first, then you'll get the right button. And if you just learnt about Stylus from this post, be careful and do not install Stylish, an extension that will steal all your data because we just can't have nice things.