static/js/fixed-tooltips.js

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);
});