From 92848c06b8cf5b8bb6b93088bb547810f9fce8b6 Mon Sep 17 00:00:00 2001
From: Simon Willison <swillison@gmail.com>
Date: Wed, 10 Jun 2026 23:43:32 -0700
Subject: [PATCH] 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>
---
 datasette/static/app.css                | 5 +++++
 datasette/templates/_facet_results.html | 4 ++--
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/datasette/static/app.css b/datasette/static/app.css
index 815f6db8..6d675d9f 100644
--- a/datasette/static/app.css
+++ b/datasette/static/app.css
@@ -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;
diff --git a/datasette/templates/_facet_results.html b/datasette/templates/_facet_results.html
index 034e9678..570bb37e 100644
--- a/datasette/templates/_facet_results.html
+++ b/datasette/templates/_facet_results.html
@@ -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 %}