Badge lists wrap on their own; note table floors in the doc

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
This commit is contained in:
2026-09-20 21:29:03 +00:00
co-authored by Claude Fable 5.1
parent 815e7307d1
commit dd91b83c27
3 changed files with 11 additions and 6 deletions
+9 -4
View File
@@ -36,10 +36,10 @@ nowrap ones kept everything.
| class | use it for | behaviour |
| ------------ | -------------------------------------------------------------- | ---------------------------------------------------------------------- |
| *(none)* | short prose, names, tokens, badges | wraps at spaces |
| *(none)* | short prose, names, tokens, badges and badge lists | wraps at spaces (a `.badge` is nowrap on its own, so lists wrap between badges) |
| `num` | numbers, money, counts | right-aligned tabular figures; `td.num` never wraps, `th.num` may |
| `cell-tight` | timestamps, dates, ids, a single short token that must not split | `white-space: nowrap`. Nothing longer than ~20 characters |
| `cell-wrap` | titles, URLs, notes, messages, badge lists, anything free-form | floor 10rem, ceiling 32rem, `overflow-wrap: anywhere` |
| `cell-wrap` | titles, URLs, notes, messages, anything free-form | floor 10rem, ceiling 32rem, `overflow-wrap: anywhere` |
Anything long that must not wrap gets an inner block with a Tailwind clamp
(`<div class="line-clamp-2" title="…">`) inside a `cell-wrap` cell; the cell
@@ -57,9 +57,14 @@ nowrap ones kept everything.
- Give every `td` one of the four classes above according to its content.
When in doubt, leave it unclassed: wrapping is the safe default.
- Never `cell-tight` a name, a title, a reason sentence or a free-text field.
- Check the page at 390, 1280 and 2560px. At 1280 and above the wrapper's
- Check the page at 390, 1280 and 2560px. At 1440 and above the wrapper's
`scrollWidth` must equal its `clientWidth`; at 390 a wide table is allowed to
scroll.
scroll. A table's floor is the sum of its nowrap columns plus 10rem per
`cell-wrap` column: the 13-column articles table bottoms out near 1270px, so
it still scrolls a little on a 1280px viewport. Tables inside a `.card`
cannot grow past the card (20rem minimum), so a card table with more than
four numeric columns (run page: provider usage) scrolls inside its card at
1280px; move such a table to page level if that matters.
## Measuring
+1 -1
View File
@@ -11,5 +11,5 @@
<td class="num">{{ candidate.triage }}</td>
<td class="num">{{ candidate.quality }}</td>
<td class="num">{{ candidate.fit }}</td>
<td class="cell-wrap">{% if candidate.exploration %}<span class="badge">exploration</span>{% endif %}{% if candidate.auto_include %}<span class="badge">auto</span>{% endif %}</td>
<td>{% if candidate.exploration %}<span class="badge">exploration</span>{% endif %}{% if candidate.auto_include %}<span class="badge">auto</span>{% endif %}</td>
</tr>
+1 -1
View File
@@ -24,7 +24,7 @@
<td class="cell-tight text-muted">{{ article.first_seen }}</td>
<td class="cell-wrap"><a href="{{ article.href }}">{{ article.title }}</a></td>
<td>{% if let Some(feed_id) = article.feed_id %}<a href="/dashboard/articles?feed={{ feed_id }}">{{ article.feed }}</a>{% else %}{{ article.feed }}{% endif %}</td>
<td class="cell-wrap">{% for interest in article.interests %}<a class="badge" href="{{ interest.href }}">{{ interest.name }}</a>{% if !loop.last %} {% endif %}{% endfor %}</td>
<td>{% for interest in article.interests %}<a class="badge" href="{{ interest.href }}">{{ interest.name }}</a>{% if !loop.last %} {% endif %}{% endfor %}</td>
<td class="num">{{ article.words }}</td>
<td>{% if let Some(stage) = article.stage %}<span class="badge {{ stage }}">{{ stage }}</span>{% if let Some(run_id) = article.run_id %} <a class="muted text-xs" href="/dashboard/runs/{{ run_id }}">{% if let Some(date) = article.run_date %}{{ date }}{% else %}run {{ run_id }}{% endif %}</a>{% endif %}{% else %}<span class="muted text-xs">never considered</span>{% endif %}</td>
<td class="text-muted">{% if let Some(reason) = article.reason %}{{ reason }}{% endif %}</td>