fixing the popover behavior, so it doesn't show as transparent, because later rows are in the front

Signed-off-by: Kai Wagner <kai.wagner@percona.com>

Author: ImTheKai

app/assets/stylesheets/components/topics.css

@@ -293,6 +293,11 @@ a.topic-icon {
   }
 }
 
+.topic-row.is-popover-open {
+  position: relative;
+  z-index: 5;
+}
+
 .topic-row.topic-new,
 .topic-row.topic-reading {
   background: var(--color-bg-unread);

app/javascript/controllers/hover_popover_controller.js

@@ -13,12 +13,14 @@ export default class extends Controller {
   show() {
     this._clearTimeout()
     this.element.classList.add("is-open")
+    this._updateRowOpenState()
   }
 
   scheduleHide() {
     this._clearTimeout()
     this.hideTimeout = setTimeout(() => {
       this.element.classList.remove("is-open")
+      this._updateRowOpenState()
     }, this.delay)
   }
 
@@ -28,4 +30,12 @@ export default class extends Controller {
       this.hideTimeout = null
     }
   }
+
+  _updateRowOpenState() {
+    const row = this.element.closest(".topic-row")
+    if (!row) return
+
+    const hasOpenPopover = row.querySelector(".topic-icon.is-open")
+    row.classList.toggle("is-popover-open", Boolean(hasOpenPopover))
+  }
 }