From 0698f0741590eb5b9dfe6ff7aa2de5eef7c3b7a3 Mon Sep 17 00:00:00 2001
From: Mitchell-Johnson <mitchelljoho@gmail.com>
Date: Sun, 25 Oct 2026 22:37:22 -0700
Subject: [PATCH] ZFS tab: the write path's details one per row, wrapping
 instead of cut off

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

diff --git a/web/src/ZFS.tsx b/web/src/ZFS.tsx
index 266b793..93b279a 100644
--- a/web/src/ZFS.tsx
+++ b/web/src/ZFS.tsx
@@ -387,7 +387,7 @@ function MoverLine({ l }: { l: Landing }) {
   const frac = m.current_size > 0 ? m.partial / m.current_size : 0
   return (
     <>
-      <div className="props" style={{ marginTop: 6 }}>
+      <div className="props rows" style={{ marginTop: 6 }}>
         <div><span className="k">Mover</span><span>
           <span className={'badge ' + (m.state === 'moving' ? 'on' : m.state === 'idle' ? '' : 'warn')}>{m.state}</span>
           {' '}{m.state === 'moving' && m.batch_files > 1 ? `batch of ${m.batch_files} files, ${fmtBytes(m.batch_bytes)}` : m.state === 'holding' ? 'a mount it needs is missing — waiting' : m.state === 'stopped' ? `no word since ${ago(m.updated_ms)}` : `queue ${m.queue}`}
@@ -417,7 +417,7 @@ function LandingBlockInner({ l, pending, inn, drain }: { l: Landing; pending: nu
         <span className="num">{l.pending_files ? `${fmtN(l.pending_files)}${l.pending_partial ? '+' : ''} waiting · ${fmtBytes(l.pending_bytes)}` : 'nothing waiting'}</span>
       </div>
       <Meter frac={fill} />
-      <div className="props" style={{ marginTop: 6 }}>
+      <div className="props rows" style={{ marginTop: 6 }}>
         <div><span className="k">Waiting</span><span>{l.pending_files ? `${fmtN(l.pending_files)}${l.pending_partial ? '+' : ''} files, ${fmtBytes(l.pending_bytes)} · oldest landed ${ago(l.oldest_ms)}` : 'nothing — everything that landed is on the pool'}<span className="muted small"> · counted {ago(l.counted_ms)}</span></span></div>
         <div><span className="k">Arriving</span><span>{fmtRate(l.in_bps)}{l.device ? <span className="muted small"> · writes to {l.device}</span> : ''}</span></div>
         <div><span className="k">To the pool</span><span>{fmtRate(l.drain_bps)}{l.pending_bytes > 0 ? ` · ${Number.isFinite(eta) ? `clear in about ${dur(eta)}` : 'not draining right now'}` : ''}</span></div>
@@ -470,7 +470,7 @@ function WritePath({ w, p, h }: { w: ZFSWrites; p: PoolWrites; h: WHist }) {
           ]} format={fmtRate} height={44} />
         </div>
       </div>
-      <div className="props" style={{ marginTop: 8 }}>
+      <div className="props rows" style={{ marginTop: 8 }}>
         <div><span className="k">In RAM</span><span title="dirty data: written by programs, not yet on the disks. For all pools together — ZFS keeps no live per-pool figure">{fmtBytes(w.dirty)} waiting · holds up to {fmtBytes(w.limit)} {w.limit < w.dirty_max ? `(half the ARC target; zfs_dirty_data_max is ${fmtBytes(w.dirty_max)})` : '(zfs_dirty_data_max)'}</span></div>
         <div><span className="k">Throttle</span><span title="past zfs_delay_min_dirty_percent of the buffer, ZFS makes each write wait a little so the disks can catch up; at the limit, writes stop until a sync frees room">
           {w.over_max_per_sec > 0 ? <span className="warn-text">{fmtN(w.over_max_per_sec)}/s writes stopped at the limit</span> : w.delayed_per_sec > 0 ? <span className="warn-text">slowing {fmtN(w.delayed_per_sec)} writes/s — the disks are the limit now</span> : 'not slowing anything'}
diff --git a/web/src/styles.css b/web/src/styles.css
index c243591..ea2ccb0 100644
--- a/web/src/styles.css
+++ b/web/src/styles.css
@@ -197,6 +197,11 @@ button { font: inherit; color: inherit; background: none; border: 0; cursor: poi
 .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. */
+/* One property per row, label beside its value, the value wrapping rather than cut off: for
+   sentences, like the ZFS tab's write path, that columns would truncate. */
+.props.rows { grid-template-columns: minmax(0, 1fr); gap: 3px 0; }
+.props.rows .k { width: 96px; }
+.props.rows span:not(.k) { overflow: visible; white-space: normal; overflow-wrap: anywhere; }
 .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; }