Make table headers stick to the top of the page when scrolling

[bpfoley]

This helps when trying to scroll through, eg, large project lists and wanting to keep track of which column is which.

Tested with:

• rounds pages
• search results
• my projects
• release queues
• task center

[bpfoley]

This can be tested on https://www.pgdp.org/~bfoley/c.branch/round-sticky-headers/

It relies on box: shadow, for which support was added in:

• Chrome: 10
• Firefox: 4
• Microsoft Edge: 79
• Opera: 10.5
• Safari: 5.1

And position: sticky, for which reliable support was added in:

• Chrome: 56
• Firefox: 32
• Opera: 42
• Microsoft Edge: 79
• Safari (macOS): 9

All of these are older/equal to our minimal supported browser versions listed in SETUP/INSTALL.md

[cpeel]

I love this! And also given past experience, I'm wary of rolling this out without at least soliciting some user input. I'm curious what @srjfoo thinks.

[windymilla]

I had a quick look when I saw the PR come in - I really like it. I tried it on the Search results page. It worked well in my browser (Windows/Chrome) regardless of window width.

On my phone (Android/Chrome) it only works perfectly if I zoom out enough that the whole table width fits on the screen. Otherwise, the header scrolls off the top as you scroll through the table, and it appears it hasn't worked at all (but is as good as without this fix), but then if you scroll back the other way (i.e. to read earlier rows in the table) the header reappears and sticks to the top.

Not sure if that's fixable, but even without fixing it, I certainly wouldn't argue against doing this for that reason, because as mentioned, even when it's "not working", it's as good as it would be without the PR. Just mentioning it here, in case it's helpful to @bpfoley, or for anyone doing testing that it might be worth narrowing your window then scrolling a table up & down.

[bpfoley]

I had a quick look when I saw the PR come in - I really like it. I tried it on the Search results page. It worked well in my browser (Windows/Chrome) regardless of window width.

On my phone (Android/Chrome) it only works perfectly if I zoom out enough that the whole table width fits on the screen. Otherwise, the header scrolls off the top as you scroll through the table, and it appears it hasn't worked at all (but is as good as without this fix), but then if you scroll back the other way (i.e. to read earlier rows in the table) the header reappears and sticks to the top.

Not sure if that's fixable, but even without fixing it, I certainly wouldn't argue against doing this for that reason, because as mentioned, even when it's "not working", it's as good as it would be without the PR. Just mentioning it here, in case it's helpful to @bpfoley, or for anyone doing testing that it might be worth narrowing your window then scrolling a table up & down.

Thanks. That's valuable feedback. I don't see that behavior in Safari on iOS 26, although admittedly the behavior there is somewhat odd (and maybe even worse?) because of the way the address bar is implemented in Safari. The table header sticks to the top of the page OK (and 'unsticks' when you scroll back up the page), but there's some faded page content that appears above the header and behind the address bar.

[srjfoo]

I love this! And also given past experience, I'm wary of rolling this out without at least soliciting some user input. I'm curious what @srjfoo thinks.

I love it, too!

I see the same thing on an android phone that Nigel sees on his -- can't test on an iPhone. It worked just fine on my iPad, and it works just fine on narrow screens on the computer.

It also works nicely where there are multiple tables on a page.

[cpeel]

I'm going to go with forgiveness over permission from the community here because this seems overall a big improvement and we'll deal with feedback when it comes in.