porter-archive icon indicating copy to clipboard operation
porter-archive copied to clipboard

Fix DocsHelper component overflow on provision

Open modularcoder opened this issue 2 years ago • 0 comments

Change placement DocsHelper

Pull request type

Please check the type of change your PR introduces:

  • [x] Bugfix
  • [ ] Feature
  • [ ] Other (please describe):

Pull request checklist

Please check if your PR fulfills the following requirements:

  • [ ] If it's a backend change, tests for the changes have been added and go test ./... runs successfully from the root folder.
  • [ ] If it's a frontend change, Prettier has been run
  • [ ] Docs have been reviewed and added / updated if needed

What is the current behavior?

DocsHelper tooltip overflows the window

image

What is the new behavior?

DocsHelper is displayed on the bottom :)

image

Technical Spec/Implementation Notes

Just added the placement attribute here. One interesting solution to these overflowing popups might be using Floating UI https://floating-ui.com/ It's a floating elements computation lib, and can solve floating elements overflowing issues. Some basic examples

  • Flip the select components direction if select is near the screen edge
  • Flip the tooltip position if it's near the screen edge

modularcoder avatar Apr 22 '23 07:04 modularcoder