Collator heading overlaps

[prayagd]

Describe the bug

On the collator dashboard i see side scroll and the collator heading overlaps other headings

Reproduction

Steps to reproduce the behavior:

1. Go to /collator on portal
2. Scroll left and right
3. You will see the collator heading overlaps over other heading

Expected behavior

There should be no overlap of the headings over each other and also no side scroll, ideally the user should be able to see the entire table without scrolling.

Screenshots

Desktop (please complete the following information):

• OS: iOS
• Browser both chrome[111.0.5563.64] and safari[16.1]

[prayagd]

cc @gonzamontiel

[gonzamontiel]

hey @prayagd, can you please check that after we merged #70 this is still happening?
For me it looks like this in staging:

If it still happens, we need to ask someone with MacOS that can reproduce it, @ebma @nejcm ?

[gonzamontiel]

I didn't mean to close it, let's check if the bug in macOS is still there. Also @prayagd, if it still happens to you, can you edit the title to add a tag like [MacOS] or a label like macos-only?

[ebma]

Can confirm that this can happen. But it only happens when I zoom in to 110%.

Another problem is that the table does not 'responsively' adjust to zooming. Even in 100% zoom (so no zoom at all but the default value), the table is scrollable which I think is a bit annoying. (As you can see on the screenshot the buttons are not entirely visible and I can scroll to the right). I would expect the table to show without scrolling by default but I'm not sure how easy it is to achieve.

[nejcm]

The problem is some css from the daisy lib. It has some table headers set as position sticky.