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>
This commit is contained in:
sandrodachandClaude Opus 5.5 committed 2026-11-02 12:59:16 +01:00
1 parent 8989321bdd
commit 92993c2dd2
6 files changed
+29 -19

No files matched your search

@@ -1623,9 +1623,9 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
}`}
>
<Check className="w-3.5 h-3.5 text-status-ok" />
<span className={`relative inline-flex items-center ${totalOpenTodos > 0 ? 'pr-3' : ''}`}>
<span className="inline-flex items-center">
To-Dos
<CountBadge count={totalOpenTodos} position="corner" className="-top-0.5 -right-2" />
<CountBadge count={totalOpenTodos} position="text" />
</span>
</button>
@@ -1642,9 +1642,9 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
}`}
>
<Hash className="w-3.5 h-3.5 text-accent" />
<span className={`relative inline-flex items-center ${tagsSummary.length > 0 ? 'pr-3' : ''}`}>
<span className="inline-flex items-center">
Hashtags
<CountBadge count={tagsSummary.length} position="corner" className="-top-0.5 -right-2" />
<CountBadge count={tagsSummary.length} position="text" />
</span>
</button>
</div>