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