themesberg/flowbite

Popover and Tooltip cause overflow (white space in page) when window resize

Lexachoc opened this issue · 1 comments

Describe the bug

Extra white space in the right side of page due to popover after window resize

To Reproduce
Steps to reproduce the behavior:
Create a popover close to the right side of the page, and then resize the window (make it smaller in width)

You will see white space in the right side of page due to the transform property of the popover.

Expected behavior
I think if the popover is hidden, the "transform" property should be removed in order to resolve the issue.

The tooltip component is also affected when positioned near border sides.

Screenshots
image

Desktop (please complete the following information):

  • OS: Windows
  • Browser: Chrome
  • Version: 123.0.6312.106 (Official Build) (64-bit)

I have came up a temporary fix for this issue :
For Popover: https://github.com/Lexachoc/flowbite/blob/374890fcf3bdc1bba29d12e966f3dea262ee5d58/src/components/popover/index.ts#L123C1-L127C21

        this._hideHandler = () => {
            setTimeout(() => {
                if (!this._targetEl.matches(':hover')) {
                    this.hide();
                }
            }, 100);
+            setTimeout(() => {
+                if (!this._targetEl.matches(':hover')) {
+                    this._targetEl.style.transform ='';
+                }
+            }, 100);
        };

For Tooltip:

        this._hideHandler = () => {
            this.hide();
+            setTimeout(() => {
+                this._targetEl.style.transform ='';
+            }, 100);
        };

For the case when Clipboard is used with tooltip, the above snippet for tooltip must be changed again so that the final solution is as follows:
(The problem is that the success tooltip message is shown and the default tooltip message is hidden when we click the trigger, but we don't want the tooltip to lose its transformation position until we move the mouse out of the trigger).
https://github.com/Lexachoc/flowbite/blob/25d7ea34a776202922b148f528e1151ea9d73a56/src/components/tooltip/index.ts#L115C1-L119C21

        this._hideHandler = () => {
            this.hide();
+            setTimeout(() => {
+                if (!this._targetEl.matches('.opacity-100.visible')) {
+                    this._targetEl.style.transform ='';
+                }
+            }, 100);
        };

All the above codes clear the value of the "transform" property after 100 ms after hiding the popover/tooltip