Assisted-by: Claude Opus 5.5 via Claude Code

diff --git a/assets/docket.css b/assets/docket.css
index 8f4a845..221013a 100644
--- a/assets/docket.css
+++ b/assets/docket.css
@@ -47,23 +47,25 @@ button { font: inherit; color: inherit; }
 .who-name { font-weight: 600; }
 .who-login { text-transform: none; letter-spacing: 0; color: var(--gl-color-text-tertiary); }
 
-/* ── the list: one card holding ledgers ── */
+/* ── the list: one card; each thread hangs its messages off a rail ── */
 .list { background: var(--gl-color-surface-card); border-radius: 6px; padding: var(--gl-space-m) var(--gl-space-m) 0; display: flex; flex-direction: column; gap: var(--gl-space-m); min-height: 0; overflow-y: auto; }
 .list-head { display: flex; justify-content: space-between; align-items: baseline; }
 .list-head h1, .thread-head h2 { font: 600 var(--gl-step-0)/1.2 var(--gl-font-text); letter-spacing: -.01em; }
 .section-head { display: flex; justify-content: space-between; }
 .section-head .sub { color: var(--gl-color-text-tertiary); }
-.group { display: flex; flex-direction: column; padding: var(--gl-space-s) 0; }
-.group-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding-bottom: var(--gl-space-3xs); }
+.groups { display: flex; flex-direction: column; gap: var(--gl-space-m); padding: var(--gl-space-s) 0 var(--gl-space-m); }
+.group { display: flex; flex-direction: column; gap: var(--gl-space-3xs); }
+.group-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
 .subj { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
 .more { color: var(--gl-color-text-tertiary); white-space: nowrap; }
+.rail { display: flex; flex-direction: column; gap: 2px; padding-left: 6px; }
 .row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; padding: 6px 8px 8px 10px; margin-right: -8px; border-radius: var(--gl-radius); color: var(--gl-color-text-secondary); text-decoration: none; transition: background var(--gl-dur-fast) var(--gl-ease); }
 .row:hover { background: var(--gl-color-surface-fill); color: var(--gl-color-text-secondary); }
 .row.sel { background: var(--gl-color-surface-fill); }
 .row .from { flex: 1 1 0; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
 .row.unread .from { font-weight: 500; color: var(--gl-color-text-primary); }
 .row .age { flex: none; width: 76px; text-align: right; font-size: var(--gl-step--2); white-space: nowrap; }
-.row .snip { flex: 0 0 100%; font-size: var(--gl-step--2); line-height: 1.5; color: var(--gl-color-text-tertiary); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
+.row .snip { flex: 0 0 100%; font-size: var(--gl-step--2); line-height: 1.5; color: var(--gl-color-text-tertiary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
 
 /* ── the thread: each email its own card, comments bare between them ── */
 .reader { min-height: 0; overflow-y: auto; }
diff --git a/src/views.rs b/src/views.rs
index 71205cc..6814425 100644
--- a/src/views.rs
+++ b/src/views.rs
@@ -198,7 +198,7 @@ fn list_section(p: &Page<'_>, section: &Section<'_>) -> Markup {
                     span.sub { (section.sub) }
                 }
             }
-            div.gl-ledger {
+            div.groups {
                 @for group in &section.groups {
                     div.group {
                         div.group-head {
@@ -207,8 +207,10 @@ fn list_section(p: &Page<'_>, section: &Section<'_>) -> Markup {
                                 span.type-label.more { (more) }
                             }
                         }
-                        @for m in &group.rows {
-                            (row(p, m, section.compact))
+                        div.rail {
+                            @for m in &group.rows {
+                                (row(p, m, section.compact))
+                            }
                         }
                     }
                 }