From 696ae451d3ef33f2455ef1e0410bc2a736efd663 Mon Sep 17 00:00:00 2001
From: orangecoding <christian.kellner.privat@gmail.com>
Date: Tue, 2 Jun 2026 12:57:12 +0200
Subject: [PATCH] fixing tooltip issues

---
 ui/src/components/listings/StatusControl.jsx  | 32 ++++++++++++++++---
 ui/src/components/listings/StatusControl.less |  8 +++++
 2 files changed, 36 insertions(+), 4 deletions(-)

diff --git a/ui/src/components/listings/StatusControl.jsx b/ui/src/components/listings/StatusControl.jsx
index d9d7dbb..d45ea1b 100644
--- a/ui/src/components/listings/StatusControl.jsx
+++ b/ui/src/components/listings/StatusControl.jsx
@@ -3,6 +3,7 @@
  * Licensed under Apache-2.0 with Commons Clause and Attribution/Naming Clause
  */
 
+import { useState } from 'react';
 import { Dropdown, Button, Tooltip } from '@douyinfe/semi-ui-19';
 import { IconChevronDown } from '@douyinfe/semi-icons';
 
@@ -43,9 +44,12 @@ const optionFor = (status) => STATUS_OPTIONS.find((o) => o.value === status) ??
  * @param {(e: React.MouseEvent) => void} [props.onTriggerClick] - Optional click handler to stop propagation on the trigger.
  */
 export default function StatusControl({ status = null, onChange, compact = false, onTriggerClick }) {
+  const [open, setOpen] = useState(false);
+  const [tooltipOpen, setTooltipOpen] = useState(false);
   const current = optionFor(status);
 
   const handlePick = (next) => {
+    setOpen(false);
     if (next === status) return;
     onChange?.(next);
   };
@@ -69,13 +73,25 @@ export default function StatusControl({ status = null, onChange, compact = false
     .join(' ');
 
   const trigger = (
-    <Tooltip content={STATUS_TOOLTIP} position="top" trigger="hover">
+    <Tooltip
+      content={STATUS_TOOLTIP}
+      position="top"
+      trigger="custom"
+      visible={tooltipOpen && !open}
+      onVisibleChange={setTooltipOpen}
+    >
       <Button
         size={compact ? 'small' : 'default'}
         theme="borderless"
         icon={<IconChevronDown />}
         iconPosition="right"
-        onClick={(e) => onTriggerClick?.(e)}
+        onMouseEnter={() => setTooltipOpen(true)}
+        onMouseLeave={() => setTooltipOpen(false)}
+        onClick={(e) => {
+          onTriggerClick?.(e);
+          setTooltipOpen(false);
+          setOpen((o) => !o);
+        }}
         className={className}
       >
         {status ? current.label : 'Status'}
@@ -84,8 +100,16 @@ export default function StatusControl({ status = null, onChange, compact = false
   );
 
   return (
-    <Dropdown trigger="click" position="bottomLeft" render={menu} stopPropagation>
-      {trigger}
+    <Dropdown
+      trigger="custom"
+      visible={open}
+      onVisibleChange={setOpen}
+      onClickOutSide={() => setOpen(false)}
+      position="bottom"
+      render={menu}
+      stopPropagation
+    >
+      <span className="status-btn__anchor">{trigger}</span>
     </Dropdown>
   );
 }
diff --git a/ui/src/components/listings/StatusControl.less b/ui/src/components/listings/StatusControl.less
index 706442d..39ee85d 100644
--- a/ui/src/components/listings/StatusControl.less
+++ b/ui/src/components/listings/StatusControl.less
@@ -1,5 +1,13 @@
 @import '../../tokens.less';
 
+// Wrapper span used as the Dropdown's positioning anchor so the menu opens
+// directly below the visible button rather than the implicit wrapper of the
+// hover tooltip (which can have a different bounding box).
+.status-btn__anchor {
+  display: inline-block;
+  line-height: 0;
+}
+
 // StatusControl shared base. Matches dimensions and border treatment
 // of the surrounding Watched / Open listing / Delete buttons in the
 // detail view, and shrinks via the --compact modifier for table rows