Improve table layout: compact data columns, spacer gap, move Size to end

- Add spacer column between label and data columns to absorb extra
  width on wide screens, keeping data columns at natural width
- Move Size column to end of tests table on index page
- Increase cell padding for less cramped appearance

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: nomeata

templates/checker.html

@@ -95,6 +95,7 @@ <h2>Checker "{{ checker.name }}"</h2>
         <thead>
             <tr>
                 <th>Test</th>
+                <th class="spacer-col"></th>
                 <th class="text-center">Expected</th>
                 <th class="text-center">Result</th>
                 {{ perf_header() }}
@@ -104,6 +105,7 @@ <h2>Checker "{{ checker.name }}"</h2>
             {% for result in results %}
             <tr>
                 <td><a href="#test-{{ result.test }}">{{ result.test }}</a></td>
+                <td class="spacer-col"></td>
                 <td class="text-center">
                     {% if result.expected == 'accept' %}👍{% elif result.expected == 'reject' %}✋{% else %}⚠️ {{ result.expected }}{% endif %}
                 </td>

templates/index.html

@@ -49,6 +49,7 @@ <h3>Checkers</h3>
             <tr>
                 <th>Checker</th>
                 <th>Version</th>
+                <th class="spacer-col"></th>
                 <th class="text-center" title="Correctly accepted valid proofs">👍</th>
                 <th class="text-center" title="Correctly rejected invalid proofs">✋</th>
                 <th class="text-center" title="Tests declined to process or crashed">🚫</th>
@@ -61,6 +62,7 @@ <h3>Checkers</h3>
             <tr>
                 <td><a href="checker/{{ checker.name }}/">{{ checker.name }}</a></td>
                 <td>{{ checker.version }}</td>
+                <td class="spacer-col"></td>
                 <td class="text-center {% if checker.stats.accept_correct == checker.stats.accept_total and checker.stats.accept_total > 0 %}bg-success{% elif checker.stats.accept_correct < checker.stats.accept_total %}bg-error{% endif %}">
                     {{ checker.stats.accept_correct }}/{{ checker.stats.accept_total }}
                 </td>
@@ -106,7 +108,7 @@ <h3>Tests</h3>
         <thead>
             <tr>
                 <th style="vertical-align: bottom;">Name</th>
-                <th class="text-right" style="vertical-align: bottom;">Size</th>
+                <th class="spacer-col"></th>
                 {% for checker in checkers %}
                 {% if checker.get('serious', true) and checker.name == 'official' %}
                 <th class="text-center official-column" style="vertical-align: bottom;"><a href="checker/{{ checker.name }}/" class="rotated-header">{{ checker.name }}</a></th>
@@ -117,13 +119,14 @@ <h3>Tests</h3>
                 <th class="text-center" style="vertical-align: bottom;"><a href="checker/{{ checker.name }}/" class="rotated-header">{{ checker.name }}</a></th>
                 {% endif %}
                 {% endfor %}
+                <th class="text-right" style="vertical-align: bottom;">Size</th>
             </tr>
         </thead>
         <tbody>
             {% for test in tests %}
             <tr>
                 <td><a href="test/{{ test.name }}/">{{ test.name }}</a></td>
-                <td class="text-right">{{ test.size_str }}</td>
+                <td class="spacer-col"></td>
                 {% for checker in checkers %}
                     {% if checker.get('serious', true) and checker.name == 'official' %}
                     {% set key = (checker.name, test.name) %}
@@ -184,6 +187,7 @@ <h3>Tests</h3>
                     </td>
                     {% endif %}
                 {% endfor %}
+                <td class="text-right">{{ test.size_str }}</td>
             </tr>
             {% endfor %}
         </tbody>

templates/static/style.css

@@ -4,4 +4,14 @@
 
 :root {
 --font-family-mono: 'JuliaMono', monospace;
+}
+
+/* All columns shrink to fit content; .spacer-col absorbs extra width */
+table th, table td {
+  white-space: nowrap;
+  padding-left: 0.8em;
+  padding-right: 0.8em;
+}
+th.spacer-col, td.spacer-col {
+  width: 100%;
 }

templates/test.html

@@ -52,6 +52,7 @@ <h2>Test "{{ test.name }}"</h2>
         <thead>
             <tr>
                 <th>Checker</th>
+                <th class="spacer-col"></th>
                 <th class="text-center">Result</th>
                 {{ perf_header() }}
             </tr>
@@ -60,6 +61,7 @@ <h2>Test "{{ test.name }}"</h2>
             {% for result in results %}
             <tr>
                 <td><a href="{{ root_path }}checker/{{ result.checker }}/#test-{{ test.name }}">{{ result.checker }}</a></td>
+                <td class="spacer-col"></td>
                 {{ result_status_cell(test.outcome, result.status) }}
                 {{ perf_cells(result, test.outcome, instructions_per_second, format_duration, format_memory, format_instructions, convert_instructions_to_time) }}
             </tr>