fix(traefik): bandwidth and 4xx sparklines; cards in a grid with a gap; slow rows/widget log their phases (#5355)

The operator: "load was still slow" (the access log: 7.6-8.0 s on every
poll, warm), "why do the bandwidth and 4xx sections not also get
sparklines", and "no gap between the widgets". router_history reads the
4xx share and bandwidth too, and the card draws all five lines. The
problem cards sit in .node-grid with a bottom margin; a CSS column box
dropped the last card's margin. rows() and widget() log each phase when a
request passes 1 s, so the slow query names itself on the next load.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

plugins/traefik/templates/traefik/rows.html

@@ -18,7 +18,7 @@
 </div>
 
 {% macro router_card(r) %}
-<div class="card" style="break-inside:avoid;margin-bottom:1rem;">
+<div class="card">
     <div class="host-health-head">
       {{ status_badge(r.state, "Failing" if r.state == 'crit' else "Warning") }}
       <h3 class="section-title" style="margin:0;word-break:break-all;">{{ r.name }}</h3>
@@ -26,10 +26,10 @@
     <p class="problem-detail" style="margin-bottom:0.5rem;">{{ r.why }}</p>
     <table class="table" style="font-size:0.85rem;">
         <tr><td class="field-hint">Req/s</td><td>{{ "%.2f"|format(r.latest.request_rate) }}</td><td>{{ r.sparkline_req|safe }}</td></tr>
-        <tr><td class="field-hint">Bandwidth</td><td>{{ r.latest.response_bytes_rate|rate }}</td><td></td></tr>
+        <tr><td class="field-hint">Bandwidth</td><td>{{ r.latest.response_bytes_rate|rate }}</td><td>{{ r.sparkline_bytes|safe }}</td></tr>
         <tr><td class="field-hint">p95</td><td class="tone-{{ status_info(status_class(r.latest.latency_p95_ms, 'latency'))[0] }}">{{ "%.0f"|format(r.latest.latency_p95_ms) }} ms</td><td>{{ r.sparkline_p95|safe }}</td></tr>
         <tr><td class="field-hint">p99</td><td>{{ "%.0f"|format(r.latest.latency_p99_ms) }} ms</td><td></td></tr>
-        <tr><td class="field-hint">4xx</td><td class="{{ 'tone-warn' if r.latest.error_rate_4xx_pct > error_4xx else '' }}">{{ "%.1f"|format(r.latest.error_rate_4xx_pct) }}%</td><td></td></tr>
+        <tr><td class="field-hint">4xx</td><td class="{{ 'tone-warn' if r.latest.error_rate_4xx_pct > error_4xx else '' }}">{{ "%.1f"|format(r.latest.error_rate_4xx_pct) }}%</td><td>{{ r.sparkline_4xx|safe }}</td></tr>
         <tr><td class="field-hint">5xx</td><td class="{{ 'tone-crit' if r.latest.error_rate_5xx_pct > error_5xx else '' }}">{{ "%.1f"|format(r.latest.error_rate_5xx_pct) }}%</td><td>{{ r.sparkline_5xx|safe }}</td></tr>
     </table>
     <div class="field-hint" style="margin-top:0.5rem;">Last scraped {{ r.latest.scraped_at|ago }}</div>
@@ -39,7 +39,9 @@
 {% if problems or healthy or gone or certs or old_certs %}
 {# ── Routers that need attention ─────────────────────────────────────────── #}
 {% if problems %}
-<div style="column-width:340px;column-gap:1rem;">
+{# A grid, not CSS columns: a column box drops its last card's bottom margin,
+   which left the cards touching the section below (#5214). #}
+<div class="node-grid" style="margin-bottom:1rem;">
   {% for r in problems %}{{ router_card(r) }}{% endfor %}
 </div>
 {% endif %}