# fix\(web\): task durations over an hour no longer wrap in the tasks panel · PR \#13472 · pingdotgg/t3code

[View on GitCafe](https://git.cafe/pingdotgg/t3code/pull/13472)

Repository: [pingdotgg/t3code](https://git.cafe/pingdotgg/t3code)

Visibility: public

State: merged

Source repository: Unavailable fork

Source branch: fix/tasks-panel-duration-wrap

Target branch: main

Head commit: 40410f7e59e95e0225e9eab9490e6d85a250cf22

[Discussion and reviews](https://git.cafe/pingdotgg/t3code/pull/13472)

[Commits](https://git.cafe/pingdotgg/t3code/pull/13472/commits?format=markdown)

[Files changed](https://git.cafe/pingdotgg/t3code/pull/13472/diffs?format=markdown)

## Description

---

Task durations over an hour could wrap onto two lines in the composer tasks panel. The duration now keeps a 48px minimum width and expands for longer values, preserving right alignment while the step label wraps beside it.

Fixes [#13447](https://github.com/pingdotgg/t3code/issues/13447). Preserves the task-row alignment from [#12165](https://github.com/pingdotgg/t3code/pull/12165). Original implementation by @jamesvillarrubia in this PR; retained after independent reassessment against current main.

Validation: file-scoped formatting and lint passed; independent Opus and Sol reviews found no defects. No new unit tests: duration formatting is already covered, and the change is visual layout only.

Live verification used the real integrated web app with an isolated plan fixture at 1280×800 and 390×844, with the task drawer expanded. No provider turn was started. The long duration changed from a wrapped 48×32px box to one line at about 59×16px; short durations and “now” stayed 48×16px. Long labels, missing durations, and opening/collapsing the drawer were also checked. This covers the shared web component used by the desktop renderer; no native Electron test is claimed.

Before — wide:

![Before: long task duration wraps at 1280px](https://gh-file-drop-api-prod-mi5fy3sowv63ufte.pinglabs.workers.dev/f/fd2993914ba83dda/before-desktop.png)

After — wide:

![After: long task duration stays on one line at 1280px](https://gh-file-drop-api-prod-mi5fy3sowv63ufte.pinglabs.workers.dev/f/83eb968f89fe0cbb/after-desktop.png)

Before — narrow:

![Before: task duration wraps at 390px](https://gh-file-drop-api-prod-mi5fy3sowv63ufte.pinglabs.workers.dev/f/1af4f56312d467bb/before-narrow.png)

After — narrow:

![After: task duration stays aligned at 390px](https://gh-file-drop-api-prod-mi5fy3sowv63ufte.pinglabs.workers.dev/f/d2ff04d4cc075804/after-narrow.png)

Prepared with Claude Opus 5.5, Claude Fable 5.1, and GPT-6.1 Sol via T3 Code, coordinated with Codex.

## Evidence

Captured by the maintainer evidence run (not the contributor screenshots). Before = merge-base on main [`8d3b061`](https://github.com/pingdotgg/t3code/commit/8d3b061121fe65669d5d43d011b48cd3027a4108), After = PR head [`40410f7`](https://github.com/pingdotgg/t3code/commit/40410f7e59e95e0225e9eab9490e6d85a250cf22). Real web app (dev server, isolated home, seeded plan fixture), whole expanded tasks panel. Diff0 = pixelmatch threshold 0 (amplified); DiffT = pixelmatch threshold 0.1. Pixel counts follow each diff link. Duration boxes are CSS px (w×h).

Environment: fs-08, Ubuntu 24.04.5 LTS, Node v24.22.1, headless Chromium 148.0.7778.96 (Playwright), DPR 2, reduced motion, Date frozen at 2026-10-22T12:00:00Z, viewports 1440 and 390, light and dark.

| Row | Viewport | Theme | Before (8d3b061) | After (40410f7) | Diff0 | DiffT | Duration boxes before → after |
|---|---|---|---|---|---|---|---|
| R1-sub-min | 390 | light | [Before](https://gh-file-drop-api-prod-mi5fy3sowv63ufte.pinglabs.workers.dev/f/9075883ec9fa96c4/before_R1-sub-min_390_light_panel.png) | [After](https://gh-file-drop-api-prod-mi5fy3sowv63ufte.pinglabs.workers.dev/f/0774865472664f3e/after_R1-sub-min_390_light_panel.png) | [diff0](https://gh-file-drop-api-prod-mi5fy3sowv63ufte.pinglabs.workers.dev/f/e90a1d79effb1360/R1-sub-min_390_light_panel_diff0.png) 0 px | [diffT](https://gh-file-drop-api-prod-mi5fy3sowv63ufte.pinglabs.workers.dev/f/23326e9aa40cfe4d/R1-sub-min_390_light_panel_diffT.png) 0 px | 800ms 48.0x16; 4.2s 48.0x16; 42s 48.0x16; 59s 48.0x16 → 48.0x16; 48.0x16; 48.0x16; 48.0x16 |
| R1-sub-min | 390 | dark | [Before](https://gh-file-drop-api-prod-mi5fy3sowv63ufte.pinglabs.workers.dev/f/fc733cea77a495c9/before_R1-sub-min_390_dark_panel.png) | [After](https://gh-file-drop-api-prod-mi5fy3sowv63ufte.pinglabs.workers.dev/f/38f81db862c89007/after_R1-sub-min_390_dark_panel.png) | [diff0](https://gh-file-drop-api-prod-mi5fy3sowv63ufte.pinglabs.workers.dev/f/2ed83f9ccb77b4ae/R1-sub-min_390_dark_panel_diff0.png) 0 px | [diffT](https://gh-file-drop-api-prod-mi5fy3sowv63ufte.pinglabs.workers.dev/f/a39443e567bcfa8a/R1-sub-min_390_dark_panel_diffT.png) 0 px | 800ms 48.0x16; 4.2s 48.0x16; 42s 48.0x16; 59s 48.0x16 → 48.0x16; 48.0x16; 48.0x16; 48.0x16 |
| R1-sub-min | 1440 | light | [Before](https://gh-file-drop-api-prod-mi5fy3sowv63ufte.pinglabs.workers.dev/f/a8656fb6ec88da18/before_R1-sub-min_1440_light_panel.png) | [After](https://gh-file-drop-api-prod-mi5fy3sowv63ufte.pinglabs.workers.dev/f/8ba3b21e8be6d8fd/after_R1-sub-min_1440_light_panel.png) | [diff0](https://gh-file-drop-api-prod-mi5fy3sowv63ufte.pinglabs.workers.dev/f/fe7ed51012954b72/R1-sub-min_1440_light_panel_diff0.png) 0 px | [diffT](https://gh-file-drop-api-prod-mi5fy3sowv63ufte.pinglabs.workers.dev/f/631885e17c53e68a/R1-sub-min_1440_light_panel_diffT.png) 0 px | 800ms 48.0x16; 4.2s 48.0x16; 42s 48.0x16; 59s 48.0x16 → 48.0x16; 48.0x16; 48.0x16; 48.0x16 |
| R1-sub-min | 1440 | dark | [Before](https://gh-file-drop-api-prod-mi5fy3sowv63ufte.pinglabs.workers.dev/f/ac878763e2498d11/before_R1-sub-min_1440_dark_panel.png) | [After](https://gh-file-drop-api-prod-mi5fy3sowv63ufte.pinglabs.workers.dev/f/afc66b553851d263/after_R1-sub-min_1440_dark_panel.png) | [diff0](https://gh-file-drop-api-prod-mi5fy3sowv63ufte.pinglabs.workers.dev/f/369a79dfde1c0afb/R1-sub-min_1440_dark_panel_diff0.png) 0 px | [diffT](https://gh-file-drop-api-prod-mi5fy3sowv63ufte.pinglabs.workers.dev/f/b7a7b7d3de79bb4c/R1-sub-min_1440_dark_panel_diffT.png) 0 px | 800ms 48.0x16; 4.2s 48.0x16; 42s 48.0x16; 59s 48.0x16 → 48.0x16; 48.0x16; 48.0x16; 48.0x16 |
| R2-minutes | 390 | light | [Before](https://gh-file-drop-api-prod-mi5fy3sowv63ufte.pinglabs.workers.dev/f/474d421b0dcdb7ce/before_R2-minutes_390_light_panel.png) | [After](https://gh-file-drop-api-prod-mi5fy3sowv63ufte.pinglabs.workers.dev/f/79e9e948b6ffcdf3/after_R2-minutes_390_light_panel.png) | [diff0](https://gh-file-drop-api-prod-mi5fy3sowv63ufte.pinglabs.workers.dev/f/6383f1ced3b17a62/R2-minutes_390_light_panel_diff0.png) 0 px | [diffT](https://gh-file-drop-api-prod-mi5fy3sowv63ufte.pinglabs.workers.dev/f/72c5ba2811893e5f/R2-minutes_390_light_panel_diffT.png) 0 px | 2m 5s 48.0x16; 12m 34s 48.0x16; 59m 48.0x16; 1m 48.0x16 → 48.0x16; 48.0x16; 48.0x16; 48.0x16 |
| R2-minutes | 390 | dark | [Before](https://gh-file-drop-api-prod-mi5fy3sowv63ufte.pinglabs.workers.dev/f/b4ab9b06260322aa/before_R2-minutes_390_dark_panel.png) | [After](https://gh-file-drop-api-prod-mi5fy3sowv63ufte.pinglabs.workers.dev/f/e5b9c172cebcb270/after_R2-minutes_390_dark_panel.png) | [diff0](https://gh-file-drop-api-prod-mi5fy3sowv63ufte.pinglabs.workers.dev/f/ce7864e89d91814b/R2-minutes_390_dark_panel_diff0.png) 0 px | [diffT](https://gh-file-drop-api-prod-mi5fy3sowv63ufte.pinglabs.workers.dev/f/eb1db921f72836a7/R2-minutes_390_dark_panel_diffT.png) 0 px | 2m 5s 48.0x16; 12m 34s 48.0x16; 59m 48.0x16; 1m 48.0x16 → 48.0x16; 48.0x16; 48.0x16; 48.0x16 |
| R2-minutes | 1440 | light | [Before](https://gh-file-drop-api-prod-mi5fy3sowv63ufte.pinglabs.workers.dev/f/a06c2633ca19a18b/before_R2-minutes_1440_light_panel.png) | [After](https://gh-file-drop-api-prod-mi5fy3sowv63ufte.pinglabs.workers.dev/f/c9139281b859a2f4/after_R2-minutes_1440_light_panel.png) | [diff0](https://gh-file-drop-api-prod-mi5fy3sowv63ufte.pinglabs.workers.dev/f/6faf0bf836d4942a/R2-minutes_1440_light_panel_diff0.png) 0 px | [diffT](https://gh-file-drop-api-prod-mi5fy3sowv63ufte.pinglabs.workers.dev/f/48946f78f85da3d0/R2-minutes_1440_light_panel_diffT.png) 0 px | 2m 5s 48.0x16; 12m 34s 48.0x16; 59m 48.0x16; 1m 48.0x16 → 48.0x16; 48.0x16; 48.0x16; 48.0x16 |
| R2-minutes | 1440 | dark | [Before](https://gh-file-drop-api-prod-mi5fy3sowv63ufte.pinglabs.workers.dev/f/d38f8ab365a21f69/before_R2-minutes_1440_dark_panel.png) | [After](https://gh-file-drop-api-prod-mi5fy3sowv63ufte.pinglabs.workers.dev/f/2ee6774336ed15a4/after_R2-minutes_1440_dark_panel.png) | [diff0](https://gh-file-drop-api-prod-mi5fy3sowv63ufte.pinglabs.workers.dev/f/e14551bd49601924/R2-minutes_1440_dark_panel_diff0.png) 0 px | [diffT](https://gh-file-drop-api-prod-mi5fy3sowv63ufte.pinglabs.workers.dev/f/8e6a0ac5e0b9e7c8/R2-minutes_1440_dark_panel_diffT.png) 0 px | 2m 5s 48.0x16; 12m 34s 48.0x16; 59m 48.0x16; 1m 48.0x16 → 48.0x16; 48.0x16; 48.0x16; 48.0x16 |
| R3-under-hour | 390 | light | [Before](https://gh-file-drop-api-prod-mi5fy3sowv63ufte.pinglabs.workers.dev/f/f6a949a2d1abfee5/before_R3-under-hour_390_light_panel.png) | [After](https://gh-file-drop-api-prod-mi5fy3sowv63ufte.pinglabs.workers.dev/f/4019d204803dd74f/after_R3-under-hour_390_light_panel.png) | [diff0](https://gh-file-drop-api-prod-mi5fy3sowv63ufte.pinglabs.workers.dev/f/aa9485a23abe3700/R3-under-hour_390_light_panel_diff0.png) 0 px | [diffT](https://gh-file-drop-api-prod-mi5fy3sowv63ufte.pinglabs.workers.dev/f/6fe2d5c8b6f39d8a/R3-under-hour_390_light_panel_diffT.png) 0 px | 59m 59s 48.0x16; 59m 59s 48.0x16 → 48.0x16; 48.0x16 |
| R3-under-hour | 390 | dark | [Before](https://gh-file-drop-api-prod-mi5fy3sowv63ufte.pinglabs.workers.dev/f/1fb5332c680a830b/before_R3-under-hour_390_dark_panel.png) | [After](https://gh-file-drop-api-prod-mi5fy3sowv63ufte.pinglabs.workers.dev/f/09cc39b188410062/after_R3-under-hour_390_dark_panel.png) | [diff0](https://gh-file-drop-api-prod-mi5fy3sowv63ufte.pinglabs.workers.dev/f/8e1b51cbf2f11a56/R3-under-hour_390_dark_panel_diff0.png) 0 px | [diffT](https://gh-file-drop-api-prod-mi5fy3sowv63ufte.pinglabs.workers.dev/f/c089a624dee9c91d/R3-under-hour_390_dark_panel_diffT.png) 0 px | 59m 59s 48.0x16; 59m 59s 48.0x16 → 48.0x16; 48.0x16 |
| R3-under-hour | 1440 | light | [Before](https://gh-file-drop-api-prod-mi5fy3sowv63ufte.pinglabs.workers.dev/f/a94ff76586d9319b/before_R3-under-hour_1440_light_panel.png) | [After](https://gh-file-drop-api-prod-mi5fy3sowv63ufte.pinglabs.workers.dev/f/2ab6ca87240bd660/after_R3-under-hour_1440_light_panel.png) | [diff0](https://gh-file-drop-api-prod-mi5fy3sowv63ufte.pinglabs.workers.dev/f/3474c28f002bd857/R3-under-hour_1440_light_panel_diff0.png) 0 px | [diffT](https://gh-file-drop-api-prod-mi5fy3sowv63ufte.pinglabs.workers.dev/f/8da6d74441eb5670/R3-under-hour_1440_light_panel_diffT.png) 0 px | 59m 59s 48.0x16; 59m 59s 48.0x16 → 48.0x16; 48.0x16 |
| R3-under-hour | 1440 | dark | [Before](https://gh-file-drop-api-prod-mi5fy3sowv63ufte.pinglabs.workers.dev/f/46956949e96e8cef/before_R3-under-hour_1440_dark_panel.png) | [After](https://gh-file-drop-api-prod-mi5fy3sowv63ufte.pinglabs.workers.dev/f/6633a0cd27f8e5fe/after_R3-under-hour_1440_dark_panel.png) | [diff0](https://gh-file-drop-api-prod-mi5fy3sowv63ufte.pinglabs.workers.dev/f/fdea12057d22dfa5/R3-under-hour_1440_dark_panel_diff0.png) 0 px | [diffT](https://gh-file-drop-api-prod-mi5fy3sowv63ufte.pinglabs.workers.dev/f/35f113d625467981/R3-under-hour_1440_dark_panel_diffT.png) 0 px | 59m 59s 48.0x16; 59m 59s 48.0x16 → 48.0x16; 48.0x16 |
| R4-just-over | 390 | light | [Before](https://gh-file-drop-api-prod-mi5fy3sowv63ufte.pinglabs.workers.dev/f/4b6f28278ef820bf/before_R4-just-over_390_light_panel.png) | [After](https://gh-file-drop-api-prod-mi5fy3sowv63ufte.pinglabs.workers.dev/f/e33390173acf6ae9/after_R4-just-over_390_light_panel.png) | [diff0](https://gh-file-drop-api-prod-mi5fy3sowv63ufte.pinglabs.workers.dev/f/d5caf3ec9a11a4bd/R4-just-over_390_light_panel_diff0.png) 0 px | [diffT](https://gh-file-drop-api-prod-mi5fy3sowv63ufte.pinglabs.workers.dev/f/b7dbb6d3a2a31d39/R4-just-over_390_light_panel_diffT.png) 0 px | 1h 48.0x16; 1h 1m 1s 48.0x16; 1h 2m 5s 48.0x16; 1h 23m 48.0x16 → 48.0x16; 48.0x16; 48.0x16; 48.0x16 |
| R4-just-over | 390 | dark | [Before](https://gh-file-drop-api-prod-mi5fy3sowv63ufte.pinglabs.workers.dev/f/789c7759caca1e8f/before_R4-just-over_390_dark_panel.png) | [After](https://gh-file-drop-api-prod-mi5fy3sowv63ufte.pinglabs.workers.dev/f/52e0bd526c209d15/after_R4-just-over_390_dark_panel.png) | [diff0](https://gh-file-drop-api-prod-mi5fy3sowv63ufte.pinglabs.workers.dev/f/fcb851196b2e607f/R4-just-over_390_dark_panel_diff0.png) 0 px | [diffT](https://gh-file-drop-api-prod-mi5fy3sowv63ufte.pinglabs.workers.dev/f/7643ed46e409241c/R4-just-over_390_dark_panel_diffT.png) 0 px | 1h 48.0x16; 1h 1m 1s 48.0x16; 1h 2m 5s 48.0x16; 1h 23m 48.0x16 → 48.0x16; 48.0x16; 48.0x16; 48.0x16 |
| R4-just-over | 1440 | light | [Before](https://gh-file-drop-api-prod-mi5fy3sowv63ufte.pinglabs.workers.dev/f/b9ba3dc6484a79a7/before_R4-just-over_1440_light_panel.png) | [After](https://gh-file-drop-api-prod-mi5fy3sowv63ufte.pinglabs.workers.dev/f/77288481c05be068/after_R4-just-over_1440_light_panel.png) | [diff0](https://gh-file-drop-api-prod-mi5fy3sowv63ufte.pinglabs.workers.dev/f/3d395a06c58ff8a6/R4-just-over_1440_light_panel_diff0.png) 0 px | [diffT](https://gh-file-drop-api-prod-mi5fy3sowv63ufte.pinglabs.workers.dev/f/72411af0473aac7a/R4-just-over_1440_light_panel_diffT.png) 0 px | 1h 48.0x16; 1h 1m 1s 48.0x16; 1h 2m 5s 48.0x16; 1h 23m 48.0x16 → 48.0x16; 48.0x16; 48.0x16; 48.0x16 |
| R4-just-over | 1440 | dark | [Before](https://gh-file-drop-api-prod-mi5fy3sowv63ufte.pinglabs.workers.dev/f/4ea94b8a7c1f779a/before_R4-just-over_1440_dark_panel.png) | [After](https://gh-file-drop-api-prod-mi5fy3sowv63ufte.pinglabs.workers.dev/f/54d2766df1b1ff97/after_R4-just-over_1440_dark_panel.png) | [diff0](https://gh-file-drop-api-prod-mi5fy3sowv63ufte.pinglabs.workers.dev/f/8d9eac06efae26c7/R4-just-over_1440_dark_panel_diff0.png) 0 px | [diffT](https://gh-file-drop-api-prod-mi5fy3sowv63ufte.pinglabs.workers.dev/f/8c956a9c2650d7e8/R4-just-over_1440_dark_panel_diffT.png) 0 px | 1h 48.0x16; 1h 1m 1s 48.0x16; 1h 2m 5s 48.0x16; 1h 23m 48.0x16 → 48.0x16; 48.0x16; 48.0x16; 48.0x16 |
| R5-multi-hour | 390 | light | <img src="https://gh-file-drop-api-prod-mi5fy3sowv63ufte.pinglabs.workers.dev/f/4ec4d7129669d569/before_R5-multi-hour_390_light_panel.png" alt="Before R5-multi-hour 390 light" width="220"> | <img src="https://gh-file-drop-api-prod-mi5fy3sowv63ufte.pinglabs.workers.dev/f/41550a7c4eca286d/after_R5-multi-hour_390_light_panel.png" alt="After R5-multi-hour 390 light" width="220"> | [diff0](https://gh-file-drop-api-prod-mi5fy3sowv63ufte.pinglabs.workers.dev/f/d2a4330bd9d5a18d/R5-multi-hour_390_light_panel_diff0.png) 16504 px | [diffT](https://gh-file-drop-api-prod-mi5fy3sowv63ufte.pinglabs.workers.dev/f/b916e1e117e52629/R5-multi-hour_390_light_panel_diffT.png) 3801 px | 2h 30m 15s 48.0x32; 12h 34m 56s 48.0x32; 23h 59m 59s 48.0x32; 42s 48.0x16 → 54.8x16; 60.8x16; 60.8x16; 48.0x16 |
| R5-multi-hour | 390 | dark | <img src="https://gh-file-drop-api-prod-mi5fy3sowv63ufte.pinglabs.workers.dev/f/bd48f715dab70347/before_R5-multi-hour_390_dark_panel.png" alt="Before R5-multi-hour 390 dark" width="220"> | <img src="https://gh-file-drop-api-prod-mi5fy3sowv63ufte.pinglabs.workers.dev/f/43cd901b50a70d45/after_R5-multi-hour_390_dark_panel.png" alt="After R5-multi-hour 390 dark" width="220"> | [diff0](https://gh-file-drop-api-prod-mi5fy3sowv63ufte.pinglabs.workers.dev/f/dc8dd8af6647f6dc/R5-multi-hour_390_dark_panel_diff0.png) 78879 px | [diffT](https://gh-file-drop-api-prod-mi5fy3sowv63ufte.pinglabs.workers.dev/f/24672a04f388995b/R5-multi-hour_390_dark_panel_diffT.png) 62186 px | 2h 30m 15s 48.0x32; 12h 34m 56s 48.0x32; 23h 59m 59s 48.0x32; 42s 48.0x16 → 54.8x16; 60.8x16; 60.8x16; 48.0x16 |
| R5-multi-hour | 1440 | light | <img src="https://gh-file-drop-api-prod-mi5fy3sowv63ufte.pinglabs.workers.dev/f/05add0bae6f800f1/before_R5-multi-hour_1440_light_panel.png" alt="Before R5-multi-hour 1440 light" width="220"> | <img src="https://gh-file-drop-api-prod-mi5fy3sowv63ufte.pinglabs.workers.dev/f/b5126068d07d876a/after_R5-multi-hour_1440_light_panel.png" alt="After R5-multi-hour 1440 light" width="220"> | [diff0](https://gh-file-drop-api-prod-mi5fy3sowv63ufte.pinglabs.workers.dev/f/e4ec8549245a3a2f/R5-multi-hour_1440_light_panel_diff0.png) 20944 px | [diffT](https://gh-file-drop-api-prod-mi5fy3sowv63ufte.pinglabs.workers.dev/f/57fd15a4167f7e75/R5-multi-hour_1440_light_panel_diffT.png) 3803 px | 2h 30m 15s 48.0x32; 12h 34m 56s 48.0x32; 23h 59m 59s 48.0x32; 42s 48.0x16 → 54.8x16; 60.8x16; 60.8x16; 48.0x16 |
| R5-multi-hour | 1440 | dark | <img src="https://gh-file-drop-api-prod-mi5fy3sowv63ufte.pinglabs.workers.dev/f/a4b21ffb7c266c28/before_R5-multi-hour_1440_dark_panel.png" alt="Before R5-multi-hour 1440 dark" width="220"> | <img src="https://gh-file-drop-api-prod-mi5fy3sowv63ufte.pinglabs.workers.dev/f/e0056849f5c6468e/after_R5-multi-hour_1440_dark_panel.png" alt="After R5-multi-hour 1440 dark" width="220"> | [diff0](https://gh-file-drop-api-prod-mi5fy3sowv63ufte.pinglabs.workers.dev/f/204b0104968e901c/R5-multi-hour_1440_dark_panel_diff0.png) 159539 px | [diffT](https://gh-file-drop-api-prod-mi5fy3sowv63ufte.pinglabs.workers.dev/f/f7e3a32b3c2886af/R5-multi-hour_1440_dark_panel_diffT.png) 133226 px | 2h 30m 15s 48.0x32; 12h 34m 56s 48.0x32; 23h 59m 59s 48.0x32; 42s 48.0x16 → 54.8x16; 60.8x16; 60.8x16; 48.0x16 |
| R6-mixed-live | 390 | light | <img src="https://gh-file-drop-api-prod-mi5fy3sowv63ufte.pinglabs.workers.dev/f/22f768de1c4362e6/before_R6-mixed-live_390_light_panel.png" alt="Before R6-mixed-live 390 light" width="220"> | <img src="https://gh-file-drop-api-prod-mi5fy3sowv63ufte.pinglabs.workers.dev/f/9f26c5dbeb5c98b9/after_R6-mixed-live_390_light_panel.png" alt="After R6-mixed-live 390 light" width="220"> | [diff0](https://gh-file-drop-api-prod-mi5fy3sowv63ufte.pinglabs.workers.dev/f/d7119a322c774b97/R6-mixed-live_390_light_panel_diff0.png) 8723 px | [diffT](https://gh-file-drop-api-prod-mi5fy3sowv63ufte.pinglabs.workers.dev/f/39b6f7df8d667179/R6-mixed-live_390_light_panel_diffT.png) 1501 px | 42s 48.0x16; 12m 34s 48.0x16; 2h 30m 15s 48.0x32 → 48.0x16; 48.0x16; 54.8x16 |
| R6-mixed-live | 390 | dark | <img src="https://gh-file-drop-api-prod-mi5fy3sowv63ufte.pinglabs.workers.dev/f/64f202afd2dc36a7/before_R6-mixed-live_390_dark_panel.png" alt="Before R6-mixed-live 390 dark" width="220"> | <img src="https://gh-file-drop-api-prod-mi5fy3sowv63ufte.pinglabs.workers.dev/f/f9705b61f8a3e90b/after_R6-mixed-live_390_dark_panel.png" alt="After R6-mixed-live 390 dark" width="220"> | [diff0](https://gh-file-drop-api-prod-mi5fy3sowv63ufte.pinglabs.workers.dev/f/298b9e52c2749577/R6-mixed-live_390_dark_panel_diff0.png) 32324 px | [diffT](https://gh-file-drop-api-prod-mi5fy3sowv63ufte.pinglabs.workers.dev/f/06c4797e0c1bf639/R6-mixed-live_390_dark_panel_diffT.png) 20777 px | 42s 48.0x16; 12m 34s 48.0x16; 2h 30m 15s 48.0x32 → 48.0x16; 48.0x16; 54.8x16 |
| R6-mixed-live | 1440 | light | <img src="https://gh-file-drop-api-prod-mi5fy3sowv63ufte.pinglabs.workers.dev/f/21e8dcd1eb361857/before_R6-mixed-live_1440_light_panel.png" alt="Before R6-mixed-live 1440 light" width="220"> | <img src="https://gh-file-drop-api-prod-mi5fy3sowv63ufte.pinglabs.workers.dev/f/ea423b2d06902b78/after_R6-mixed-live_1440_light_panel.png" alt="After R6-mixed-live 1440 light" width="220"> | [diff0](https://gh-file-drop-api-prod-mi5fy3sowv63ufte.pinglabs.workers.dev/f/333921c7e62a3cf6/R6-mixed-live_1440_light_panel_diff0.png) 13163 px | [diffT](https://gh-file-drop-api-prod-mi5fy3sowv63ufte.pinglabs.workers.dev/f/8fe61552dc87bbd7/R6-mixed-live_1440_light_panel_diffT.png) 1505 px | 42s 48.0x16; 12m 34s 48.0x16; 2h 30m 15s 48.0x32 → 48.0x16; 48.0x16; 54.8x16 |
| R6-mixed-live | 1440 | dark | <img src="https://gh-file-drop-api-prod-mi5fy3sowv63ufte.pinglabs.workers.dev/f/e283a1c08eeeefae/before_R6-mixed-live_1440_dark_panel.png" alt="Before R6-mixed-live 1440 dark" width="220"> | <img src="https://gh-file-drop-api-prod-mi5fy3sowv63ufte.pinglabs.workers.dev/f/9ad4d2a4cf2d3ead/after_R6-mixed-live_1440_dark_panel.png" alt="After R6-mixed-live 1440 dark" width="220"> | [diff0](https://gh-file-drop-api-prod-mi5fy3sowv63ufte.pinglabs.workers.dev/f/961f229079faf73f/R6-mixed-live_1440_dark_panel_diff0.png) 65624 px | [diffT](https://gh-file-drop-api-prod-mi5fy3sowv63ufte.pinglabs.workers.dev/f/bf63c18019298b50/R6-mixed-live_1440_dark_panel_diffT.png) 44459 px | 42s 48.0x16; 12m 34s 48.0x16; 2h 30m 15s 48.0x32 → 48.0x16; 48.0x16; 54.8x16 |
| R7-long-names | 390 | light | <img src="https://gh-file-drop-api-prod-mi5fy3sowv63ufte.pinglabs.workers.dev/f/71e5fc11c6e07f12/before_R7-long-names_390_light_panel.png" alt="Before R7-long-names 390 light" width="220"> | <img src="https://gh-file-drop-api-prod-mi5fy3sowv63ufte.pinglabs.workers.dev/f/d846a906a3524472/after_R7-long-names_390_light_panel.png" alt="After R7-long-names 390 light" width="220"> | [diff0](https://gh-file-drop-api-prod-mi5fy3sowv63ufte.pinglabs.workers.dev/f/0ad39bc4d1dfd635/R7-long-names_390_light_panel_diff0.png) 20432 px | [diffT](https://gh-file-drop-api-prod-mi5fy3sowv63ufte.pinglabs.workers.dev/f/428c6f3661e5abf3/R7-long-names_390_light_panel_diffT.png) 5410 px | 2h 30m 15s 48.0x32; 12m 34s 48.0x16; 12h 34m 56s 48.0x32 → 54.8x16; 48.0x16; 60.8x16 |
| R7-long-names | 390 | dark | <img src="https://gh-file-drop-api-prod-mi5fy3sowv63ufte.pinglabs.workers.dev/f/7721696d5453b707/before_R7-long-names_390_dark_panel.png" alt="Before R7-long-names 390 dark" width="220"> | <img src="https://gh-file-drop-api-prod-mi5fy3sowv63ufte.pinglabs.workers.dev/f/e8210dfa7776bf09/after_R7-long-names_390_dark_panel.png" alt="After R7-long-names 390 dark" width="220"> | [diff0](https://gh-file-drop-api-prod-mi5fy3sowv63ufte.pinglabs.workers.dev/f/d5b48b8602014ea3/R7-long-names_390_dark_panel_diff0.png) 44393 px | [diffT](https://gh-file-drop-api-prod-mi5fy3sowv63ufte.pinglabs.workers.dev/f/0f65941ef7e8ed2d/R7-long-names_390_dark_panel_diffT.png) 24793 px | 2h 30m 15s 48.0x32; 12m 34s 48.0x16; 12h 34m 56s 48.0x32 → 54.8x16; 48.0x16; 60.8x16 |
| R7-long-names | 1440 | light | <img src="https://gh-file-drop-api-prod-mi5fy3sowv63ufte.pinglabs.workers.dev/f/4bd371b7c16f6cbe/before_R7-long-names_1440_light_panel.png" alt="Before R7-long-names 1440 light" width="220"> | <img src="https://gh-file-drop-api-prod-mi5fy3sowv63ufte.pinglabs.workers.dev/f/b6212d91b72b4af7/after_R7-long-names_1440_light_panel.png" alt="After R7-long-names 1440 light" width="220"> | [diff0](https://gh-file-drop-api-prod-mi5fy3sowv63ufte.pinglabs.workers.dev/f/e0fc60edbe709dcc/R7-long-names_1440_light_panel_diff0.png) 26965 px | [diffT](https://gh-file-drop-api-prod-mi5fy3sowv63ufte.pinglabs.workers.dev/f/4081df92871c9c62/R7-long-names_1440_light_panel_diffT.png) 6543 px | 2h 30m 15s 48.0x32; 12m 34s 48.0x16; 12h 34m 56s 48.0x32 → 54.8x16; 48.0x16; 60.8x16 |
| R7-long-names | 1440 | dark | <img src="https://gh-file-drop-api-prod-mi5fy3sowv63ufte.pinglabs.workers.dev/f/db60103bf7ee8a59/before_R7-long-names_1440_dark_panel.png" alt="Before R7-long-names 1440 dark" width="220"> | <img src="https://gh-file-drop-api-prod-mi5fy3sowv63ufte.pinglabs.workers.dev/f/a1250da8192e7f56/after_R7-long-names_1440_dark_panel.png" alt="After R7-long-names 1440 dark" width="220"> | [diff0](https://gh-file-drop-api-prod-mi5fy3sowv63ufte.pinglabs.workers.dev/f/fa4b71677650c336/R7-long-names_1440_dark_panel_diff0.png) 74256 px | [diffT](https://gh-file-drop-api-prod-mi5fy3sowv63ufte.pinglabs.workers.dev/f/0ae43c8d6d867067/R7-long-names_1440_dark_panel_diffT.png) 42981 px | 2h 30m 15s 48.0x32; 12m 34s 48.0x16; 12h 34m 56s 48.0x32 → 54.8x16; 48.0x16; 60.8x16 |

Duration-column crops for every row, plus all diffs: [table.md](https://gh-file-drop-api-prod-mi5fy3sowv63ufte.pinglabs.workers.dev/f/9c517e7566847461/table.md). Fixture matrix: [matrix.md](https://gh-file-drop-api-prod-mi5fy3sowv63ufte.pinglabs.workers.dev/f/f5adf68a653bf8d7/matrix.md). Driver: [capture.cjs](https://gh-file-drop-api-prod-mi5fy3sowv63ufte.pinglabs.workers.dev/f/abfc0046310596f3/capture.cjs), fixture: [fixture.json](https://gh-file-drop-api-prod-mi5fy3sowv63ufte.pinglabs.workers.dev/f/cd538312e86c0b86/fixture.json).

What else changed (besides the duration column):
- R5, R6, R7: each row holding a multi-hour duration (`2h 30m 15s`, `12h 34m 56s`, `23h 59m 59s`) drops from 40px to 24px tall, because the duration no longer wraps (48×32 → 54.8–60.8×16). The drawer gets shorter and content below moves up.
- Labels beside a widened duration lose 6.8px or 12.8px of width. In R7 row 1 the label rewraps at a different word with the same line count.
- No horizontal overflow on either side at 390 or 1440.
- R1–R4 (under a minute through `1h 23m`, including `59m 59s` and `1h 1m 1s`) and R8 (collapsed badge, which shows no durations): 0 changed pixels at threshold 0.
- Dark-theme diff counts are higher only because the shorter after image is padded to the before height.


<details><summary>Verification log</summary>

- Head captured: [`40410f7`](https://github.com/pingdotgg/t3code/commit/40410f7e59e95e0225e9eab9490e6d85a250cf22) (main merged into the branch). Before: merge-base [`8d3b061`](https://github.com/pingdotgg/t3code/commit/8d3b061121fe65669d5d43d011b48cd3027a4108).
- Proof audit pass 1 (Claude Opus 5.5): matrix built, `formatDuration` strings measured by running the source. Gaps: the live "now" row can't be seeded, and the wrap point for 8-character durations was estimated (measurement later showed `1h 1m 1s` fits in 48px).
- Proof audit pass 2 (Claude Opus 5.5): all 240 links resolve as PNGs, pixel counts and boxes match `summary.json`, worktree SHAs match the two above. One capture (R5, 1440, light, before) rebuilt from the uploaded driver: 0 px different from the uploaded image. Gap: the uploaded artifacts themselves don't record the SHAs; this section does.
- Review A, Claude Sonnet 5.5: `VERDICT: MERGE`. Smallest correct fix: the row is a grid with an `auto` column, so `whitespace-nowrap` stops the squeeze and `min-w-12` keeps the 48px column for short values. No regression at 390.
- Review B, Claude Opus 5.5: `VERDICT: MERGE`. Same conclusion. `vp fmt --check` and `vp lint` pass on the file. Mobile shows only an x/y summary, so no per-step duration exists there to fix.
- CI on `40410f7`: 33/33 checks successful, 0 pending.
- Unverified: R6 live "now" label. A seeded run is settled at server start, so that row is blank on both sides. "now" is three characters and this change doesn't affect it.
- Model/harness: Claude Opus 5.5 (lead, audits, capture, review B) and Claude Sonnet 5.5 (review A) via T3 Code on Claude Code.

</details>

