fix(ui): tab counters sit on the label like in the nav bar

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

frontend/src/features/lists/SharedListsView.tsx

@@ -843,8 +843,8 @@ export const SharedListsView: React.FC<SharedListsViewProps> = ({ onRefreshGloba
     <div className="w-full space-y-3">
       {/* Top Header: List Tabs & Actions (Desktop) */}
       <div className="hidden sm:flex flex-wrap items-center justify-between gap-2 border-b border-border pb-2 !mt-0">
-        {/* List Tabs (counters sit on the top right corner, hence the extra gap) */}
-        <div className="flex flex-wrap items-center gap-x-3 gap-y-3 pt-2">
+        {/* List Tabs */}
+        <div className="flex flex-wrap items-center gap-1">
           {lists.map((lst) => {
             const openCount = deduplicateItems(lst.items || []).filter((i) => !i.isCompleted).length;
             const isSelected = activeList?.id === lst.id;
@@ -860,7 +860,11 @@ export const SharedListsView: React.FC<SharedListsViewProps> = ({ onRefreshGloba
                   className="h-full px-3 text-xs font-medium flex items-center gap-1.5 rounded-btn"
                 >
                   <span>{lst.icon}</span>
-                  <span>{lst.title}</span>
+                  {/* Counter on the label, like in the nav bar */}
+                  <span className={`relative inline-flex items-center ${openCount > 0 ? 'pr-2' : ''}`}>
+                    {lst.title}
+                    <CountBadge count={openCount} position="corner" className="-top-1.5 -right-1" />
+                  </span>
                   <AvatarStack
                     people={otherMembers(lst)}
                     size="xxs"
@@ -868,7 +872,6 @@ export const SharedListsView: React.FC<SharedListsViewProps> = ({ onRefreshGloba
                     className="ml-0.5"
                   />
                 </button>
-                <CountBadge count={openCount} position="corner" />
                 {isSelected && lists.length > 1 && (
                   <button
                     onClick={() => handleDeleteList(lst.id)}