Fleet UI: Hosts table scrollbar issues

[rachaelshaw]

🧑‍💻  Expected behavior

• When I hide enough columns such that they're all visible on the page, I would expect the table's horizontal scrollbar to go away.
• When adding columns, I would not expect a vertical scrollbar to suddenly appear where there was none before.

💥  Actual behavior

Ever-present scrollbar when there are only a few columns:

Showing certain columns with tooltips can cause a vertical scrollbar to appear:

👣 Reproduction steps

• For the horizontal scrollbar: remove columns until they can all fit on your screen
• For the vertical scrollbar: this is only an issue when:
  • there's just 1 host in the list (try filtering to just see your own laptop)
  • a visible column header has a tooltip that is taller than the table row (the "MDM status" column has a tall enough tooltip to cause this)

More info

• Horizontal scrollbar can be fixed by changing overflow-x: scroll (scrollbar is present regardless of overflow) to overflow-x: auto (scrollbar only appears when content overflows its container)

[xpkoala]

Hrmm, I was able to confirm the vertical scroll appearing after hovering over the MDM tooltip, but I haven't had luck reproducing the horizontal scroll issue.

Sending to CX to:

• Look into a fix for the horizontal scroll not appearing in that situation. (Hovering over the MDM tooltip may not be required)
• Investigate a bit more on the horizontal scroll issue raised above.

[rachaelshaw]

@xpkoala I'm not seeing the horizontal scrollbar anymore either, may have been fixed as a side effect of some other change

[RachelElysia]

This vertical scroll bar bug needs to be tabled (pun intended) or have a dirty fix (make the tooltips 2 lines). The issue is that react-table doesn't play nicely with react-tooltip. React tooltip is a component nested into a table cell and can't be styled to be in front of the table so there's no scroll. No matter what I do, it stays within .data-table table

[fleet-release]

Scrollbar fixed, a smooth view, Like a cloud city, clear and new. Fleet's hosts table, ever true.