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

@@ -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>)}
+          {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><span className="mono small muted">{((info.env_names as string[]) ?? []).join('  ')} <span className="muted">(names only)</span></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() }} />}

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); }