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>
This commit is contained in:
parent
ba48b2ca2b
commit
583dc16c9b
@ -5,6 +5,7 @@
|
|||||||
- Layout directs flow; nothing floats. */
|
- Layout directs flow; nothing floats. */
|
||||||
|
|
||||||
:root {
|
:root {
|
||||||
|
--topbar-h: 2.65rem;
|
||||||
--bg: #111418;
|
--bg: #111418;
|
||||||
--surface: #181c22;
|
--surface: #181c22;
|
||||||
--border: #2a3038;
|
--border: #2a3038;
|
||||||
@ -39,6 +40,9 @@ header.topbar {
|
|||||||
padding: 0.6rem 1.2rem;
|
padding: 0.6rem 1.2rem;
|
||||||
background: var(--surface);
|
background: var(--surface);
|
||||||
border-bottom: 1px solid var(--border-strong);
|
border-bottom: 1px solid var(--border-strong);
|
||||||
|
position: sticky;
|
||||||
|
top: 0;
|
||||||
|
z-index: 100;
|
||||||
}
|
}
|
||||||
header.topbar .brand {
|
header.topbar .brand {
|
||||||
font-weight: 700;
|
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; }
|
header.topbar .right { margin-left: auto; color: var(--text-muted); font-size: 12px; }
|
||||||
|
|
||||||
main {
|
main {
|
||||||
max-width: 1200px;
|
|
||||||
margin: 1rem auto;
|
margin: 1rem auto;
|
||||||
padding: 0 1.2rem;
|
padding: 0 1.2rem;
|
||||||
}
|
}
|
||||||
@ -83,6 +86,9 @@ main {
|
|||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 0.6rem;
|
gap: 0.6rem;
|
||||||
|
position: sticky;
|
||||||
|
top: var(--topbar-h);
|
||||||
|
z-index: 99;
|
||||||
}
|
}
|
||||||
.panel > header .subtitle {
|
.panel > header .subtitle {
|
||||||
color: var(--text-muted);
|
color: var(--text-muted);
|
||||||
@ -252,6 +258,10 @@ label.field {
|
|||||||
margin-bottom: 0.6rem;
|
margin-bottom: 0.6rem;
|
||||||
}
|
}
|
||||||
label.field .help { grid-column: 2; color: var(--text-muted); font-size: 12px; }
|
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 */
|
/* Step indicator */
|
||||||
.steps {
|
.steps {
|
||||||
|
|||||||
@ -18,14 +18,14 @@
|
|||||||
<table class="grid">
|
<table class="grid">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th style="width:30%">name</th>
|
<th style="width:12em">name</th>
|
||||||
<th>strategy</th>
|
<th style="width:7em">strategy</th>
|
||||||
<th>dest</th>
|
<th style="width:14em">dest</th>
|
||||||
<th>groups</th>
|
<th style="width:13em">groups</th>
|
||||||
<th>last run</th>
|
<th style="width:11em;white-space:nowrap">last run</th>
|
||||||
<th style="width:9em">status</th>
|
<th style="width:8em">status</th>
|
||||||
<th style="width:7em">rows</th>
|
<th style="width:6em">rows</th>
|
||||||
<th></th>
|
<th style="width:12em"></th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
@ -39,7 +39,7 @@
|
|||||||
<a href="/groups/{{ g.group_id }}" class="tag">{{ g.group_name }}</a>
|
<a href="/groups/{{ g.group_id }}" class="tag">{{ g.group_name }}</a>
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
</td>
|
</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 %}
|
{% 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 class="mono">{{ m.last_row_count if m.last_row_count is not none else "—" }}</td>
|
||||||
<td style="text-align:right">
|
<td style="text-align:right">
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user