From 583dc16c9bc37781b96bab937f7aeb31602131d1 Mon Sep 17 00:00:00 2001
From: Paul Trowbridge <paul@hptrow.me>
Date: Thu, 4 Jun 2026 10:52:23 -0400
Subject: [PATCH] web: tighten module list column widths and fix form input
 overflow

- Size all table columns to fit content (em-based) rather than loose percentages
- Add white-space:nowrap to groups header and last-run cells
- Sticky topbar and panel header so New Module button stays visible while scrolling
- Scope min-width:0 to label.field inputs so they don't blow past two-col grid borders

Co-Authored-By: Claude Sonnet 4.6 (1M context) <noreply@anthropic.com>
---
 pipekit/web/static/style.css             | 12 +++++++++++-
 pipekit/web/templates/modules_index.html | 18 +++++++++---------
 2 files changed, 20 insertions(+), 10 deletions(-)

diff --git a/pipekit/web/static/style.css b/pipekit/web/static/style.css
index 02d2315..3e2b550 100644
--- a/pipekit/web/static/style.css
+++ b/pipekit/web/static/style.css
@@ -5,6 +5,7 @@
    - Layout directs flow; nothing floats. */
 
 :root {
+    --topbar-h: 2.65rem;
     --bg: #111418;
     --surface: #181c22;
     --border: #2a3038;
@@ -39,6 +40,9 @@ header.topbar {
     padding: 0.6rem 1.2rem;
     background: var(--surface);
     border-bottom: 1px solid var(--border-strong);
+    position: sticky;
+    top: 0;
+    z-index: 100;
 }
 header.topbar .brand {
     font-weight: 700;
@@ -62,7 +66,6 @@ header.topbar nav a:hover {
 header.topbar .right { margin-left: auto; color: var(--text-muted); font-size: 12px; }
 
 main {
-    max-width: 1200px;
     margin: 1rem auto;
     padding: 0 1.2rem;
 }
@@ -83,6 +86,9 @@ main {
     display: flex;
     align-items: center;
     gap: 0.6rem;
+    position: sticky;
+    top: var(--topbar-h);
+    z-index: 99;
 }
 .panel > header .subtitle {
     color: var(--text-muted);
@@ -252,6 +258,10 @@ label.field {
     margin-bottom: 0.6rem;
 }
 label.field .help { grid-column: 2; color: var(--text-muted); font-size: 12px; }
+/* Inputs inside label.field must not overflow their grid cell — the global
+   min-width:14rem is correct for standalone use but blows past narrow containers. */
+label.field input[type="text"], label.field input[type="number"], label.field input[type="password"],
+label.field select, label.field textarea { min-width: 0; width: 100%; }
 
 /* Step indicator */
 .steps {
diff --git a/pipekit/web/templates/modules_index.html b/pipekit/web/templates/modules_index.html
index 3435fa6..81b65a7 100644
--- a/pipekit/web/templates/modules_index.html
+++ b/pipekit/web/templates/modules_index.html
@@ -18,14 +18,14 @@
                 <table class="grid">
                     <thead>
                         <tr>
-                            <th style="width:30%">name</th>
-                            <th>strategy</th>
-                            <th>dest</th>
-                            <th>groups</th>
-                            <th>last run</th>
-                            <th style="width:9em">status</th>
-                            <th style="width:7em">rows</th>
-                            <th></th>
+                            <th style="width:12em">name</th>
+                            <th style="width:7em">strategy</th>
+                            <th style="width:14em">dest</th>
+                            <th style="width:13em">groups</th>
+                            <th style="width:11em;white-space:nowrap">last run</th>
+                            <th style="width:8em">status</th>
+                            <th style="width:6em">rows</th>
+                            <th style="width:12em"></th>
                         </tr>
                     </thead>
                     <tbody>
@@ -39,7 +39,7 @@
                                 <a href="/groups/{{ g.group_id }}" class="tag">{{ g.group_name }}</a>
                                 {% endfor %}
                             </td>
-                            <td class="mono">{{ m.last_run_at | localtime }}</td>
+                            <td class="mono" style="white-space:nowrap">{{ m.last_run_at | localtime }}</td>
                             {% with module=m %}{% include "_module_status_pill.html" %}{% endwith %}
                             <td class="mono">{{ m.last_row_count if m.last_row_count is not none else "—" }}</td>
                             <td style="text-align:right">