style(ui): counters on labels sit right after the word

The counter hung at the label's right edge with a fixed 12 px gap, so
two-digit numbers covered part of the last letter. It now follows the
word in the text flow (position="text"): only its ring overlaps, the
same for any number of digits, and wide numbers widen the tab.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

frontend/src/index.css

@@ -339,6 +339,14 @@ body {
     /* ring in the page colour keeps the badge readable on top of borders */
     box-shadow: 0 0 0 2px var(--bg-app);
   }
+  /* In the text flow right after a label: only the ring hangs over the last letter (2 px), however many
+     digits; wider numbers make the tab wider instead of covering more of the word */
+  .count-badge-text {
+    position: relative;
+    top: -0.375rem;
+    z-index: 1;
+    box-shadow: 0 0 0 2px var(--bg-app);
+  }
 
   .badge-ok {
     display: inline-flex;