Several fixes for mobile UI

[denyskon]

Resolves #25622

Screenshots

[puni9869]

Check for avatar.

[denyskon]

This is intentional, I disabled the avatar on mobile to have enough space for the editor.

[puni9869]

@wxiaoguang cc//

[denyskon]

It's Sunday, no need to tag people 😆

[wxiaoguang]

There are other buttons <button class="btn interact-bg gt-p-3..., why this "dropdown btn" needs special styles (eg: vertical-align: bottom;) ?

[denyskon]

The dropdown class sets the vertical-align property for the dropdown itself, which resulted in misalignment of the download icon

[wxiaoguang]

That's also related to the side effect of global .svg { vertical-align: ... }

@silverwind I would suggest to make .svg { vertical-align: middle; } by default. What's the side effect of it?

[wxiaoguang]

Otherwise, maybe we need to make the "ui button" and "ui dropdown" (even "flex-text....") have the same "vertical-align:" as ".svg" (need to check the demo/examples on devtest page)

[denyskon]

It is not svg but the button itself. I now created a combined class for this button row with vertical-align: middle for every single button.

[wxiaoguang]

I tried on try.gitea.io, it seems that the vertical-align on ".svg" is directly related.

Since it's a longstanding problem, I guess it doesn't block

[denyskon]

Did you spot this kind of issue in other places? If so, I could take a look in another PR

[silverwind]

That's also related to the side effect of global .svg { vertical-align: ... }

@silverwind I would suggest to make .svg { vertical-align: middle; } by default. What's the side effect of it?

Pretty sure this would cause regressions. FWIW, GitHub has vertical-align: text-bottom globally on all octicons. I guess you can never make it right for all situations.

[wxiaoguang]

Could you try this? fine tune denyskon#1

• "middle aligned" is good enough for "vertical-align: middle;"
• Make the "all" checkbox smaller, and remove the unnecessary short "id"
• Use "gap" for the form elements instead of "margin", and add comments
• Remove &nbsp layout

[silverwind]

This is intentional, I disabled the avatar on mobile to have enough space for the editor.

Can you also remve the triangle pointing to the nonexistant avatar when you hide the avatar?

[denyskon]

@wxiaoguang Thank you, merged your fixes - looks good 👍

[denyskon]

Added white-space: nowrap; for admin table headers.

Before:

After:

I'd consider a border between header elements, but we don't have it in other tables too.

[silverwind]

I'd consider a border between header elements, but we don't have it in other tables too.

Regular table cell padding should still be in effect at least.

[denyskon]

I'd consider a border between header elements, but we don't have it in other tables too.

Regular table cell padding should still be in effect at least.

I didn't change anything there

[denyskon]

@silverwind Is anything missing here according to you?

[GiteaBot]

I was unable to create a backport for 1.20. @denyskon, please send one manually. 🍵

go run ./contrib/backport 25634
...  // fix git conflicts if any
go run ./contrib/backport --continue