fix: Top20 dropdown floats above chart with fixed positioning

Co-authored-by: Cursor <cursoragent@cursor.com>

manual_trading_hub/static/app.css

@@ -2628,6 +2628,9 @@ body.login-page {
   flex-wrap: wrap;
   gap: 10px;
   align-items: flex-end;
+  position: relative;
+  z-index: 60;
+  overflow: visible;
 }
 
 .market-field {
@@ -2928,11 +2931,16 @@ body.login-page {
   pointer-events: auto;
 }
 
+.market-field-symbol {
+  overflow: visible;
+}
+
 .market-field-symbol .market-symbol-wrap {
   display: flex;
   align-items: stretch;
   gap: 6px;
   min-width: 0;
+  overflow: visible;
 }
 
 .market-field-symbol .market-symbol-wrap > input {
@@ -2943,6 +2951,11 @@ body.login-page {
 .market-vol-rank {
   position: relative;
   flex: 0 0 auto;
+  overflow: visible;
+}
+
+.market-toolbar:has(.market-vol-rank[open]) {
+  z-index: 1300;
 }
 
 .market-vol-rank > summary {
@@ -2972,17 +2985,15 @@ body.login-page {
 }
 
 .market-vol-rank-panel {
-  position: absolute;
+  position: fixed;
-  top: calc(100% + 4px);
+  z-index: 1310;
-  right: 0;
-  z-index: 30;
   width: min(320px, 72vw);
-  max-height: 360px;
+  max-height: min(420px, 70vh);
   overflow: auto;
   border: 1px solid var(--border-soft);
   border-radius: 8px;
   background: var(--panel-bg, #1a1f2e);
-  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.4);
+  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55);
   padding: 8px 0 6px;
 }
 

manual_trading_hub/static/chart.js

@@ -92,6 +92,8 @@
   const elVolRankMeta = document.getElementById("market-vol-rank-meta");
   const elVolRankList = document.getElementById("market-vol-rank-list");
   const elVolRankDetails = document.getElementById("market-vol-rank");
+  const elVolRankPanel =
+    elVolRankDetails && elVolRankDetails.querySelector(".market-vol-rank-panel");
   const elTf = document.getElementById("market-timeframe");
   const elRefresh = document.getElementById("market-refresh");
   const elStatus = document.getElementById("market-status");
@@ -2616,6 +2618,32 @@
     void postChartUnwatch();
   }
 
+  function positionVolRankPanel() {
+    if (!elVolRankDetails || !elVolRankPanel || !elVolRankDetails.open) return;
+    const summary = elVolRankDetails.querySelector("summary");
+    if (!summary) return;
+    const rect = summary.getBoundingClientRect();
+    const panelW = elVolRankPanel.offsetWidth || 300;
+    let left = rect.right - panelW;
+    left = Math.max(8, Math.min(left, window.innerWidth - panelW - 8));
+    const top = rect.bottom + 4;
+    const maxH = Math.min(420, window.innerHeight - top - 12);
+    elVolRankPanel.style.left = left + "px";
+    elVolRankPanel.style.top = top + "px";
+    elVolRankPanel.style.maxHeight = Math.max(180, maxH) + "px";
+  }
+
+  function bindVolRankPanel() {
+    if (!elVolRankDetails) return;
+    elVolRankDetails.addEventListener("toggle", function () {
+      if (elVolRankDetails.open) {
+        requestAnimationFrame(positionVolRankPanel);
+      }
+    });
+    window.addEventListener("resize", positionVolRankPanel);
+    window.addEventListener("scroll", positionVolRankPanel, true);
+  }
+
   function renderVolumeRank(data) {
     if (!elVolRankMeta || !elVolRankList) return;
     elVolRankList.innerHTML = "";
@@ -2674,6 +2702,9 @@
       li.appendChild(btn);
       elVolRankList.appendChild(li);
     });
+    if (elVolRankDetails && elVolRankDetails.open) {
+      requestAnimationFrame(positionVolRankPanel);
+    }
   }
 
   async function loadVolumeRank(forceRefresh) {
@@ -2830,6 +2861,7 @@
 
   function bind() {
     bindSlDrag();
+    bindVolRankPanel();
     if (elRefresh) {
       elRefresh.addEventListener("click", function () {
         loadChart(true);

manual_trading_hub/static/index.html

@@ -15,7 +15,7 @@
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
   <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&family=Orbitron:wght@500;600;700&display=swap" rel="stylesheet" media="print" onload="this.media='all'" />
   <noscript><link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&family=Orbitron:wght@500;600;700&display=swap" rel="stylesheet" /></noscript>
-  <link rel="stylesheet" href="/assets/app.css?v=20260608-market-vol-rank" />
+  <link rel="stylesheet" href="/assets/app.css?v=20260608-market-vol-rank-v3" />
 </head>
 <body>
   <div class="app-bg" aria-hidden="true"></div>
@@ -395,7 +395,7 @@
   <div id="toast"></div>
   <script src="https://unpkg.com/lightweight-charts@4.2.0/dist/lightweight-charts.standalone.production.js"></script>
   <script src="/assets/chart_draw.js?v=20260608-market-vol-rank"></script>
-  <script src="/assets/chart.js?v=20260608-market-vol-rank-v2"></script>
+  <script src="/assets/chart.js?v=20260608-market-vol-rank-v3"></script>
   <script src="/assets/archive.js?v=20260607-hub-archive-v6"></script>
   <script src="/assets/ai_review_render.js?v=2"></script>
   <script src="/assets/app.js?v=20260607-hub-archive-v1"></script>