Buttons overlap table headers when used in a table row

[jonasbjoralt]

Describe the bug The Button component has a relative position, which causes it to overlap with elements higher up in the DOM, such as a table header. This causes some wacky overlap, see screenshot:

Steps to reproduce the bug

1.Make a scrollable table with EDS components 2.Include a Button with an Icon 3.Scroll 4.BUG: Icon wants to hang out with the contents in the header

To fix: style={{ position: "inherit" }} in the Button Or, in EDS code, just remove the position-stuff if you can :)

Expected behavior

No overlap? Static position or something

Specifications

• Version: 0.20.4
• Browser: Chrome
• OS: Ubuntu

Additional context

Add any other context or screenshots about the bug. An example in CodeSandbox is very helpful

[oddvernes]

Hello and thanks for reporting this! I believe we tried to fix this last December with #1816 by adding z-index to Table.Cell inside Table.Head when Table.Head have the sticky prop (<Table.Head sticky>) Do you use the sticky prop in your code or did you make it scrollable in some other way? At least when i test in storybook this still works

Removing position relative on button currently will break acessibility somewhat because there is an absolutely positioned ::after element that makes the clickable area bigger to comply with WCAG target size. Now that square will be stuck up in the corner of the viewport or next relatively positioned parent. Perhaps this can be rewritten to use grid for positioning instead to avoid this problem all together 🤔

[oddvernes]

Testing points to this not being an issue when using <Table.Head sticky>