ZFS tab: pools, caching tiers and writes full width; write and drain rates measured between real updates

A txg records its bytes only when it syncs and the mover reports every 2 s, so a per-sample delta
read 0 most of the time. Rates are now taken over the gap between syncs (or mover updates) and held
until the next one.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

web/src/ZFS.tsx

@@ -568,13 +568,13 @@ function ARCSection() {
           <span><b>All reads</b></span><span className="num"><b>{fmtPct(hitPct(L.Hits, L.Misses))}</b></span><span className="num">{fmtN(L.Hits)}</span><span className="num">{fmtN(L.Misses)}</span>
         </div>
       </section>
-      {d.pools.length > 0 && <div className="cards" style={{ marginTop: 8 }}>{d.pools.map((p) => <PoolTiers key={p.pool} p={p} v={v} />)}</div>}
+      {d.pools.length > 0 && <div className="cards full" style={{ marginTop: 8 }}>{d.pools.map((p) => <PoolTiers key={p.pool} p={p} v={v} />)}</div>}
       {v.writes && v.writes.pools.length > 0 && (
         <>
           <div className="dash-bar" style={{ marginTop: 12 }}><h2 className="section">Writes</h2><span className="spacer" />
             <span className="muted small">what is waiting to reach each pool, and how fast it is getting there</span>
           </div>
-          <div className="cards">{v.writes.pools.map((p) => <WritePath key={p.pool} w={v.writes!} p={p} h={whist} />)}</div>
+          <div className="cards full">{v.writes.pools.map((p) => <WritePath key={p.pool} w={v.writes!} p={p} h={whist} />)}</div>
         </>
       )}
     </>
@@ -607,7 +607,7 @@ export default function ZFS() {
     <div className="dash">
       <div className="dash-bar"><h2 className="section">Pools</h2></div>
       {zfs.pools.length === 0 && <div className="notice">ZFS is present but no pools are imported.</div>}
-      <div className="cards">{zfs.pools.map((p) => <PoolCard key={p.name} p={p} onChanged={load} />)}</div>
+      <div className="cards full">{zfs.pools.map((p) => <PoolCard key={p.name} p={p} onChanged={load} />)}</div>
 
       <div className="dash-bar" style={{ marginTop: 12 }}><h2 className="section">Cache</h2><span className="spacer" />
         <span className="muted small">the ARC in RAM, and what each pool has in front of its disks</span>