fix: fix search bar bug that grows in width

refs: SHELL-49 (#315)
zextras · Aug 28, 2023 · ed4194a · ed4194a
1 parent 218ef2b
commit ed4194a
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 4 deletions.
diff --git a/src/search/search-bar.tsx b/src/search/search-bar.tsx
@@ -358,11 +358,12 @@ export const SearchBar = (): React.JSX.Element => {
 
 	return (
 		<Container
-			minWidth="fit-content"
 			width="fit"
 			flexGrow="1"
 			orientation="horizontal"
 			ref={containerRef}
+			mainAlignment="flex-start"
+			crossAlignment="flex-start"
 		>
 			<Tooltip
 				disabled={!searchDisabled}
@@ -372,8 +373,8 @@ export const SearchBar = (): React.JSX.Element => {
 					t('search.unable_to_parse_query', 'Unable to complete the search, clear it and retry')
 				}
 			>
-				<Container orientation="horizontal" width="fill">
-					<Container minWidth="32rem" width="fill">
+				<Container orientation="horizontal" width="fill" maxWidth={'53vw'} minWidth={'32rem'}>
+					<Container minWidth="20rem" width="fill">
 						<Container orientation="horizontal" width="fill">
 							<Container width="fit">
 								<ModuleSelector />
@@ -400,6 +401,7 @@ export const SearchBar = (): React.JSX.Element => {
 									onFocus={addFocus}
 									disableOptions={disableOptions}
 									requireUniqueChips={false}
+									wrap={'nowrap'}
 								/>
 							</StyledContainer>
 						</Container>

diff --git a/src/shell/shell-header.tsx b/src/shell/shell-header.tsx
@@ -64,7 +64,6 @@ const ShellHeader = ({
 			<Catcher>
 				<Container
 					orientation="horizontal"
-					maxWidth="75%"
 					mainAlignment="flex-start"
 					minWidth="fit-content"
 					data-testid="HeaderMainLogoContainer"