Package description in pre tag might cause text go out of borders

[andy-nix]

Description

If you have markdown description with code block for (at least python) package in Gitea it might cause text go out of borders. See screenshot

Expected behaviour: description section has overflow-x: scroll style to show scroll bar if text is too long

Gitea Version

1.23.1

Can you reproduce the bug on the Gitea demo site?

Yes

Log Gist

No response

Screenshots

Git Version

No response

Operating System

No response

How are you running Gitea?

Official release pre-built binary

Database

None

[KN4CK3R]

@silverwind The screenshot shows overflow-y: auto added to the css class .code-block. Do you see any problems?

[silverwind]

I'd personally would rather have it wrap, e.g. overflow-wrap: anywhere because I strongly dislike horizontal scrollbars.

Ideally the decision to wrap such content and code in general should be a per-user setting, as I already mentioned in #34009.

[silverwind]

@KN4CK3R try with tw-break-anywhere class, it's a custom class for this specific purpose:

gitea/tailwind.config.js

Line 118 in 02e49a0

'.break-anywhere': {

[KN4CK3R]

Does not work here:

[wxiaoguang]

You also need something like white-space: pre-wrap;, see MDN

[silverwind]

The way this "code block" renders looks very strange (no border, no background, no copy button).

We should make this package description markup render like every other markup like in a README, then all issues will resolve themselves automatically.

[wxiaoguang]

Will be fixed by markup: improve code block readability and isolate copy button #34009