gui: stack consumers page stream blocks full-width (fix table overflow)

The 7-column consumer tables were rendering inside the shared `.cols`
multi-column grid (minmax 240px), causing every table to overflow its
card horizontally — right-hand columns and Delete buttons appeared
outside the card border, visually detached from their rows.

Fix: replace `.cols` with a new `.consumer-streams` flex-column
container (consumers_list.html only) so each stream block is full-width
and stacked vertically.  Added a `.consumer-table-wrap` div with
`overflow-x: auto` as a safety net for narrow viewports.  The shared
`.cols` class and the streams page are untouched.  All existing content
is preserved: 7 columns, None-guards (em dash), the `central-owned`
label for archive-* consumers (no Delete button), the red Delete form +
CSRF for deletable consumers, the legend, and the "(no consumers)"
empty state.

Version bump 0.14.7 → 0.14.8.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
Ubuntu 2026-06-29 03:37:18 +00:00
commit 6b76b1f549
3 changed files with 13 additions and 2 deletions

View file

@ -4,7 +4,7 @@ build-backend = "hatchling.build"
[project]
name = "central"
version = "0.14.7"
version = "0.14.8"
requires-python = ">=3.12,<3.13"
description = "Data hub spine — adapters, bus, archive."
readme = "README.md"

View file

@ -194,6 +194,15 @@ button:disabled, .btn:disabled { opacity: 0.5; cursor: not-allowed; }
.cols { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
/* ─── consumers page: full-width stacked stream blocks ──────────────────── */
/* Unlike .cols (multi-column grid used by streams/dashboard), these stream
blocks need the full page width because each table has 7 columns. */
.consumer-streams { display: flex; flex-direction: column; gap: 16px; }
.consumer-streams > article { margin-bottom: 0; width: 100%; }
/* Safety net: scroll horizontally on very narrow viewports instead of
overflowing the card border. Default desktop view shows the full table. */
.consumer-table-wrap { overflow-x: auto; }
/* cards (formerly the framework's <article>) */
article, .card {
border: 1px solid var(--rule);

View file

@ -8,7 +8,7 @@
<em>Pending</em> and zero <em>Waiting</em> has accumulated unacknowledged messages and
has no active subscriber — it is safe to delete if it is not a central-owned consumer.</p>
<div class="cols">
<div class="consumer-streams">
{% for stream in streams %}
<article>
<header><strong>{{ stream.stream }}</strong></header>
@ -16,6 +16,7 @@ has no active subscriber — it is safe to delete if it is not a central-owned c
{% if stream.error %}
<p class="error" style="margin-top: 0.5rem;">({{ stream.error }})</p>
{% elif stream.consumers %}
<div class="consumer-table-wrap">
<table style="width: 100%; border-collapse: collapse; margin-top: 0.5rem;">
<thead>
<tr>
@ -52,6 +53,7 @@ has no active subscriber — it is safe to delete if it is not a central-owned c
{% endfor %}
</tbody>
</table>
</div>
{% else %}
<p class="muted" style="margin-top: 0.5rem;">(no consumers)</p>
{% endif %}