From 60f980d83245191e26a67e63cfb86c7652cb613b Mon Sep 17 00:00:00 2001
From: Ilia Ross <ilia@ross.gdn>
Date: Sun, 25 Oct 2026 02:27:12 +0100
Subject: [PATCH] Fix multi-select badge size and alignment

---
 ui-lib.pl                      |  8 +++++---
 unauthenticated/css/ui-lib.css | 13 +++++++------
 2 files changed, 12 insertions(+), 9 deletions(-)

diff --git a/ui-lib.pl b/ui-lib.pl
index 13b9ce248..824f304f4 100755
--- a/ui-lib.pl
+++ b/ui-lib.pl
@@ -6422,9 +6422,9 @@ foreach my $it (@items) {
 	# Keep plain tags compatible while allowing separate state badges.
 	my @badges = ref($it->{'badges'}) eq 'ARRAY' ?
 		grep { ref($_) eq 'ARRAY' && defined($_->[0]) } @{$it->{'badges'}} : ();
-	my $side = defined($it->{'tag'}) && $it->{'tag'} ne '' ?
-		&ui_chip($it->{'tag'}) : '';
-	$side .= join('', map { &ui_badge(@$_) } @badges);
+	# Badges and metadata come first, so the tag chip stays a fixed
+	# right-hand column across rows with and without badges.
+	my $side = join('', map { &ui_badge(@$_) } @badges);
 	# Several facts share one badge, with plain labels and accessible tooltips.
 	my @metadata = ref($it->{'metadata'}) eq 'ARRAY' ?
 		grep { ref($_) eq 'HASH' && defined($_->{'label'}) &&
@@ -6442,6 +6442,8 @@ foreach my $it (@items) {
 			{ 'class' => 'ui_badge ui_badge_neutral ui_badge_small '.
 				'ui_badge_rounded ui_multi_metadata' });
 		}
+	$side .= &ui_chip($it->{'tag'})
+		if (defined($it->{'tag'}) && $it->{'tag'} ne '');
 	$row .= &ui_tag('span', $side,
 		{ 'class' => &_ui_class('ui_multi_side', @badges ? 'ui_multi_badges' : undef) })
 		if (length($side));
diff --git a/unauthenticated/css/ui-lib.css b/unauthenticated/css/ui-lib.css
index 9cbda9e86..32723d60c 100644
--- a/unauthenticated/css/ui-lib.css
+++ b/unauthenticated/css/ui-lib.css
@@ -1735,23 +1735,24 @@ a.ui_list_link:hover { color: var(--ui-accent) !important; }
 	white-space: nowrap;
 }
 .ui_multi_side { margin-left: auto; padding-left: 8px; flex-shrink: 0; }
-/* Metadata stays secondary to the label, with room between rows and badges. */
-.ui_multi_item:has(> .ui_multi_badges) { padding: 7px 10px; }
+/* Badges share the chip's size and the row's normal padding, so rows with
+ * badges line up with rows without them. */
 .ui_multi_badges {
 	display: flex;
 	flex-wrap: wrap;
 	align-items: center;
 	justify-content: flex-end;
-	gap: 6px 8px;
+	gap: 6px;
 	flex-shrink: 1;
-	padding-left: 16px;
 }
 .ui_multi_badges .ui_badge {
-	padding: 3px 10px;
+	padding: 1px 8px;
+	font-size: 0.86em;
 	font-weight: 400;
-	line-height: 1.4;
+	line-height: 1.5;
 	border-color: color-mix(in srgb, currentColor 16%, transparent);
 }
+.ui_multi_badges .ui_badge .ui_svg_icon { width: 1em; height: 1em; }
 .ui_multi_badges .ui_badge_neutral {
 	background: color-mix(in srgb, var(--ui-neutral-soft) 35%, transparent);
 	color: var(--ui-fg-muted);