Bottom text truncated on input text

[kdumontnu]

• Gitea version (or commit ref): 1.14.0
• Git version: N/A
• Operating system: Windows, Chrome
• Can you reproduce the bug at https://try.gitea.io:
  • Yes: https://try.gitea.io/sdkjfhsadf/flectra2
  • No
• Log gist:

Description

Bottom text truncated for input text.

For some reason the line height in semantic UI is set to line-height: 1.21428571em. This results in hanging characters (such as g) to be truncated by padding.

Seems like this could be fixed by increasing the line-height in semantic.css, but not sure if this the appropriate fix.

Screenshots

[kdumontnu]

This might be a Chrome bug. It seems to treat line-height values very inconsistently and this renders fine in Firefox.

[kdumontnu]

I recreated this in a simple gist. It's proving really difficult for me to follow the calculation Chrome is using for the box-height.

https://gist.github.com/kdumontnu/a6f7629bbe460b0190a97ad60209899f

It should show the following in Chrome on Windows:

and opened a Chromium bug. I believe this is partially an issue with Chrome, but also the CSS font classes used in gitea are a bit strange to me. For instance .ui.small.input uses font-size: 0.92857143em; and #repo-clone-url uses font-size: 1.2em;. These styles "stack" and the final height is 0.92857143em x 1.2em;, which means the font size of this and other small elements are inconsistent depending on their parents. I suspect both were intended as rem instead of em to have all font sizes relative to the root.

Further, it defaults to the system font, which seems like it opens up a lot of doors for inconsistent behavior (and certainly contributing to this issue). I would imagine serving a default font would provide a more consistent user experience.

I'll leave this issue open, but this is a bit outside of my expertise and I can't really take on a refactor of this scope.

Edit: A simple (intermediate) fix to resolve this would be adding:

line-height: 1.4;

to #repo-clone-url in _repository.less
to semantic.css