Fix table overflow and pagination rounded border

[nelsonkopliku]

Description

the overflow hidden added to the table component in this PR #3010 prevented the items per page selection to be properly shown.

I moved the necessary classname to the pagination component.

[jagabomb]

@nelsonkopliku I like how this fixes the usability of the dropdown component. I think we would still need to apply to rounded classes to some additional sections so that we have rounded corners on the edges of the table component.

Here are a couple of examples were it is missing the rounded effect:
Populated/Sorted

With Header

Another suggestion would be to change the position of the dropdown since the CSS in the previous PR creates a mask across all elements within the table. Therefore changing the position of the dropdown to the top of the selector would be quick-fix. 😅

Here is a quick reference:

[nelsonkopliku]

hey @jagabomb thanks for the suggestion, that's pretty smart. However it is not that straightforward changing the position of the options listbox, our current version (1.7) of headless ui does not support that well, while version 2 does, but we still don't have version 2 available #2881

If you have some pointers on how to do what you suggest with what we have currently, please share 😄
I'll take a look at how having also the two scenarios mentioned rounded.

[jagabomb]

@nelsonkopliku Cool, I can imagine headless ui 2.0 is not ready to merge.

I was thinking of a simpler solution, so if we take the Select component and give it a position property with an empty value which doesn't add a class by default but then if a user sets it to top (e.g: position-top ). Then that property could be passed to the Listbox.options component to conditionally add a bottom-11 class. This way we could then position the dropdown only when it sits in the bottom section of the table. Also we can amend this more easily when we add headless ui 2.0 .

[nelsonkopliku]

Awesome @jagabomb! Thanks a lot for the help, I could have lost myself in tailwind to find the correct class 🙈

[jagabomb]

Awesome! 🚀