src/shared/ui/CheckboxFilter/CheckboxFilter.svelte

@@ -84,6 +84,16 @@ const hasSelection = $derived(selectedCount > 0);
         >
             <h4 class="text-sm font-semibold">{displayedLabel}</h4>
 
+            <!-- Badge only appears when items are selected to avoid clutter -->
+            {#if hasSelection}
+                <Badge
+                    variant="secondary"
+                    class="mr-auto h-5 min-w-5 px-1.5 text-xs font-medium tabular-nums"
+                >
+                    {selectedCount}
+                </Badge>
+            {/if}
+
             <!-- Chevron rotates based on open state for visual feedback -->
             <div
                 class="shrink-0 transition-transform duration-200 ease-out"
@@ -91,15 +101,6 @@ const hasSelection = $derived(selectedCount > 0);
             >
                 <ChevronDownIcon class="h-4 w-4" />
             </div>
-            <!-- Badge only appears when items are selected to avoid clutter -->
-            {#if hasSelection}
-                <Badge
-                    variant="secondary"
-                    class="ml-auto h-5 min-w-5 px-1.5 text-xs font-medium tabular-nums"
-                >
-                    {selectedCount}
-                </Badge>
-            {/if}
         </Collapsible.Trigger>
     </div>