Fix alignment for commits on dashboard

[mrsdizzie]

Fix allignment issue between commit SHA and commit message

Old:

New:

[zeripath]

Hmm this seems to make the text jump for me here:

[zeripath]

doesn't appear to work

[mrsdizzie]

@zeripath hmm weird -- does the dashboard on gitea.com look ok to you? Right now for me everything (which is only mirror synching) looks broken like my first screenshot. This change makes them all look normal for me in every browser.

Do you see them as broken but this change doesn't fix it?

[zeripath]

No the gitea.com dashboard looks broken too.

Fiddling a little the issue might be that the SHA link isn't display: inline-block

[zeripath]

Sorry or rather that the text.truncate is display: inline-block

[CirnoT]

Does not work here either, it's broken with and without this PR, just in different direction. Changing it to -4px works for me but that's a rather poor hack that most likely depend on font too.

[mrsdizzie]

Weird, must be some combination of font/os that gives different results it looks totally fine in all 3 browsers on MacOs with this PR but I just tried in a windows vm and see the same thing as @zeripath .

The fact that its a negative margin makes me feel like its making up for something else that needs to be fixed, though unsetting display: inline-block makes it look mostly better, and causes margin top and bottom to just have no effect. WIll need to look into more

[silverwind]

Remove all hacky margins on img and span and set <li> to display: flex; align-items: center:

The flexbox makes the whitespace collapse so you'll need something like li > * + * {margin-left: .35rem} to restore it:

[silverwind]

Also, I think you can add small top/bottom margins to <li> so multiple messages are not stuffed together so tightly, e.g. .125rem on both sides.

[mrsdizzie]

@silverwind thanks, applied those changes and seems to work better in all places now

[zeripath]

[zeripath]

seems not unfortunately

[CirnoT]

Works for me @zeripath

[silverwind]

Works for me too:

[mrsdizzie]

@zeripath you use Ubuntu right? I set up a vm and think this is an issue with Liberation Mono font which was the font it chose with default settings

It seems to just size much different than others. Removing it from the mono font stack fixes it, but obviously a problem if that is going to be the default font selected for many users. Not really sure what would be a good way of working with that:

[silverwind]

If Liberation Mono is causing issues, maybe we want to move it after all other monospace fonts, right before monospace. Thought I'm not sure if any better suitable fonts are present by default on Linux systems but I think Consolas might be commonplace.

[mrsdizzie]

In this test for Ubuntu it falls back to 'monospace' when removing Liberation Mono which seems to then use DejaVu Sans Mono from the system which looks better imo. Not sure what other distributions have installed other than Liberation Mono but I can't imagine there is only one monospace font installed.

[silverwind]

Adding DejaVu Sans Mono before Liberation Mono sounds like a good idea, if it works better.

[silverwind]

That baseline change does move the hash and message 1px up for me, I think I prefer the previous center and fix the fonts.

[CirnoT]

Fix the fonts is not a proper solution; you can try manipulate list to look fine to you but in the end you can never be sure what user has installed and what browser will use. Aligning to baseline seems like the only option where you can be sure that different fonts will be aligned to each other visually.

[silverwind]

I'd say the behaviour in #11595 (comment) is a font/browser bug that should not require us to make specific workarounds for as these may bite us in the long run (after the font/browser is fixed).

[CirnoT]

Yes on Libertion Mono the text is around 1px too high compared to avatar, but that's because the font's baseline is off. My proposed changes do not workaround the font issue, they align items to their baseline. This looks off on Libertion Mono for same reason the original solution did, but at least it's less visible now. Other fonts look fine to me and text is aligned perfectly to avatar.

[CirnoT]

In the end, baseline is the only thing that is guaranteed to visually align two different font types and I consider it the proper solution long-term.

Here's better picture without rounded corners which might bend how its visually percepted.

[silverwind]

The alignment looks ok in those screenshots. What I don't quite get is how align-self: flex-end; on the <img> fixes the image. Care to explain?

[CirnoT]

Good question, I have no idea why it actually visually centers image.

[CirnoT]

Try with this and

        .push.news .content ul {
            line-height: 18px;

[CirnoT]

Suggested change

	align-self: flex-end;
	align-self: flex-start;

[CirnoT]

There does indeed seem to be some misalignment when zoomed out

The new proposed changes (flex-start and line-height) seem to eliminate it at the cost of putting the image slightly down when zoomed in (same as on GitHub), tho interestingly it still seems visually centered despite that.

[zeripath]

it's possibly font x-height differences between the monospace font and the sans-serif font used for the message.

The solution might simply be to stick the sha in side a rounded-box like we do elsewhere then the jarring font change would be less visible.

[CirnoT]

The new proposed changes seem to work rather well for me.
The zoom-in is on 500%.

Default font on Windows 10:

Liberation Mono:

---

For reference, GitHub:

[mrsdizzie]

@CirnoT applied those changes, looks ok to me on various systems/fonts

@zeripath I think one of my least favorite parts of Gitea UI is the SHA1 inside of a rounded box : ( I'd rather see those all eventually get replaced rather than add another one here. These changes seem to make it work and look as it is intended to look now

[mrsdizzie]

I think this should be backported to 1.12 -- I'm not sure exactly where but the bug this fixes seems like it was introduced somewhere in 1.12 (probably one of the larger timeline UI changes). I don't see it on 1.11

[zeripath]

Please send backport