Fix topic-icon popovers rendering under later rows in Safari - #133
Merged
Conversation
…n Safari The topics list is a <table> with border-collapse: collapse, and Safari ignores z-index on <tr> elements in that case. Our previous fix gave the open row position: relative + z-index, which works in Chrome/Firefox but not Safari, so a popover taller than its row kept rendering underneath the rows below it there. Instead of relying on table stacking at all, the hover-popover controller now detaches the popover to <body> and pins it with position: fixed, computed from the trigger's bounding box, while it's open, then moves it back on hide. This avoids the table's stacking context entirely, so it renders correctly regardless of browser. Verified with Playwright in both Chromium and WebKit. Signed-off-by: Kai Wagner <kai.wagner@percona.com>
dutow
approved these changes
Aug 28, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
<table>withborder-collapse: collapse, and Safari ignoresz-indexon<tr>elements in that case. The earlier fix in fixing the popover behavior, so it doesn't show as transparent, because later rows are in the front #54 gave the open rowposition: relative+z-index, which works in Chrome/Firefox but not Safari — a popover taller than its row still rendered underneath the rows below it there, which is why the issue kept resurfacing.hover_popover_controller.jsto detach the popover to<body>and pin it withposition: fixed(computed from the trigger's bounding box) while it's open, instead of relying on table row stacking at all. This sidesteps the Safari table quirk entirely..topic-row.is-popover-openz-index rule fromtopics.css.🤖 Generated with Claude Code