Shorten table column headings for narrower coverage columns

Author: sferik

assets/stylesheets/screen.css

@@ -410,6 +410,7 @@ table.file_list th.cell--coverage .th-with-filter {
 /* --- File list table --------------------------------------- */
 
 .file_list--responsive {
+  overflow-x: auto;
 }
 
 table.file_list {
@@ -502,30 +503,28 @@ a.src_link {
 
 /* --- Coverage columns -------------------------------------- */
 
-table.file_list td.cell--bar {
-  padding-right: 4px;
-  padding-left: 0;
+table.file_list td.cell--coverage {
+  white-space: nowrap;
 }
 
-table.file_list td.cell--bar .coverage-bar {
-  margin-left: auto;
+.coverage-cell {
+  display: flex;
+  flex-wrap: nowrap;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 10px;
 }
 
-table.file_list td.cell--pct {
-  text-align: right;
+.coverage-cell .coverage-pct {
+  flex: 0 0 4.5em;
   font-variant-numeric: tabular-nums;
-  white-space: nowrap;
-  width: 1%;
-  padding-left: 4px;
-}
-
-table.file_list .totals-row td.cell--bar {
-  padding-right: 4px;
-  padding-left: 0;
 }
 
-table.file_list .totals-row td.cell--pct {
-  padding-left: 4px;
+.coverage-cell .bar-sizer {
+  flex: 0 0 auto;
+  width: 240px;
+  min-width: 160px;
+  max-width: 240px;
 }
 
 table.file_list td.cell--numerator {
@@ -567,7 +566,6 @@ table.file_list .totals-row td.cell--denominator {
   background: var(--bar-bg);
   border-radius: 6px;
   overflow: hidden;
-  min-width: 40px;
 }
 
 .coverage-bar__fill {

lib/simplecov-html/view_helpers.rb

@@ -76,37 +76,31 @@ def fmt(number)
         def coverage_bar(pct)
           css = coverage_css_class(pct)
           width = Kernel.format("%.1f", pct.floor(1))
-          %(<div class="coverage-bar"><div class="coverage-bar__fill coverage-bar__fill--#{css}" style="width: #{width}%"></div></div>)
+          %(<div class="bar-sizer"><div class="coverage-bar"><div class="coverage-bar__fill coverage-bar__fill--#{css}" style="width: #{width}%"></div></div></div>)
         end
 
-        def coverage_cells(pct, covered, total, type:, totals: false) # rubocop:disable Metrics/MethodLength
+        def coverage_cells(pct, covered, total, type:, totals: false)
           css = coverage_css_class(pct)
+          pct_str = Kernel.format("%.2f", pct.floor(2))
           if totals
-            bar_cls = "cell--bar t-totals__#{type}-bar"
-            pct_cls = "cell--pct strong t-totals__#{type}-pct #{css}"
+            cov_cls = "cell--coverage strong t-totals__#{type}-pct #{css}"
             num_cls = "cell--numerator strong t-totals__#{type}-num"
             den_cls = "cell--denominator strong t-totals__#{type}-den"
+            order = ""
           else
-            bar_cls = "cell--bar"
-            pct_cls = "cell--pct cell--#{type}-pct #{css}"
+            cov_cls = "cell--coverage cell--#{type}-pct #{css}"
             num_cls = "cell--numerator"
             den_cls = "cell--denominator"
+            order = %( data-order="#{Kernel.format('%.2f', pct)}")
           end
-          pct_str = Kernel.format("%.2f", pct.floor(2))
-          pct_td = if totals
-                     %(<td class="#{pct_cls}">#{pct_str}%</td>)
-                   else
-                     %(<td class="#{pct_cls}" data-order="#{Kernel.format('%.2f', pct)}">#{pct_str}%</td>)
-                   end
-          %(<td class="#{bar_cls}">#{coverage_bar(pct)}</td>) +
-            pct_td +
+          %(<td class="#{cov_cls}"#{order}><div class="coverage-cell">#{coverage_bar(pct)}<span class="coverage-pct">#{pct_str}%</span></div></td>) +
             %(<td class="#{num_cls}">#{fmt(covered)}/</td>) +
             %(<td class="#{den_cls}">#{fmt(total)}</td>)
         end
 
         def coverage_header_cells(label, type, covered_label, total_label)
           <<~HTML
-            <th class="cell--coverage" colspan="2">
+            <th class="cell--coverage">
               <div class="th-with-filter">
                 <span class="th-label">#{label}</span>
                 <div class="col-filter__coverage">

public/application.css

@@ -7,7 +7,7 @@ hljs.registerLanguage('ruby', ruby);
 // --- Constants ------------------------------------------------
 
 const MAX_BAR_WIDTH = 240;
-const MIN_BAR_WIDTH = 80;
+const MIN_BAR_WIDTH = 160;
 const GREEN_THRESHOLD = 90;
 const YELLOW_THRESHOLD = 75;
 
@@ -74,21 +74,21 @@ function updateCoverageCells(
   covered: number,
   total: number
 ): void {
-  const barEl = $(prefix + '-bar', container);
-  const pctEl = $(prefix + '-pct', container);
+  const covCell = $(prefix + '-pct', container);
   const numEl = $(prefix + '-num', container);
   const denEl = $(prefix + '-den', container);
   if (total === 0) {
-    if (barEl) barEl.innerHTML = '';
-    if (pctEl) { pctEl.textContent = ''; pctEl.className = pctEl.className.replace(/green|yellow|red/g, '').trim(); }
+    if (covCell) { covCell.innerHTML = ''; covCell.className = covCell.className.replace(/green|yellow|red/g, '').trim(); }
     if (numEl) numEl.textContent = '';
     if (denEl) denEl.textContent = '';
     return;
   }
   const p = (covered * 100.0) / total;
   const cls = pctClass(p);
-  if (barEl) barEl.innerHTML = `<div class="coverage-bar"><div class="coverage-bar__fill coverage-bar__fill--${cls}" style="width: ${p.toFixed(1)}%"></div></div>`;
-  if (pctEl) { pctEl.textContent = p.toFixed(2) + '%'; pctEl.className = `${pctEl.className.replace(/green|yellow|red/g, '').trim()} ${cls}`; }
+  if (covCell) {
+    covCell.innerHTML = `<div class="coverage-cell"><div class="bar-sizer"><div class="coverage-bar"><div class="coverage-bar__fill coverage-bar__fill--${cls}" style="width: ${p.toFixed(1)}%"></div></div></div><span class="coverage-pct">${p.toFixed(2)}%</span></div>`;
+    covCell.className = `${covCell.className.replace(/green|yellow|red/g, '').trim()} ${cls}`;
+  }
   if (numEl) numEl.textContent = fmtNum(covered) + '/';
   if (denEl) denEl.textContent = fmtNum(total);
 }
@@ -305,21 +305,18 @@ function materializeSourceFile(sourceFileId: string): HTMLElement | null {
 
 // --- Bar width equalization ------------------------------------
 
-function setBarWidth(bars: Element[], table: Element, px: number): void {
+function setBarSizerWidth(sizers: Element[], px: number): void {
   const w = px + 'px';
-  $$('th.cell--coverage', table).forEach(h => h.setAttribute('colspan', '2'));
-  bars.forEach(b => {
-    const s = (b as HTMLElement).style;
-    s.display = '';
-    s.width = w; s.minWidth = w; s.maxWidth = w;
+  sizers.forEach(s => {
+    const st = (s as HTMLElement).style;
+    st.width = w; st.minWidth = w; st.maxWidth = w;
   });
 }
 
-function hideBars(bars: Element[], table: Element): void {
-  $$('th.cell--coverage', table).forEach(h => h.setAttribute('colspan', '1'));
-  bars.forEach(b => {
-    const s = (b as HTMLElement).style;
-    s.display = 'none'; s.width = ''; s.minWidth = ''; s.maxWidth = '';
+function clearBarSizerWidth(sizers: Element[]): void {
+  sizers.forEach(s => {
+    const st = (s as HTMLElement).style;
+    st.width = ''; st.minWidth = ''; st.maxWidth = '';
   });
 }
 
@@ -330,40 +327,34 @@ function equalizeBarWidths(): void {
 
     const table = $('table.file_list', container) as HTMLTableElement | null;
     if (!table) return;
-    const bars = $$('td.cell--bar', table);
-    if (bars.length === 0) return;
+    const sizers = $$('.bar-sizer', table);
+    if (sizers.length === 0) return;
 
     const wrapper = table.closest('.file_list--responsive') as HTMLElement | null;
     if (!wrapper) return;
 
     wrapper.style.visibility = 'hidden';
 
-    const fitsAt = (px: number): boolean => {
-      setBarWidth(bars, table, px);
-      table.style.width = 'auto';
-      void table.offsetWidth;
-      const fits = table.scrollWidth <= wrapper.clientWidth;
-      table.style.width = '';
-      return fits;
-    };
-
-    let barWidth = MAX_BAR_WIDTH;
-    if (!fitsAt(MAX_BAR_WIDTH)) {
-      if (!fitsAt(MIN_BAR_WIDTH)) {
-        hideBars(bars, table);
-        wrapper.style.visibility = '';
-        return;
-      }
-      let lo = MIN_BAR_WIDTH, hi = MAX_BAR_WIDTH - 1;
+    // Reset to CSS defaults and measure whether the table overflows
+    clearBarSizerWidth(sizers);
+    void table.offsetWidth;
+
+    if (table.scrollWidth <= wrapper.clientWidth) {
+      // Table fits — binary search for the largest bar width that still fits
+      let lo = MIN_BAR_WIDTH, hi = MAX_BAR_WIDTH;
       while (lo < hi) {
         const mid = Math.ceil((lo + hi) / 2);
-        if (fitsAt(mid)) lo = mid;
+        setBarSizerWidth(sizers, mid);
+        void table.offsetWidth;
+        if (table.scrollWidth <= wrapper.clientWidth) lo = mid;
         else hi = mid - 1;
       }
-      barWidth = lo;
+      setBarSizerWidth(sizers, lo);
+    } else {
+      // Table overflows — use minimum bar width
+      setBarSizerWidth(sizers, MIN_BAR_WIDTH);
     }
 
-    setBarWidth(bars, table, barWidth);
     wrapper.style.visibility = '';
   });
 }

public/application.js

@@ -64,27 +64,14 @@ def test_output_branch_coverages
     assert_equal EXPECTED_BRANCH_COVERAGES, table.sort_by(&:to_f)
   end
 
-  def test_coverage_headers_have_colspan_two
+  def test_coverage_cells_contain_bar_and_percentage
     html_doc = format_results(CoverageFixtures::ALL_FIXTURES)
-    headers = html_doc.css("div#AllFiles table.file_list th.cell--coverage")
+    cov_cells = html_doc.css("div#AllFiles table.file_list tbody td.cell--coverage")
 
-    assert_operator headers.length, :>=, 1, "Expected at least one coverage header"
-    headers.each do |th|
-      assert_equal "2", th["colspan"], "Coverage header '#{th.text.strip}' must have colspan=2"
-    end
-  end
-
-  def test_bar_cells_precede_pct_cells
-    html_doc = format_results(CoverageFixtures::ALL_FIXTURES)
-    bar_cells = html_doc.css("div#AllFiles table.file_list tbody td.cell--bar")
-
-    assert_operator bar_cells.length, :>=, 1, "Expected at least one bar cell"
-    bar_cells.each do |bar|
-      pct = bar.next_element
-
-      assert pct, "Expected a sibling after each td.cell--bar"
-      assert_includes pct["class"], "cell--pct",
-                      "td.cell--bar must be immediately followed by td.cell--pct"
+    assert_operator cov_cells.length, :>=, 1, "Expected at least one coverage cell"
+    cov_cells.each do |td|
+      assert td.at_css(".bar-sizer"), "Coverage cell must contain a bar-sizer"
+      assert td.at_css(".coverage-pct"), "Coverage cell must contain a coverage-pct"
     end
   end
 

src/app.ts

@@ -665,24 +665,25 @@ def test_coverage_bar_hundred_percent
   def test_coverage_bar_exact_output_structure
     result = formatter.send(:coverage_bar, 90.0)
 
-    assert_equal '<div class="coverage-bar"><div class="coverage-bar__fill coverage-bar__fill--green" style="width: 90.0%"></div></div>', result
+    assert_equal '<div class="bar-sizer"><div class="coverage-bar"><div class="coverage-bar__fill coverage-bar__fill--green" style="width: 90.0%"></div></div></div>', result
   end
 
   # -- coverage_cells tests ---------------------------------------------------
 
   cover "SimpleCov::Formatter::HTMLFormatter::ViewHelpers#coverage_cells" if respond_to?(:cover)
 
-  def test_coverage_cells_returns_four_td_elements
+  def test_coverage_cells_returns_three_td_elements
     result = formatter.send(:coverage_cells, 85.0, 85, 100, type: :line)
 
-    assert_equal 4, result.scan("<td").count
+    assert_equal 3, result.scan("<td").count
   end
 
-  def test_coverage_cells_bar_cell_has_coverage_bar
+  def test_coverage_cells_combined_cell_has_bar_and_pct
     result = formatter.send(:coverage_cells, 85.0, 85, 100, type: :line)
 
-    assert_includes result, 'class="cell--bar"'
     assert_includes result, "coverage-bar"
+    assert_includes result, "coverage-pct"
+    assert_includes result, "coverage-cell"
   end
 
   def test_coverage_cells_pct_cell_contains_formatted_percent
@@ -734,36 +735,36 @@ def test_coverage_cells_uses_red_css_class_for_low
     assert_includes result, "red"
   end
 
-  def test_coverage_cells_pct_td_class_contains_css_color_non_totals
+  def test_coverage_cells_td_class_contains_css_color_non_totals
     result = formatter.send(:coverage_cells, 95.0, 95, 100, type: :line)
-    pct_td = result.match(/<td class="cell--pct cell--line-pct ([^"]+)"/)
+    cov_td = result.match(/<td class="cell--coverage cell--line-pct ([^"]+)"/)
 
-    assert pct_td, "Expected to find pct td with cell--line-pct class"
-    assert_includes pct_td[1], "green"
+    assert cov_td, "Expected to find coverage td with cell--line-pct class"
+    assert_includes cov_td[1], "green"
   end
 
-  def test_coverage_cells_pct_td_class_contains_css_color_totals
+  def test_coverage_cells_td_class_contains_css_color_totals
     result = formatter.send(:coverage_cells, 95.0, 95, 100, type: :line, totals: true)
-    pct_td = result.match(/<td class="cell--pct strong t-totals__line-pct ([^"]+)"/)
+    cov_td = result.match(/<td class="cell--coverage strong t-totals__line-pct ([^"]+)"/)
 
-    assert pct_td, "Expected to find pct td with t-totals__line-pct class"
-    assert_includes pct_td[1], "green"
+    assert cov_td, "Expected to find coverage td with t-totals__line-pct class"
+    assert_includes cov_td[1], "green"
   end
 
-  def test_coverage_cells_pct_td_class_red_for_low_non_totals
+  def test_coverage_cells_td_class_red_for_low_non_totals
     result = formatter.send(:coverage_cells, 50.0, 50, 100, type: :line)
-    pct_td = result.match(/<td class="cell--pct cell--line-pct ([^"]+)"/)
+    cov_td = result.match(/<td class="cell--coverage cell--line-pct ([^"]+)"/)
 
-    assert pct_td, "Expected to find pct td"
-    assert_includes pct_td[1], "red"
+    assert cov_td, "Expected to find coverage td"
+    assert_includes cov_td[1], "red"
   end
 
-  def test_coverage_cells_pct_td_class_red_for_low_totals
+  def test_coverage_cells_td_class_red_for_low_totals
     result = formatter.send(:coverage_cells, 50.0, 50, 100, type: :line, totals: true)
-    pct_td = result.match(/<td class="cell--pct strong t-totals__line-pct ([^"]+)"/)
+    cov_td = result.match(/<td class="cell--coverage strong t-totals__line-pct ([^"]+)"/)
 
-    assert pct_td, "Expected to find pct td"
-    assert_includes pct_td[1], "red"
+    assert cov_td, "Expected to find coverage td"
+    assert_includes cov_td[1], "red"
   end
 
   def test_coverage_cells_non_totals_uses_type_in_pct_class
@@ -778,12 +779,6 @@ def test_coverage_cells_non_totals_branch_type
     assert_includes result, "cell--branch-pct"
   end
 
-  def test_coverage_cells_totals_uses_type_in_bar_class
-    result = formatter.send(:coverage_cells, 85.0, 85, 100, type: :line, totals: true)
-
-    assert_includes result, "t-totals__line-bar"
-  end
-
   def test_coverage_cells_totals_uses_type_in_pct_class
     result = formatter.send(:coverage_cells, 85.0, 85, 100, type: :line, totals: true)
 
@@ -805,7 +800,7 @@ def test_coverage_cells_totals_uses_type_in_den_class
   def test_coverage_cells_totals_has_strong_classes
     result = formatter.send(:coverage_cells, 85.0, 85, 100, type: :line, totals: true)
 
-    assert_includes result, "strong t-totals__line-pct"
+    assert_includes result, "cell--coverage strong t-totals__line-pct"
     assert_includes result, "strong t-totals__line-num"
     assert_includes result, "strong t-totals__line-den"
   end
@@ -844,7 +839,8 @@ def test_coverage_cells_exact_pct_format
   def test_coverage_cells_totals_pct_value_present
     result = formatter.send(:coverage_cells, 85.0, 85, 100, type: :line, totals: true)
 
-    assert_match(%r{<td class="cell--pct[^"]*">85\.00%</td>}, result)
+    assert_includes result, "85.00%"
+    assert_includes result, "coverage-pct"
   end
 
   # -- coverage_header_cells tests --------------------------------------------
@@ -889,10 +885,11 @@ def test_coverage_header_cells_contains_input_filter
     assert_includes result, "col-filter__value"
   end
 
-  def test_coverage_header_cells_has_coverage_colspan
+  def test_coverage_header_cells_has_no_colspan
     result = formatter.send(:coverage_header_cells, "Line", :line, "Covered", "Total")
 
-    assert_includes result, 'colspan="2"'
+    refute_includes result, "colspan"
+    assert_includes result, "cell--coverage"
   end
 
   def test_coverage_header_cells_type_appears_in_both_filter_elements