style: group category label and badge

acdh-oeaw · Dec 16, 2024 · 8b52345 · 8b52345
1 parent c6bed2a
commit 8b52345
Showing 1 changed file with 14 additions and 9 deletions.
diff --git a/components/geojson-map-toolbar.vue b/components/geojson-map-toolbar.vue
@@ -61,15 +61,20 @@ const { colors, setColor } = useColorsStore();
 							<CollapsibleTrigger
 								class="flex w-full items-center justify-between gap-1 p-2 text-left text-sm"
 							>
-								<span>{{ titleCase(subcategory.id) }}</span>
-								<Badge
-									v-if="
-										subcategory.columns.length > 0 &&
-										subcategory.getLeafColumns().filter((c) => c.getIsVisible()).length
-									"
-									variant="outline"
-									>{{ subcategory.getLeafColumns().filter((c) => c.getIsVisible()).length }}</Badge
-								>
+								<div>
+									<span>{{ titleCase(subcategory.id) }}</span>
+									<Badge
+										v-if="
+											subcategory.columns.length > 0 &&
+											subcategory.getLeafColumns().filter((c) => c.getIsVisible()).length
+										"
+										class="ml-2"
+										variant="outline"
+										>{{
+											subcategory.getLeafColumns().filter((c) => c.getIsVisible()).length
+										}}</Badge
+									>
+								</div>
 
 								<ChevronDown
 									class="size-4 shrink-0 grow-0"