Keep a narrow list's labels inside the row, on the sender's line #36

Merged

jcoffey-dev merged 1 commits from fix/two-line-row-labels into main

2026-10-05 17:43:06 +00:00

jcoffey-dev commented

2026-10-05 17:32:26 +00:00

Owner

Fixes #35 (reported by @mbjboon82, whose suggested fix this follows).

In the two-line layout (phones, and lists narrower than 640px), labels went on a third line. Rows have a fixed height per density, set inline by the virtual list: 78 / 66 / 56px for Comfortable / Cozy / Compact. The content was about 75px with the label line, so it fit only at Comfortable. At Cozy, the default, labels were cut off; at Compact they sat outside the row.

Change: labels move onto the sender's line, after the name, so the row's content is 8px padding + 20px sender line + 2px gap + 25px subject line = 55px at every density. When space runs short, the name truncates first (min 3em), then the labels (max 55% of the line), each with an ellipsis; the date always stays. All new CSS is scoped to .two-line, so the desktop one-line layout is unchanged.

Checked in Chrome against the mock at phone widths:

Cozy (66) and Compact (56): content measured inside each row.
A 38-character sender name, a long label, and three labels on one row.
A 360px window, where the name and label both truncate and the date stays.

Typecheck passes, web tests 1457/1457. No new strings.

Note: in the two-line layout calc(var(--row-h) * 1.5) in app.css is overridden by the list's inline row height, so the CSS gives 54px for Compact while rows are really 56. Left as is; the inline value is what holds.

Fixes #35 (reported by @mbjboon82, whose suggested fix this follows). In the two-line layout (phones, and lists narrower than 640px), labels went on a third line. Rows have a fixed height per density, set inline by the virtual list: 78 / 66 / 56px for Comfortable / Cozy / Compact. The content was about 75px with the label line, so it fit only at Comfortable. At Cozy, the default, labels were cut off; at Compact they sat outside the row. **Change:** labels move onto the sender's line, after the name, so the row's content is 8px padding + 20px sender line + 2px gap + 25px subject line = 55px at every density. When space runs short, the name truncates first (min 3em), then the labels (max 55% of the line), each with an ellipsis; the date always stays. All new CSS is scoped to `.two-line`, so the desktop one-line layout is unchanged. **Checked** in Chrome against the mock at phone widths: - Cozy (66) and Compact (56): content measured inside each row. - A 38-character sender name, a long label, and three labels on one row. - A 360px window, where the name and label both truncate and the date stays. Typecheck passes, web tests 1457/1457. No new strings. Note: in the two-line layout `calc(var(--row-h) * 1.5)` in app.css is overridden by the list's inline row height, so the CSS gives 54px for Compact while rows are really 56. Left as is; the inline value is what holds.

jcoffey-dev added 1 commit 2026-10-05 17:32:26 +00:00

Keep a narrow list's labels inside the row, on the sender's line

ci / node (pull_request) Skipped

Details

ci / version (pull_request) Skipped

Details

ci / docker-build (pull_request) Skipped

Details

ci / publish (pull_request) Skipped

Details

github/ci (branch) GitHub Actions

Details

ci / github (pull_request) Successful in 2m46s

Details

22490d8fe0

On a phone or a narrow list, rows are two lines, and labels went on a third
line of their own. A row is a fixed height at each density, and that third
line fit it only at Comfortable: at Cozy, the default, the labels were cut
off at the bottom, and at Compact they sat outside the row.

They now sit on the sender's line, after the name, which has room to spare,
so the row's height is unchanged at every density. When the line runs short
the name gives way first, then each label truncates; the date stays.

Fixes #35

jcoffey-dev merged commit 08665bc204 into main

2026-10-05 17:43:06 +00:00

jcoffey-dev deleted branch fix/two-line-row-labels

2026-10-05 17:43:06 +00:00

jcoffey-dev referenced this pull request

2026-10-05 18:05:30 +00:00

Labels fall (partly) outside a message row when display density is set to Cozy (default) or Compact #35

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: coffey-labs/ihasmail#36