diff --git a/src/uix/eidos/components/color-picker/color-picker.css b/src/uix/eidos/components/color-picker/color-picker.css
index eb922d442..9147febf7 100644
--- a/src/uix/eidos/components/color-picker/color-picker.css
+++ b/src/uix/eidos/components/color-picker/color-picker.css
@@ -378,12 +378,22 @@
 		calc(var(--cp-checker-cell) / -2) 0;
 }
 
-/* ── Swatches ─────────────────────────────────────────────────────────────── */
+/* ── Swatches ──────────────────────────────────────────────────────────────
+ *
+ * The swatch group shares its available inline-size equally between
+ * children so any number of swatches fits on a single row. Each
+ * `<SwatchTrigger>` becomes a flex item that shrinks to fit and stays
+ * square via `aspect-ratio: 1`. The `--color-picker-swatch-size` token
+ * acts as a max — swatches never grow larger than that, but they shrink
+ * freely when the popover is narrow or the preset count is high.
+ */
 
 [data-color-picker-swatch-group] {
-	display: grid;
-	grid-template-columns: repeat(auto-fill, minmax(var(--_color-picker-swatch-size), 1fr));
+	display: flex;
+	flex-wrap: nowrap;
 	gap: var(--color-picker-swatch-gap);
+	inline-size: 100%;
+	min-inline-size: 0;
 }
 
 [data-color-picker-swatch-trigger] {
@@ -391,8 +401,12 @@
 	display: inline-flex;
 	align-items: center;
 	justify-content: center;
-	inline-size: var(--_color-picker-swatch-size);
-	block-size: var(--_color-picker-swatch-size);
+	flex: 1 1 0;
+	min-inline-size: 0;
+	max-inline-size: var(--_color-picker-swatch-size);
+	aspect-ratio: 1;
+	inline-size: auto;
+	block-size: auto;
 	padding: 0;
 	border: 1px solid var(--color-picker-swatch-border);
 	border-radius: var(--color-picker-swatch-radius);
diff --git a/web/routes/uix/components/color-picker/+page.svelte b/web/routes/uix/components/color-picker/+page.svelte
index 2ec0325c6..0bf0270f7 100644
--- a/web/routes/uix/components/color-picker/+page.svelte
+++ b/web/routes/uix/components/color-picker/+page.svelte
@@ -21,6 +21,7 @@
 	const brand: ColorValue = colorValueFromRgb({ r: 30, g: 144, b: 255, a: 1 });
 	const accent: ColorValue = colorValueFromRgb({ r: 234, g: 88, b: 12, a: 0.85 });
 
+	// Ten preset swatches — fit on a single row inside the popover.
 	const presets = [
 		'#ef4444',
 		'#f97316',
@@ -31,8 +32,7 @@
 		'#a855f7',
 		'#ec4899',
 		'#64748b',
-		'#0f172a',
-		'#ffffff'
+		'#0f172a'
 	];
 
 	let tab = $state<Tab>('live');