From 3e5be857c4f0b10b45b2c107a8db2c3f2db5655f Mon Sep 17 00:00:00 2001
From: dev <info@activething.com>
Date: Thu, 21 May 2026 22:55:07 +0200
Subject: [PATCH] fix(color-picker): single-row preset palette of 10 swatches
 that share container width
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

User report: 'la paleta dejala en 10 y más pequeños para que solo
ocupen una linea, se deben de ajustar a lo ancho'.

Demo
----
- Preset palette trimmed from 11 to 10 colors.

CSS — swatch-group rewritten to single-row flex layout
------------------------------------------------------
- `display: flex; flex-wrap: nowrap; inline-size: 100%; min-inline-size:
  0` so all swatches share the available width.
- Each `<SwatchTrigger>` becomes `flex: 1 1 0` + `min-inline-size: 0`
  + `aspect-ratio: 1` + `inline-size/block-size: auto`, with the
  recipe token (`--color-picker-swatch-size`) acting as `max-inline-
  size` instead of a fixed size. Net effect: swatches shrink/grow
  together to fit any popover width and any number of presets, while
  capping at 1.5rem so they don't blow up on huge containers.

Math at default md popover (~19.5rem content width, ~14px padding each
side, 10 swatches × ~23px + 9 × 6px gap ≈ ~284px usable). Each swatch
lands at ~23px and the row never wraps.

Checks: 67/67 component-audit PASS, svelte-check 0 errors / 0 warnings.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../components/color-picker/color-picker.css  | 24 +++++++++++++++----
 .../uix/components/color-picker/+page.svelte  |  4 ++--
 2 files changed, 21 insertions(+), 7 deletions(-)

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');