From 75680a408c977c7aa275fc5eb66c8e20df8672bf Mon Sep 17 00:00:00 2001 From: David Montero Crespo Date: Thu, 23 Jul 2026 05:15:31 +0200 Subject: [PATCH] fix(picker): variant-true previews + datasheet popover above the modal MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - The card preview creates the live element but only forwarded defaultValues.value, so variants sharing a tag rendered identically (both M5Stack Chain matrices showed the dark RGB housing — the mono flag never reached the element). Forward every defaultValues entry, matching what DynamicComponent assigns at placement. - The hover datasheet panel sat at z-index 2000 while the picker overlay was raised to 9000 (above the AI chat), hiding the popover behind the very modal that summons it. Raise it to 9100. --- frontend/src/components/ComponentPickerModal.css | 4 +++- frontend/src/components/ComponentPickerModal.tsx | 15 +++++++++++---- 2 files changed, 14 insertions(+), 5 deletions(-) diff --git a/frontend/src/components/ComponentPickerModal.css b/frontend/src/components/ComponentPickerModal.css index 282eb6e4..dc62a213 100644 --- a/frontend/src/components/ComponentPickerModal.css +++ b/frontend/src/components/ComponentPickerModal.css @@ -485,7 +485,9 @@ * ------------------------------------------------------------------ */ .component-info-panel { position: fixed; - z-index: 2000; + /* Above the picker overlay (9000) — the popover is summoned by hovering + cards INSIDE that modal, so anything lower hides it behind the list. */ + z-index: 9100; width: 316px; max-height: 74vh; overflow-y: auto; diff --git a/frontend/src/components/ComponentPickerModal.tsx b/frontend/src/components/ComponentPickerModal.tsx index 11319574..7f1d83a8 100644 --- a/frontend/src/components/ComponentPickerModal.tsx +++ b/frontend/src/components/ComponentPickerModal.tsx @@ -576,10 +576,17 @@ const ComponentCard: React.FC = ({ component, onSelect, hove (element as HTMLElement).style.transform = `scale(${scale})`; (element as HTMLElement).style.transformOrigin = 'center center'; - // Pass the preset's default value through so value-sensitive elements - // (e.g. wokwi-resistor color bands) render the right look in the picker. - if (component.defaultValues?.value !== undefined) { - (element as any).value = component.defaultValues.value; + // Pass the preset's defaults through so variant-sensitive elements render + // the right look in the picker — e.g. wokwi-resistor color bands (value) + // or the M5Stack Chain matrix light/dark housing (mono). Same property + // assignment DynamicComponent performs when the part is placed, so any + // element that tolerates placement tolerates the preview. + for (const [key, val] of Object.entries(component.defaultValues ?? {})) { + try { + (element as any)[key] = val; + } catch { + /* read-only prop on some upstream element — skip */ + } } // Set default properties for better preview appearance