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/features/lists/SharedListsView.tsx

@@ -1063,9 +1063,9 @@ export const SharedListsView: React.FC<SharedListsViewProps> = ({ onRefreshGloba
                 >
                   <span>{lst.icon}</span>
                   {/* Counter on the label, like in the nav bar */}
-                  <span className={`relative inline-flex items-center ${openCount > 0 ? 'pr-3' : ''}`}>
+                  <span className="inline-flex items-center">
                     {lst.title}
-                    <CountBadge count={openCount} position="corner" className="-top-0.5 -right-2" />
+                    <CountBadge count={openCount} position="text" />
                   </span>
                   <AvatarStack
                     people={otherMembers(lst)}

frontend/src/features/triage/TasksView.tsx

@@ -1796,9 +1796,9 @@ export const TasksView: React.FC<TasksViewProps> = ({
             }`}
           >
             {/* Counter on the label, like in the nav bar */}
-            <span className={`relative inline-flex items-center ${openTasksCount ? 'pr-3' : ''}`}>
+            <span className="inline-flex items-center">
               Alle Aufgaben
-              <CountBadge count={openTasksCount} position="corner" className="-top-0.5 -right-2" />
+              <CountBadge count={openTasksCount} position="text" />
             </span>
           </button>
 
@@ -1825,9 +1825,9 @@ export const TasksView: React.FC<TasksViewProps> = ({
                 className="h-full px-3 text-xs font-medium flex items-center gap-1.5 rounded-btn"
               >
                 <span>{tl.icon}</span>
-                <span className={`relative inline-flex items-center ${tl.tasksCount ? 'pr-3' : ''}`}>
+                <span className="inline-flex items-center">
                   {tl.title}
-                  <CountBadge count={tl.tasksCount} position="corner" className="-top-0.5 -right-2" />
+                  <CountBadge count={tl.tasksCount} position="text" />
                 </span>
 
                 {(() => {

frontend/src/features/workspace/WorkspaceView.tsx

@@ -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>