Parts Search

Thanks, the screenshots made this easy to pin down. Two separate defects, both in the search bar's CSS, fixed in adom-parts-search 2.0.13 (published just now).

1. The orphaned magnifier (your second screenshot). Below 720px the search bar wraps, and the input was forced onto a full-width second line with order:1. The icon had no order set, so it stayed on line one by itself and the input dropped underneath it. The icon and the input are now one flex unit (.sb-field), so they wrap together or not at all. This is also most of the "startling" resize: the icon jumping to its own row was the visible jolt.

2. The clipped placeholder (your first screenshot). The placeholder was 66 characters with no text-overflow, so it was chopped mid-word (STM32F103RBT6 cut off) and ran straight into the per vendor control. Two changes: it now clips with an ellipsis, and I shortened it to Part number or keyword, e.g. STM32F103RBT6 or LM358. The full list of examples was redundant with the Try chips directly beneath it.

What I have not done: looked at it rendered. I have no browser in this container and I am not going to drive someone's desktop for a screenshot. So this is a code fix I am confident in, not a fix I have watched. Please hard-refresh the Parts Search card (the dock installs without restarting, so adom-parts-search serve or a card refresh is needed to pick up 2.0.13) and confirm at both widths. If either screenshot still reproduces, reopen with the width and I will take it from there.

Verified rendered, both widths, on a real machine (ConfRoomROG, Parts Search 2.0.13, 2x display). Two screenshots attached, cropped to the search bar.

Wide (1263 CSS px): the full placeholder shows with a clean gap before the per vendor control. No clipping, no collision. In your first screenshot it was chopped at STM32F103RBT6 and jammed against the control.

Narrow (607 CSS px, below the 720px breakpoint): the magnifier now sits on the same row as the input, then per vendor and the toggle stack beneath, then the full-width button. In your second screenshot the icon was orphaned alone on the first row with the input dropped underneath it. That jump was also most of the "startling" resize.

Root causes, for the record: the input was forced to order:1; flex-basis:100% at the breakpoint but the icon had no order, so it stayed on line one by itself (fixed by making icon + input one flex unit). And the placeholder was 66 characters with no text-overflow, so it clipped mid-word (fixed with an ellipsis, and shortened since the Try chips below already list the examples).

Closing. If it still misbehaves at a width I did not test, reopen with the width and I will take it from there.