Spaces:
Running
Running
File size: 4,070 Bytes
66f69ed |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 |
document.addEventListener('DOMContentLoaded', function() {
// Fix table column widths
function fixTableColumnWidths() {
const tables = document.querySelectorAll('.results-table table');
tables.forEach(table => {
// Force table layout to fixed
table.style.tableLayout = 'fixed';
// Get all the dataset header cells
const datasetHeaders = table.querySelectorAll('thead tr:first-child th:not(:first-child)');
// Set dataset column titles to have no width impact
datasetHeaders.forEach(header => {
// Remove any explicit width
header.style.width = 'auto';
// Create a wrapper for the text that won't affect layout
if (!header.querySelector('.tooltip-text-wrapper')) {
const textContent = header.textContent;
header.innerHTML = `<span class="tooltip-text-wrapper" style="display:inline-block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;">${header.innerHTML}</span>`;
}
// Force all tooltips to be positioned absolute or fixed
if (header.hasAttribute('data-tooltip')) {
header.style.position = 'relative';
}
});
// Get the total number of metric columns (excluding model name column)
let totalMetricColumns = 0;
const metricCells = table.querySelectorAll('thead tr:nth-child(2) th:not(:first-child)');
totalMetricColumns = metricCells.length;
if (totalMetricColumns > 0) {
// Calculate equal width for data columns
const equalWidth = `${(100 / totalMetricColumns).toFixed(2)}%`;
// Apply equal width to all metric header cells
metricCells.forEach(cell => {
cell.style.width = equalWidth;
cell.style.minWidth = '40px';
cell.style.maxWidth = 'none'; // Let it take its share
});
// Apply equal width to all data cells
const dataCells = table.querySelectorAll('tbody td:not(:first-child)');
dataCells.forEach(cell => {
cell.style.width = equalWidth;
cell.style.minWidth = '40px';
cell.style.maxWidth = 'none'; // Let it take its share
});
}
// Set the model column to have a fixed width
const modelColumn = table.querySelectorAll('thead tr th:first-child, tbody td:first-child');
modelColumn.forEach(cell => {
cell.style.width = '160px';
cell.style.minWidth = '160px';
cell.style.maxWidth = '160px';
});
});
}
// Create a style element for additional fixes
const style = document.createElement('style');
style.textContent = `
/* Fix table layout issues */
.results-table table {
table-layout: fixed !important;
width: 100% !important;
}
/* Ensure tooltips don't affect column widths */
.tooltip-trigger::after,
[data-tooltip]::after {
position: absolute !important;
content: attr(data-tooltip);
width: 300px !important;
max-width: 300px !important;
white-space: normal !important;
pointer-events: none;
display: none !important;
}
/* Make sure dataset title cells don't grow too wide */
.results-table thead tr:first-child th:not(:first-child) {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
`;
document.head.appendChild(style);
// Run immediately
fixTableColumnWidths();
// Also run after a short delay
setTimeout(fixTableColumnWidths, 200);
// Run again after images and other resources might have loaded
window.addEventListener('load', function() {
fixTableColumnWidths();
setTimeout(fixTableColumnWidths, 500);
});
// Also run when tabs are clicked
const tabs = document.querySelectorAll('.tabs li');
tabs.forEach(tab => {
tab.addEventListener('click', () => {
setTimeout(fixTableColumnWidths, 200);
});
});
// Also run on window resize
window.addEventListener('resize', fixTableColumnWidths);
}); |