Fix sidebar widening with oversized content

[melroy89]

Wide tables in community descriptions stretched the sidebar because its grid item retained an automatic minimum width. Setting min-width: 0 lets the sidebar shrink while tables scroll within their existing wrapper.

Root-cause is this donation button in the description on https://kbin.melroy.org/m/piracy@lemmy.dbzer0.com:

Before:

After:

[blued-gear]

The min-width is a common problem with grid items. That's why I planned to introduce a helper CSS class grid-minw-0 which is supposed to be applied to the grid and the rule matches all its immediate items.

As you already created this PR, do you want to implement that?

[melroy89]

The min-width is a common problem with grid items. That's why I planned to introduce a helper CSS class grid-minw-0 which is supposed to be applied to the grid and the rule matches all its immediate items.

As you already created this PR, do you want to implement that?

TO better match a commonly used name, like tailwind, I called it .grid-min-w-0 if you do not mind. This also helps to easily onboard new devs as well.

I also want to add more classes now, like: .flex-col, .items-center, .justify-between various .gap-* classes and also just a.min-w-0 class that directly applies to the element itself, instead of children. As well as .shrink-0, .flex-1 and maybe even .grid-cols-2 for two equal column that can shrink.

[melroy89]

Optional follow PR with more CSS helpers that use the same naming convention is here: #2247