From 8a321e9eb4e2d49d62b560646a8cc884b2eda1e3 Mon Sep 17 00:00:00 2001 From: JSv4 Date: Wed, 20 May 2026 22:03:05 -0500 Subject: [PATCH] =?UTF-8?q?fix:=20keep=20SearchBox=20icon=20and=20input=20?= =?UTF-8?q?on=20one=20row=20at=20=E2=89=A4480px?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The mobile media query gave .oc-search-box__input flex: 1 1 100%, forcing it onto its own flex line and pushing the order:0 icon to the line above. The input now flexes normally (flex: 1 1 auto) so it shares the first row with the icon, and only the button wraps to a full-width second row. Fixes #27 --- src/SearchBox/SearchBox.styles.ts | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/src/SearchBox/SearchBox.styles.ts b/src/SearchBox/SearchBox.styles.ts index d87f848..0233ccb 100644 --- a/src/SearchBox/SearchBox.styles.ts +++ b/src/SearchBox/SearchBox.styles.ts @@ -125,17 +125,19 @@ export const searchBoxStyles = ` flex-wrap: wrap; } - .oc-search-box__input { - flex: 1 1 100%; - order: 1; - } - .oc-search-box__icon { order: 0; } + .oc-search-box__input { + order: 1; + flex: 1 1 auto; + min-width: 0; + } + .oc-search-box__button { order: 2; + flex: 1 1 100%; width: 100%; margin-top: 8px; }