From 9f9cfea0e68da2b3b5801a7c3ceca0c9e0d16455 Mon Sep 17 00:00:00 2001
From: wren <porlong@qq.com>
Date: Mon, 23 Mar 2026 19:48:53 +0800
Subject: [PATCH] fix(ui): dynamic tooltip width/height based on table
 dimensions

Table tooltip now calculates maxWidth from column count (140px/col,
min 400, max 85vw) and maxHeight from row count (30px/row, min 150,
max 70vh) for better readability of large tables.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 app/components/reviews/ReviewPointsList.tsx | 28 ++++++++++++++++++++-
 1 file changed, 27 insertions(+), 1 deletion(-)

diff --git a/app/components/reviews/ReviewPointsList.tsx b/app/components/reviews/ReviewPointsList.tsx
index 51e7e2e..f1170e1 100644
--- a/app/components/reviews/ReviewPointsList.tsx
+++ b/app/components/reviews/ReviewPointsList.tsx
@@ -554,6 +554,31 @@ const ReactTableTooltip = ({ content }: { content: string }) => {
       return firstLine ? firstLine.trim().substring(0, 80) + (firstLine.length > 80 ? '...' : '') : content.substring(0, 80);
     })();
 
+    // 根据列数动态计算宽度：每列约 120px，最小 400，最大 90vw
+    const colCount = (() => {
+      if (isMdTable) {
+        const sepMatch = content.match(/\|[\s-:]+(?:\|[\s-:]+)+\|/);
+        return sepMatch ? (sepMatch[0].match(/---/g) || []).length : 4;
+      }
+      const firstDataLine = content.split('\n').find(l => l.includes('|'));
+      return firstDataLine ? firstDataLine.split('|').filter(c => c.trim()).length : 4;
+    })();
+    const tableMaxWidth = Math.min(Math.max(colCount * 140, 400), window.innerWidth * 0.85);
+
+    // 根据行数动态计算高度：表头 36px + 每行 30px，最小 150，最大 70vh
+    const rowCount = (() => {
+      if (isMdTable) {
+        const sepMatch = content.match(/\|[\s-:]+(?:\|[\s-:]+)+\|/);
+        if (sepMatch) {
+          const bodyPart = content.substring(content.indexOf(sepMatch[0]) + sepMatch[0].length);
+          const bodyCells = bodyPart.split('|').filter(c => c.trim()).length;
+          return Math.ceil(bodyCells / colCount);
+        }
+      }
+      return content.split('\n').filter(l => l.trim() && l.includes('|')).length;
+    })();
+    const tableMaxHeight = Math.min(Math.max(36 + rowCount * 30 + 20, 150), window.innerHeight * 0.7);
+
     return (
       <div className="text-xs p-1 rounded cursor-text w-full text-left">
         <Tooltip
@@ -564,7 +589,8 @@ const ReactTableTooltip = ({ content }: { content: string }) => {
           showArrow={true}
           className="tooltip-custom-offset"
           scrollable={true}
-          maxHeight={400}
+          maxWidth={tableMaxWidth}
+          maxHeight={tableMaxHeight}
         >
           <div className="text-gray-800 break-all overflow-hidden line-clamp-2 flex items-center gap-1">
             <i className="ri-table-line text-blue-400 flex-shrink-0"></i>