Incorrect alignment of "Viewed" checkbox for long (wrapped) file names #10372

New Issue

GiteaMirror · 2025-11-02T09:05:30-06:00

GiteaMirror commented

2025-11-02 09:05:30 -06:00

Originally created by @jpraet on GitHub (Mar 2, 2023).

Description

For files with long (line-wrapped) filenames, the "Viewed" checkbox is misaligned.

Screenshots

reproduced on try.gitea.io:

Gitea Version

1.18.5

Can you reproduce the bug on the Gitea demo site?

Yes

Operating System

Windows

Browser Version

Firefox 102.8.0.esr

Originally created by @jpraet on GitHub (Mar 2, 2023). ### Description For files with long (line-wrapped) filenames, the "Viewed" checkbox is misaligned. ### Screenshots ![image](https://user-images.githubusercontent.com/2212615/222460308-4515a11c-30e2-4b79-897c-0c84050dfcb2.png) reproduced on [try.gitea.io](https://try.gitea.io/jpraet-org/test_rep/pulls/1/files): ![image](https://user-images.githubusercontent.com/2212615/222462128-14acb5f0-6f32-43c8-a3a8-ff5d83ce75bc.png) ### Gitea Version 1.18.5 ### Can you reproduce the bug on the Gitea demo site? Yes ### Operating System Windows ### Browser Version Firefox 102.8.0.esr

GiteaMirror added the topic/ui type/bug labels 2025-11-02 09:05:30 -06:00

GiteaMirror closed this issue

2025-11-02 09:05:30 -06:00

GiteaMirror commented

2025-11-02 09:05:31 -06:00

@delvh commented on GitHub (Mar 2, 2023):

Looks less like the Viewed checkbox is broken, and more like that whole button group mysteriously gets shifted.
I think these buttons should always be at the same x position.

@delvh commented on GitHub (Mar 2, 2023): Looks less like the `Viewed` checkbox is broken, and more like that whole button group mysteriously gets shifted. I think these buttons should always be at the same x position.

GiteaMirror commented

2025-11-02 09:05:31 -06:00

@silverwind commented on GitHub (Mar 2, 2023):

Could probably be fixed by moving the .diff-file-header-actions into the same flexbox with the filename.

@silverwind commented on GitHub (Mar 2, 2023): Could probably be fixed by moving the `.diff-file-header-actions` into the same flexbox with the filename.

GiteaMirror commented

2025-11-02 09:05:31 -06:00

@HesterG commented on GitHub (Mar 3, 2023):

Besides the misalignment, maybe it is better to add text-overflow: ellipsis; to the long text, so the file name line won't be in two or more lines?

@HesterG commented on GitHub (Mar 3, 2023): Besides the misalignment, maybe it is better to add `text-overflow: ellipsis;` to the long text, so the file name line won't be in two or more lines?

GiteaMirror commented

2025-11-02 09:05:32 -06:00

@jpraet commented on GitHub (Mar 3, 2023):

Related, this "Changed since your last review" on 3 lines also looks kind of weird:

@jpraet commented on GitHub (Mar 3, 2023): Related, this "Changed since your last review" on 3 lines also looks kind of weird: ![image](https://user-images.githubusercontent.com/2212615/222673307-57f7146c-5f30-4c2d-8949-96fa9b6bf7a4.png)

GiteaMirror commented

2025-11-02 09:05:32 -06:00

@silverwind commented on GitHub (Mar 3, 2023):

Besides the misalignment, maybe it is better to add text-overflow: ellipsis; to the long text, so the file name line won't be in two or more lines?

I think two lines is still an okay display. There is -webkit-line-clap which all major browsers support where we could limit the line number to two and in addition add the ellipsis so it will wrap to two lines and add ellipsis on the end of the second line.

@silverwind commented on GitHub (Mar 3, 2023): > Besides the misalignment, maybe it is better to add `text-overflow: ellipsis;` to the long text, so the file name line won't be in two or more lines? I think two lines is still an okay display. There is [-webkit-line-clap](https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-line-clamp) which all major browsers support where we could limit the line number to two and in addition add the ellipsis so it will wrap to two lines and add ellipsis on the end of the second line.

GiteaMirror commented

2025-11-02 09:05:32 -06:00

@jpraet commented on GitHub (Mar 4, 2023):

#22844 (Always go full width in PR view) would not fix this, but would reduce the likelihood of it happening.
Perhaps it can be backported to 1.18?

@jpraet commented on GitHub (Mar 4, 2023): #22844 (Always go full width in PR view) would not fix this, but would reduce the likelihood of it happening. Perhaps it can be backported to 1.18?

GiteaMirror commented

2025-11-02 09:05:32 -06:00

@silverwind commented on GitHub (Mar 4, 2023):

I have no personal interest for backporting into 1.18 at this point as 1.19 isn't too far off.

@silverwind commented on GitHub (Mar 4, 2023): I have no personal interest for backporting into 1.18 at this point as 1.19 isn't too far off.

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#10372