resolve issue with sort icons on admin/users and admin/runners

[jladbrook]

Fixes #24327 to avoid the sort icon changing the table header over multiple lines and adds missing sort icons on the runners page.

Fixed User Admin Page

Updated Runners Page

[silverwind]

Not directly related or requested, but I feel the icon should be vertically centered with the text:

[silverwind]

It seems #24370 had adressed some of the same issues as this PR. @wxiaoguang which parts of this PR do we still need?

[silverwind]

Looking at this admin user table, I can't help but feel that there are too many columns to fit in the available space, so either remove some columns or increase page width, imho. Maybe the checkbox-only column titles could be reduced to svg icons only to save space.

[wxiaoguang]

which parts of this PR do we still need?

If I understand correctly, this PR is mainly for the "sort" icons/logic?

[silverwind]

I get the same impression, so the CSS changes should potentially be backed out now.

[denyskon]

@jladbrook Looks like the first issue is resolved now (193dce5). Could you refresh your PR and only keep the fix for the runners page?

[jladbrook]

@denyskon that's done

[wxiaoguang]

Has the alignment problem #24360 (comment) been resolved?

If yes, please update the screenshot.

If no and need help, feel free to ask ~~

---

Update: IMO it doesn't need to be considered as "bug" or need to be backported.

[jladbrook]

Has the alignment problem #24360 (comment) been resolved?

If yes, please update the screenshot.

If no and need help, feel free to ask ~~

Update: IMO it doesn't need to be considered as "bug" or need to be backported.

Hi @wxiaoguang that wasn't included in the PR previously. I've had a quick look and updated to include a change to achieve:

This was a minor change to base.css - if there is a better way to achieve please let me know and I'll update accordingly.

[wxiaoguang]

Thank you! It looks good to me now (and I will take a test later 😄 )

---

Update: the new margin affects other UI. I will propose a fix soon.

[jladbrook]

Update: the new margin affects other UI. I will propose a fix soon.

Oh sorry I did check around in my changed version and didn't notice the change - what page(s) was affected?

[wxiaoguang]

That's really strange. According to my test, without margin-top: 0.25rem; , the old UI just looks fine.

But when the margin-top: 0.25rem; is added, it makes the UI misalign.

I don't know why your first screenshot shows that the icon misalignment. Maybe it's better to remove the margin-top: 0.25rem; and leave the problem to the future.

---

The old UI on my side

The new UI with margin-top: 0.25rem;

[jladbrook]

Strange - I'm using a fairly recent version of Chrome, although it shows the same in Brave and FireFox. I assume it's something to do with my install. I've reverted the change.

Thanks for the feedback.

[wxiaoguang]

Strange - I'm using a fairly recent version of Chrome, although it shows the same in Brave and FireFox. I assume it's something to do with my install.

Maybe it's related to your OS & font.

Indeed, the legacy "margin / vertical-align" layout is not ideal and has various problems. Ideally the layout should be refactored to a new approach later -- it will be another story.

[denyskon]

@wxiaoguang Why are you against a backport? This fix adds the missing sort icon to the runners table and improves sorting. I think this isn't anything that has the potential to break something

[wxiaoguang]

IMO each backport comes with risk: even if there is no conflict, the backported code might not work, and no one would really test the backport.

So, if a fixed problem is not very important (eg: no matter with or without an "icon", the "list" still works), I would prefer to not backport.

But that's just my opinion, free free to backport if you think it is important.