fix(popover): remove hidden popover from layout to kill phantom scrollbar

Flowbite re-initialises popovers on every htmx swap. A popover hidden via
Tailwind `invisible` (visibility:hidden) still occupies layout, so once
Popper parks it with a transform offset it expands the table's
overflow-x-auto wrapper and a spurious scrollbar appears (horizontal here,
vertical in #40). Add `[&.invisible]:hidden` so the popover is removed from
layout while hidden; Flowbite drops `invisible` on show, restoring display.

Relates to #40. e2e regression covers no-overflow-after-swap plus
popover-still-shows-on-hover.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
2026-06-20 22:39:49 +02:00
parent 8637c547e4
commit b6f6da309f
3 changed files with 70 additions and 123 deletions
+10 -4
View File
@@ -138,10 +138,16 @@ def _popover_html(
)
popover_tooltip_class = (
"absolute z-10 invisible inline-block text-sm text-white "
"transition-opacity duration-300 bg-white border border-purple-200 "
"rounded-lg shadow-xs opacity-0 dark:text-white dark:border-purple-600 "
"dark:bg-purple-800"
# `[&.invisible]:hidden`: while Flowbite keeps the popover hidden it
# carries the `invisible` class (visibility:hidden), which still
# occupies layout — an absolutely-positioned, Popper-transformed
# popover then expands its scroll container, producing a phantom
# scrollbar (issue #53 / #40). Removing it from layout while hidden
# fixes that; Flowbite drops `invisible` on show, restoring display.
"absolute z-10 invisible [&.invisible]:hidden inline-block text-sm "
"text-white transition-opacity duration-300 bg-white border "
"border-purple-200 rounded-lg shadow-xs opacity-0 dark:text-white "
"dark:border-purple-600 dark:bg-purple-800"
)
div = Div(