[ui] Bot pack descriptions wrap in the middle of words

[doinkythederp]

Page

https://discordlist.gg/pack/:id

Description

When bot packs have very long descriptions, words are wrapped onto to next line. However, this breaks up words, making them harder to read and stylistically unpleasant.

Preferred solution

The best way to fix this would be to not break words unless needed, and insert hyphens when breaking:

Here's what I changed to make this mockup:

- <h2 class="mt-3 text-base break-all whitespace-pre-line text-on-hero-800">
+ <h2 class="mt-3 text-base break-words whitespace-pre-line text-on-hero-800 hyphens-auto">

Tailwind doesn't have a hyphens-auto utility class by default, but you could try out this package or add the following CSS:

.hyphens-auto {
    -ms-hyphens: auto;
    -moz-hyphens: auto;
    -webkit-hyphens: auto;
    hyphens: auto;
}

What browsers are you seeing the problem on?

Chrome

Notify on issue updates

• [X] Yes

Discord username

doinkythederp#6523

[audn]

Hi, Thank you for the well-written issue!

Fixed 🎉

I will proceed to close the issue.

Thank you for contributing during beta!