Update token actions popover

[dweberdev]

[netlify]

✅ Deploy Preview for eager-poitras-f19dbe ready!

Name	Link
🔨 Latest commit	9350f10
🔍 Latest deploy log	https://app.netlify.com/sites/eager-poitras-f19dbe/deploys/624cc51e0754f80009a7f873
😎 Deploy Preview	https://deploy-preview-562--eager-poitras-f19dbe.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[dweberdev]

Headless ui popover has a solution that uses react-popper and refs but it has a weird bug that is positioning the popover on the top left corner of the screen.

I also implemented andt popover as well but it was a pain to style and match our needs.

This solution seems to work great. I'm open to a discussion whether this is a solid approach.

[dospore]

Headless ui popover has a solution that uses react-popper and refs but it has a weird bug that is positioning the popover on the top left corner of the screen.

what was the original issue and solution? I remember it was pushing the div down, was the solution just to make the popover absolute?

[dweberdev]

It would've worked if it wasn't for being inside a table.

The position of the dropdown is absolute but anything I used as position relative inside the table caused to expand the table because of the overflow value we have to use for responsive tables.

If I use something outside of the table as position relative, it will take a lot of messy css to adjust and prone to bugs.

Headless UI recommends an alternative to using position absolute but using refs and react-popper but I kept having issues as some other people: tailwindlabs/headlessui#985

[dospore]

It would've worked if it wasn't for being inside a table.

The position of the dropdown is absolute but anything I used as position relative inside the table caused to expand the table because of the overflow value we have to use for responsive tables.

If I use something outside of the table as position relative, it will take a lot of messy css to adjust and prone to bugs.

Headless UI recommends an alternative to using position absolute but using refs and react-popper but I kept having issues as some other people: tailwindlabs/headlessui#985

mmmmm sounds like a weird one, happy to use this for this case. Do you think its worth going through and updating the rest of the popovers??

[dweberdev]

mmmmm sounds like a weird one, happy to use this for this case. Do you think its worth going through and updating the rest of the popovers??

I like keeping the app consistent. Headless ui popover will work as long as its not inside a container with overflow: scroll

[dospore]

mmmmm sounds like a weird one, happy to use this for this case. Do you think its worth going through and updating the rest of the popovers??

I like keeping the app consistent. Headless ui popover will work as long as its not inside a container with overflow: scroll

Could be one to go through and remove headless ui popover in place of tiny-popover