Remove or Replace css `break-all` in small areas

[SimonPistache]

Description

Hello!

On the sidebar of an issue, the Milestones (and Projects) section can be long enough to fit on multiples lines:

However, the text is wrapped immediately, due to the word-break: break-all; property. I suggest to set it to a more gentle break like word-break: break-word; or just use the default behaviour:

We could also rely on the text-overflow: ellipsis; CSS rule to truncate the text and leave it on 1 line, though it's a little more tricky to implement it with the flexbox.

What do you think?

Gitea Version

1.22.0

Can you reproduce the bug on the Gitea demo site?

Yes

Log Gist

No response

Screenshots

No response

Git Version

No response

Operating System

No response

How are you running Gitea?

Docker latest from DockerHub

Database

SQLite

[silverwind]

Should likely use overflow-wrap: anywhere instead of word-break: break-all there because the former does not break inside words unless it absolutely has to.

[silverwind]

#31637

[SimonPistache]

Organisations descriptions have that break anywhere as well:

tested on both my instance 1.22 and on 1.23.0+dev-322-g0bb4c1cde2

[SimonPistache]

Toying with the devtools:

.page-content.organization #org-info {
  /*! overflow-wrap:anywhere; */
  flex:1;
  /*! word-break:break-all; */
}

that fix the issues by letting the .markup overrules #org-info.

[silverwind]

I handled org description in #31637 as well. Not sure about overflow-wrap cases. All remaining cases of break-all are code rendering and there is it welcome I guess.