From 505f209fae760c299f47247f782275c1bfb202a5 Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Mon, 5 Jan 2026 02:26:36 -0800
Subject: [PATCH] fix DetailRow styling for form controls

---
 src/lib/components/sidebar/details/DetailRow.svelte | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/src/lib/components/sidebar/details/DetailRow.svelte b/src/lib/components/sidebar/details/DetailRow.svelte
index 0e4d3409..1ea92d13 100644
--- a/src/lib/components/sidebar/details/DetailRow.svelte
+++ b/src/lib/components/sidebar/details/DetailRow.svelte
@@ -16,7 +16,7 @@
 	let { label, value, children, noHover = false, noPadding = false, compact = false }: Props = $props()
 </script>
 
-<div class="detail-row" class:no-hover={noHover} class:no-padding={noPadding} class:compact>
+<div class="detail-row" class:no-hover={noHover} class:no-padding={noPadding} class:compact class:has-control={children}>
 	<span class="label">{label}</span>
 	<span class="value">
 		{#if children}
@@ -60,13 +60,22 @@
 		.value {
 			font-size: typography.$font-regular;
 			color: var(--text-primary, colors.$grey-10);
+			min-width: 180px;
+		}
+
+		// Static value display (no children snippet)
+		&:not(.has-control) .value {
 			font-weight: typography.$medium;
 			text-align: right;
-			min-width: 180px;
 		}
 
 		&.compact .value {
 			min-width: unset;
 		}
+
+		// Select controls inside DetailRow should have consistent width
+		.value :global([data-select-trigger]) {
+			min-width: 192px;
+		}
 	}
 </style>