From a84ac0f911a4da2762ed9b0233a03071c9f8fdaf Mon Sep 17 00:00:00 2001
From: malice <matt@echo6.co>
Date: Sun, 28 Jun 2026 21:38:13 -0600
Subject: [PATCH] gui: stack consumers page stream blocks full-width (fix table
 overflow) (#118)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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: Ubuntu <zvx@cortex.echo6.co>
Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 pyproject.toml                                | 2 +-
 src/central/gui/static/css/central.css        | 9 +++++++++
 src/central/gui/templates/consumers_list.html | 4 +++-
 3 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/pyproject.toml b/pyproject.toml
index 77c5b8d..ffb56d9 100644
--- a/pyproject.toml
+++ b/pyproject.toml
@@ -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"
diff --git a/src/central/gui/static/css/central.css b/src/central/gui/static/css/central.css
index 735ec39..2387a5c 100644
--- a/src/central/gui/static/css/central.css
+++ b/src/central/gui/static/css/central.css
@@ -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);
diff --git a/src/central/gui/templates/consumers_list.html b/src/central/gui/templates/consumers_list.html
index 252c1c4..11cfac8 100644
--- a/src/central/gui/templates/consumers_list.html
+++ b/src/central/gui/templates/consumers_list.html
@@ -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 %}