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>
This commit is contained in:
2026-03-23 19:48:53 +08:00
parent cbe9a0f74e
commit 9f9cfea0e6
+27 -1
View File
@@ -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>