Stop facet counts from wrapping (#2754)

ul.tight-bullets li uses word-break: break-all so long facet labels can
wrap, but that also let the count number break across lines. Wrap each
count in a span.facet-count with white-space: nowrap so the label can
still wrap while the count stays on one line.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
Simon Willison 2026-06-10 23:43:32 -07:00
commit 92848c06b8
2 changed files with 7 additions and 2 deletions

View file

@ -706,6 +706,11 @@ button.core[type=button] {
color: #666;
padding-right: 0.25em;
}
/* The label may wrap (word-break: break-all on the li) but the count should
stay on one line - https://github.com/simonw/datasette/issues/2754 */
.facet-count {
white-space: nowrap;
}
.facet-info li,
.facet-info ul {
margin: 0;

View file

@ -12,9 +12,9 @@
<ul class="tight-bullets">
{% for facet_value in facet_info.results %}
{% if not facet_value.selected %}
<li><a href="{{ facet_value.toggle_url }}" data-facet-value="{{ facet_value.value }}">{{ (facet_value.label | string()) or "-" }}</a> {{ "{:,}".format(facet_value.count) }}</li>
<li><a href="{{ facet_value.toggle_url }}" data-facet-value="{{ facet_value.value }}">{{ (facet_value.label | string()) or "-" }}</a> <span class="facet-count">{{ "{:,}".format(facet_value.count) }}</span></li>
{% else %}
<li>{{ facet_value.label or "-" }} &middot; {{ "{:,}".format(facet_value.count) }} <a href="{{ facet_value.toggle_url }}" class="cross">&#x2716;</a></li>
<li>{{ facet_value.label or "-" }} &middot; <span class="facet-count">{{ "{:,}".format(facet_value.count) }}</span> <a href="{{ facet_value.toggle_url }}" class="cross">&#x2716;</a></li>
{% endif %}
{% endfor %}
{% if facet_info.truncated %}