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:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user