Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
jpraet opened this issue Mar 2, 2023 · 7 comments · Fixed by #23321
Closed

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

jpraet opened this issue Mar 2, 2023 · 7 comments · Fixed by #23321
Labels
topic/ui Change the appearance of the Gitea UI type/bug

Comments

@jpraet
Copy link
Member

jpraet commented Mar 2, 2023

Description

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

Screenshots

image

reproduced on try.gitea.io:

image

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

@jpraet jpraet added type/bug topic/ui Change the appearance of the Gitea UI labels Mar 2, 2023
@delvh
Copy link
Member

delvh commented 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.

@silverwind
Copy link
Member

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

@HesterG
Copy link
Contributor

HesterG commented 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?

@jpraet
Copy link
Member Author

jpraet commented Mar 3, 2023

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

image

@silverwind
Copy link
Member

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.

@jpraet
Copy link
Member Author

jpraet commented 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?

@silverwind
Copy link
Member

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

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
topic/ui Change the appearance of the Gitea UI type/bug
Projects
None yet
Development

Successfully merging a pull request may close this issue.

4 participants