diff --git a/web/routes/uix/components/color-picker/+page.svelte b/web/routes/uix/components/color-picker/+page.svelte
index 47e190197..2ec0325c6 100644
--- a/web/routes/uix/components/color-picker/+page.svelte
+++ b/web/routes/uix/components/color-picker/+page.svelte
@@ -259,24 +259,21 @@
 								</div>
 							{/if}
 
-							<!-- Live preview + segmented channel input on one row. -->
-							<div class="cp-preview-row">
+							<!-- Compact value row: live preview swatch + segmented channel
+							     input + format select + eyedropper, all on one line. -->
+							<div class="cp-value-row">
 								<ColorPicker.ValueSwatch />
-								<div class="cp-preview-text">
-									<ColorPicker.ValueText />
-									<span class="cp-preview-format">{format.toUpperCase()}</span>
-								</div>
+								<ColorPicker.ChannelInput>
+									{#snippet children({ segments }: ChannelInputSnippetProps)}
+										{#each segments as { part, value }, i (`${part}-${i}`)}
+											<ColorPicker.ChannelSegment {part}>{value}</ColorPicker.ChannelSegment>
+										{/each}
+										<ColorPicker.FormatSelect />
+									{/snippet}
+								</ColorPicker.ChannelInput>
+								<ColorPicker.EyeDropper aria-label="Pick color from screen" />
 							</div>
 
-							<ColorPicker.ChannelInput>
-								{#snippet children({ segments }: ChannelInputSnippetProps)}
-									{#each segments as { part, value }, i (`${part}-${i}`)}
-										<ColorPicker.ChannelSegment {part}>{value}</ColorPicker.ChannelSegment>
-									{/each}
-									<ColorPicker.FormatSelect />
-								{/snippet}
-							</ColorPicker.ChannelInput>
-
 							<div class="cp-section-label">Preset colors</div>
 							<ColorPicker.SwatchGroup aria-label="Preset colors">
 								{#each presets as preset}
@@ -287,11 +284,6 @@
 								{/each}
 							</ColorPicker.SwatchGroup>
 
-							<div class="cp-eyedropper-row">
-								<ColorPicker.EyeDropper aria-label="Pick color from screen" />
-								<span class="cp-eyedropper-label">Pick from screen</span>
-							</div>
-
 							{#if showFooter && (showClear || showCancel || showClose)}
 								<ColorPicker.Footer>
 									{#if showClear}<ColorPicker.Clear />{/if}
@@ -691,29 +683,27 @@
 		text-transform: uppercase;
 		letter-spacing: 0.04em;
 	}
-	.cp-preview-row {
+	/* Compact value row: swatch + channel input + eyedropper inline. */
+	.cp-value-row {
 		display: flex;
 		align-items: center;
-		gap: var(--uix-space-3, 0.75rem);
-		padding: var(--uix-space-2, 0.5rem);
-		border-radius: var(--uix-radius-sm);
-		background: var(--uix-surface-sunken);
+		gap: var(--uix-space-2, 0.5rem);
+		min-inline-size: 0;
 	}
-	.cp-preview-row :global([data-color-picker-value-swatch]) {
-		inline-size: 2rem;
-		block-size: 2rem;
+	.cp-value-row :global([data-color-picker-value-swatch]) {
+		flex: 0 0 auto;
+		inline-size: 1.75rem;
+		block-size: 1.75rem;
 	}
-	.cp-preview-text {
-		display: flex;
-		flex-direction: column;
-		gap: 2px;
+	.cp-value-row :global([data-color-field]) {
+		flex: 1 1 auto;
 		min-inline-size: 0;
 	}
-	.cp-preview-format {
-		font-size: 10px;
-		color: var(--uix-text-faint);
-		text-transform: uppercase;
-		letter-spacing: 0.06em;
+	.cp-value-row :global([data-color-field-input]) {
+		flex-wrap: nowrap;
+	}
+	.cp-value-row :global([data-color-picker-eye-dropper]) {
+		flex: 0 0 auto;
 	}
 	.cp-section-label {
 		font-size: 11px;
@@ -723,14 +713,4 @@
 		letter-spacing: 0.04em;
 		margin-block-start: var(--uix-space-1, 0.25rem);
 	}
-	.cp-eyedropper-row {
-		display: flex;
-		align-items: center;
-		gap: var(--uix-space-2, 0.5rem);
-		justify-content: flex-end;
-	}
-	.cp-eyedropper-label {
-		font-size: 12px;
-		color: var(--uix-text-faint);
-	}
 </style>