Incorrect wrapping on PR comments with long paths #7506

New Issue

GiteaMirror · 2025-11-02T07:27:50-06:00

GiteaMirror commented

2025-11-02 07:27:50 -06:00

Originally created by @parnic-sks on GitHub (Jun 25, 2021).

Gitea version (or commit ref): 1.14.3
Git version: 2.25.1
Operating system: Ubuntu Linux 20.04.2
Built Gitea myself, running from systemd (my own service script) on an AWS x86_64 box
Database (use [x]):
- PostgreSQL
- MySQL
- MSSQL
- SQLite
Can you reproduce the bug at https://try.gitea.io:
- Yes: https://try.gitea.io/parnic-sks/long-paths-test-2/pulls/1
- No

Description

Comments on files with long paths will not wrap the file name header on a PR if there's no easily-available word boundary to wrap on. This causes the "Outdated" badge and/or "Show Resolved"/"Hide Resolved" links to either overlap other UI elements or be completely obscured, rendering them un-clickable. Note: this is not a contrived example, we ran into this on our project.

Example of a long path with available word boundaries: https://try.gitea.io/parnic-sks/long-paths-test/pulls/1
Example of a long path that doesn't currently wrap: https://try.gitea.io/parnic-sks/long-paths-test-2/pulls/1

Screenshots

Working (valid word boundaries):

Not working (no valid word boundaries):

Potential fix

Setting word-break: break-word; CSS on one of the segment bits used for PR comment filename headers is one possible way to fix the issue:

Originally created by @parnic-sks on GitHub (Jun 25, 2021). - Gitea version (or commit ref): 1.14.3 - Git version: 2.25.1 - Operating system: Ubuntu Linux 20.04.2 - Built Gitea myself, running from systemd (my own service script) on an AWS x86_64 box - Database (use `[x]`): - [x] PostgreSQL - [ ] MySQL - [ ] MSSQL - [ ] SQLite - Can you reproduce the bug at https://try.gitea.io: - [x] Yes: https://try.gitea.io/parnic-sks/long-paths-test-2/pulls/1 - [ ] No ## Description Comments on files with long paths will not wrap the file name header on a PR if there's no easily-available word boundary to wrap on. This causes the "Outdated" badge and/or "Show Resolved"/"Hide Resolved" links to either overlap other UI elements or be completely obscured, rendering them un-clickable. Note: this is not a contrived example, we ran into this on our project. Example of a long path with available word boundaries: https://try.gitea.io/parnic-sks/long-paths-test/pulls/1 Example of a long path that doesn't currently wrap: https://try.gitea.io/parnic-sks/long-paths-test-2/pulls/1 ## Screenshots Working (valid word boundaries): ![image](https://user-images.githubusercontent.com/62021255/123448122-307e4f80-d5a0-11eb-8801-170961f8a3a3.png) Not working (no valid word boundaries): ![image](https://user-images.githubusercontent.com/62021255/123448199-45f37980-d5a0-11eb-9be8-56854af6496b.png) ## Potential fix Setting `word-break: break-word;` CSS on one of the `segment` bits used for PR comment filename headers is one possible way to fix the issue: ![image](https://user-images.githubusercontent.com/62021255/123448527-a2569900-d5a0-11eb-9dba-a869fbc76947.png)

GiteaMirror added the topic/ui label 2025-11-02 07:27:50 -06:00

GiteaMirror closed this issue

2025-11-02 07:27:51 -06:00

GiteaMirror commented

2025-11-02 07:27:52 -06:00

@parnic-sks commented on GitHub (Jun 28, 2021):

This fix doesn't seem to have taken. The class is now applied at https://try.gitea.io/parnic-sks/long-paths-test-2/pulls/1, but the text still doesn't break.

@parnic-sks commented on GitHub (Jun 28, 2021): ![image](https://user-images.githubusercontent.com/62021255/123645035-93aff200-d7eb-11eb-8641-b8de10f52cb5.png) This fix doesn't seem to have taken. The class is now applied at https://try.gitea.io/parnic-sks/long-paths-test-2/pulls/1, but the text still doesn't break.

GiteaMirror commented

2025-11-02 07:27:52 -06:00

@parnic-sks commented on GitHub (Jun 28, 2021):

Also it looks like the Outdated badge will need word-break: normal applied if the parent div has its word-break set to break-word.

@parnic-sks commented on GitHub (Jun 28, 2021): ![image](https://user-images.githubusercontent.com/62021255/123647700-ed192080-d7ed-11eb-9853-03730d5b2357.png) Also it looks like the `Outdated` badge will need `word-break: normal` applied if the parent div has its `word-break` set to `break-word`.

GiteaMirror commented

2025-11-02 07:27:52 -06:00

@6543 commented on GitHub (Jun 29, 2021):

#16272 did only fix firefox but in chrome it's still here :X

@6543 commented on GitHub (Jun 29, 2021): #16272 did only fix firefox but in chrome it's still here :X

Sign in to join this conversation.

Branches Tags

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: github-starred/gitea#7506