From 608f0b70055d9f2e4840e8d48719c412942f7078 Mon Sep 17 00:00:00 2001
From: Mitchell-Johnson <mitchelljoho@gmail.com>
Date: Fri, 25 Sep 2026 00:17:09 -0700
Subject: [PATCH] docker: stack Inspect one property per row

Inspect's values are long paths, network names and env lists. In a two-column
grid on one line each they were half truncated and read as columns of
unrelated things. One per row, label above value, wrapping instead of an
ellipsis. Mounts are one block rather than a repeated "Mount" label.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 web/src/Docker.tsx | 6 +++---
 web/src/styles.css | 9 +++++++++
 2 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/web/src/Docker.tsx b/web/src/Docker.tsx
index 2a2cc93..b2f249a 100644
--- a/web/src/Docker.tsx
+++ b/web/src/Docker.tsx
@@ -99,14 +99,14 @@ function Detail({ c, live, onBack, onChanged }: { c: DockerContainer; live: Reco
       {tab === 'health' && <Health id={c.name} />}
       {tab === 'events' && <Events id={c.name} />}
       {tab === 'inspect' && (!info ? <Loading label="Inspecting…" /> : (
-        <div className="props">
+        <div className="props stacked">
           <div><span className="k">Restarts</span><span>{String(info.restart || 'no')} policy · restarted {String(info.restarts ?? 0)}×</span></div>
           <div><span className="k">Network</span><span className="mono small">{Object.keys((info.networks as object) ?? {}).join(', ') || String(info.network_mode)}</span></div>
           {Number(info.memory_limit) > 0 && <div><span className="k">Mem limit</span><span>{fmtValue(Number(info.memory_limit), 'B')}</span></div>}
           {!!info.error && <div><span className="k">Error</span><span className="warn-text">{String(info.error)}</span></div>}
           {!!info.compose_file && <div><span className="k">Compose</span><span className="mono small">{String(info.compose_file)}</span></div>}
-          {mounts.map((m) => <div key={m.Destination}><span className="k">Mount</span><span className="mono small">{m.Source} → {m.Destination}{m.RW ? '' : ' (ro)'}</span></div>)}
-          <div><span className="k">Env</span><span className="mono small muted">{((info.env_names as string[]) ?? []).join('  ')} <span className="muted">(names only)</span></span></div>
+          {mounts.length > 0 && <div><span className="k">Mounts</span><span className="mono small">{mounts.map((m) => <div key={m.Destination}>{m.Source} → {m.Destination}{m.RW ? '' : ' (read only)'}</div>)}</span></div>}
+          <div><span className="k">Env <span className="muted">names only</span></span><span className="mono small muted">{((info.env_names as string[]) ?? []).join('  ') || '—'}</span></div>
         </div>
       ))}
       {limits && <LimitsDialog c={c} info={info} onClose={() => setLimits(false)} onSaved={() => { setLimits(false); onChanged() }} />}
diff --git a/web/src/styles.css b/web/src/styles.css
index f046f2a..5e1450a 100644
--- a/web/src/styles.css
+++ b/web/src/styles.css
@@ -168,6 +168,15 @@ button { font: inherit; color: inherit; background: none; border: 0; cursor: poi
 .props { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 4px 16px; font-size: 13px; }
 .props > div { display: flex; gap: 8px; min-width: 0; } .props .k { color: var(--muted); width: 80px; flex-shrink: 0; }
 .props span:not(.k) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mono { font-family: ui-monospace, monospace; font-size: 12px; }
+/* One property per row, label above its value. For panes like Inspect, whose values are
+   long paths and lists — side by side they were half truncated and read as columns. */
+.props.stacked { grid-template-columns: 1fr; gap: 10px 0; }
+.props.stacked > div { flex-direction: column; gap: 2px; }
+.props.stacked .k { width: auto; font-size: 11px; letter-spacing: .04em; text-transform: uppercase; }
+.props.stacked span:not(.k) { overflow: visible; white-space: normal; overflow-wrap: anywhere; }
+.props.stacked .k { text-transform: none; } .props.stacked > div > .k { text-transform: uppercase; }
+.props.stacked .k .muted { text-transform: none; letter-spacing: 0; }
+.props.stacked span:not(.k) > div + div { margin-top: 3px; }
 .tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--border); }
 .tabs button { padding: 6px 12px; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; }
 .tabs button.on { color: var(--fg); border-bottom-color: var(--accent); }