Difficulty Header Separated From Info Header

[campbell-godfrey]

The screenshot depicts the headers separated vertically instead of connected. See screenshot below for reference. I believe that this bug is replicable for anyone on Safari.
I am using: MacBook Pro, Sonoma 14.2.1, Safari

[otobot1]

A friend of mine with a mac did some poking. They weren't able to quite figure out what the issue is exactly, but they think it has to do with the use of position: sticky on the table header and tab container. From our googling, safari seems to handle sticky slightly differently from other browsers leading to occasional weird bugs. Without other leads (or our own macs), I think it's worth pursuing.

@ShouvikGhosh2048 do you think the code could be altered to avoid sticky? That might make the problem go away. I haven't played much with the other position values myself.

[ShouvikGhosh2048]

If we don't need to keep the headers at the top while scrolling, we can use position: static.

If we need to keep them at the top, then I think we can set the scroll area as position: relative and the headers as position: absolute (we'll also need to add padding at the top to move the rows down)? Does position: absolute/relative work on Safari?

[otobot1]

We do need to keep them at the top I think. As far as I can tell, it seems to just be sticky that has issues in safari.

[ShouvikGhosh2048]

I tried using position: absolute but couldn't make it work. What happens when you scroll down - does the table header move up?

[otobot1]

I tried using position: absolute but couldn't make it work. What happens when you scroll down - does the table header move up?

Ideally it should behave like it does now: the table header just stays with the top of the table. If the whole table area scrolls up, the table header goes up with it.

[otobot1]

If we are able to at least cover up the rows so they don't show in the gap between the table header and the difficulty tabs, that is good enough for v0.1.1. Actually dealing with the gap can be left as a follow-up issue if this winds up being our last v0.1.1 issue.

[otobot1]

My plan for v0.1.1 is to simply add a "known issues" section to the FAQ. Once that's done, this issue can be removed from the v0.1.1 milestone. Edit: #817 has been merged.