Skip to content

Commit 638c2f2

Browse files
ElliotGestrinElliotGestrin
committed
Better repair tab styling, especially for dark mode
1 parent f2bf52c commit 638c2f2

2 files changed

Lines changed: 28 additions & 23 deletions

File tree

‎scripts/static/js/sidebar.js‎

Lines changed: 13 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -461,20 +461,21 @@ export function showSidebarContent(d, fromHover = false) {
461461
const history = (d.metadata && d.metadata.repair_history) || [];
462462
// Attempt table
463463
const tableRows = history.map(function(entry) {
464-
const bg = entry.succeeded ? '#f2fff2' : '#fff0f0';
465-
const result = entry.succeeded ? '✓ succeeded' : '✗ failed';
466-
const errText = escapeHtml(entry.error || entry.repair_error || '');
467-
return '<tr style="background:' + bg + ';">' +
468-
'<td style="border:1px solid #ccc;padding:3px 7px;text-align:center;">' + (entry.attempt || '') + '</td>' +
469-
'<td style="border:1px solid #ccc;padding:3px 7px;">' + result + '</td>' +
470-
'<td style="border:1px solid #ccc;padding:3px 7px;font-size:0.85em;white-space:pre-wrap;word-break:break-all;">' + errText + '</td>' +
464+
const badge = entry.succeeded
465+
? '<span style="display:inline-block;padding:1px 7px;border-radius:3px;background:#1a7f3c;color:#fff;font-weight:600;font-size:0.88em;">✓ ok</span>'
466+
: '<span style="display:inline-block;padding:1px 7px;border-radius:3px;background:#b91c1c;color:#fff;font-weight:600;font-size:0.88em;">✗ fail</span>';
467+
const errText = escapeHtml(entry.error || entry.repair_error || '—');
468+
return '<tr style="border-bottom:1px solid #ddd;">' +
469+
'<td style="padding:5px 10px;text-align:center;font-weight:600;color:#444;">' + (entry.attempt || '') + '</td>' +
470+
'<td style="padding:5px 10px;">' + badge + '</td>' +
471+
'<td style="padding:5px 10px;font-size:0.83em;white-space:pre-wrap;word-break:break-all;color:#333;font-family:monospace;">' + errText + '</td>' +
471472
'</tr>';
472473
}).join('');
473-
const tableHtml = '<table style="border-collapse:collapse;width:100%;margin-bottom:0.7em;font-size:0.91em;">' +
474-
'<thead><tr style="background:#e8e8e8;">' +
475-
'<th style="border:1px solid #ccc;padding:3px 7px;">Attempt</th>' +
476-
'<th style="border:1px solid #ccc;padding:3px 7px;">Result</th>' +
477-
'<th style="border:1px solid #ccc;padding:3px 7px;">Error</th>' +
474+
const tableHtml = '<table style="border-collapse:collapse;width:100%;margin-bottom:0.9em;font-size:0.91em;background:#fff;border:1px solid #ddd;border-radius:4px;overflow:hidden;">' +
475+
'<thead><tr style="background:#2d3748;color:#fff;">' +
476+
'<th style="padding:5px 10px;font-weight:600;text-align:center;width:70px;">#</th>' +
477+
'<th style="padding:5px 10px;font-weight:600;width:90px;">Status</th>' +
478+
'<th style="padding:5px 10px;font-weight:600;">Compiler output / notes</th>' +
478479
'</tr></thead><tbody>' + tableRows + '</tbody></table>';
479480
const diffHtml = originalCode
480481
? '<div style="margin-bottom:0.3em;color:#666;font-size:0.9em;">Diff: original LLM output → repaired code</div>' +

‎scripts/templates/program_page.html‎

Lines changed: 15 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -46,23 +46,27 @@ <h3>Original LLM-generated code (before repair):</h3>
4646
<pre>{{ program_data.metadata.original_llm_code }}</pre>
4747
{% endif %}
4848
<h3>Repair attempts:</h3>
49-
<table style="border-collapse:collapse;width:100%;">
49+
<table style="border-collapse:collapse;width:100%;border:1px solid #ddd;border-radius:4px;overflow:hidden;">
5050
<thead>
51-
<tr style="background:#e8e8e8;">
52-
<th style="border:1px solid #ccc;padding:6px 10px;">Attempt</th>
53-
<th style="border:1px solid #ccc;padding:6px 10px;">Result</th>
54-
<th style="border:1px solid #ccc;padding:6px 10px;">Error</th>
51+
<tr style="background:#2d3748;color:#fff;">
52+
<th style="padding:6px 10px;font-weight:600;text-align:center;width:70px;">#</th>
53+
<th style="padding:6px 10px;font-weight:600;width:100px;">Status</th>
54+
<th style="padding:6px 10px;font-weight:600;">Compiler output / notes</th>
5555
</tr>
5656
</thead>
5757
<tbody>
5858
{% for entry in program_data.metadata.repair_history %}
59-
<tr style="{{ 'background:#f2fff2;' if entry.succeeded else 'background:#fff0f0;' }}">
60-
<td style="border:1px solid #ccc;padding:6px 10px;text-align:center;">{{ entry.attempt }}</td>
61-
<td style="border:1px solid #ccc;padding:6px 10px;text-align:center;">
62-
{{ '✓ succeeded' if entry.succeeded else '✗ failed' }}
59+
<tr style="border-bottom:1px solid #ddd;">
60+
<td style="padding:6px 10px;text-align:center;font-weight:600;color:#444;">{{ entry.attempt }}</td>
61+
<td style="padding:6px 10px;">
62+
{% if entry.succeeded %}
63+
<span style="display:inline-block;padding:1px 8px;border-radius:3px;background:#1a7f3c;color:#fff;font-weight:600;font-size:0.88em;">✓ ok</span>
64+
{% else %}
65+
<span style="display:inline-block;padding:1px 8px;border-radius:3px;background:#b91c1c;color:#fff;font-weight:600;font-size:0.88em;">✗ fail</span>
66+
{% endif %}
6367
</td>
64-
<td style="border:1px solid #ccc;padding:6px 10px;">
65-
<pre style="margin:0;">{{ entry.error or entry.repair_error or '' }}</pre>
68+
<td style="padding:6px 10px;">
69+
<pre style="margin:0;font-size:0.85em;color:#333;">{{ entry.error or entry.repair_error or '—' }}</pre>
6670
</td>
6771
</tr>
6872
{% endfor %}

0 commit comments

Comments
 (0)