Merge pull request #312 from 10up/fix/styling-of-search-item

Fix: styling of search results in ContentSearch component
10up · Apr 16, 2024 · 04c49b2 · 04c49b2
2 parents 9fc0f7d + 434edbe
commit 04c49b2
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 3 deletions.
diff --git a/components/content-search/SearchItem.js b/components/content-search/SearchItem.js
@@ -42,6 +42,7 @@ const ButtonStyled = styled(Button)`
 	.block-editor-link-control__search-item-header {
 		display: flex;
 		flex-direction: column;
+		align-items: flex-start;
 	}
 
 	mark {

diff --git a/components/content-search/index.js b/components/content-search/index.js
@@ -40,6 +40,14 @@ const LoadingContainer = styled.div`
 	}
 `;
 
+const StyledNavigableMenu = styled(NavigableMenu)`
+	width: 100%;
+`;
+
+const StyledSearchControl = styled(SearchControl)`
+	width: 100%;
+`;
+
 const ContentSearch = ({
 	onSelectItem,
 	placeholder,
@@ -353,8 +361,8 @@ const ContentSearch = ({
 
 	return (
 		<StyledComponentContext cacheKey="tenup-component-content-search">
-			<NavigableMenu onNavigate={handleOnNavigate} orientation="vertical">
-				<SearchControl
+			<StyledNavigableMenu onNavigate={handleOnNavigate} orientation="vertical">
+				<StyledSearchControl
 					__next40pxDefaultSize
 					value={searchString}
 					onChange={(newSearchString) => {
@@ -444,7 +452,7 @@ const ContentSearch = ({
 						{isLoading && currentPage > 1 && <StyledSpinner />}
 					</>
 				) : null}
-			</NavigableMenu>
+			</StyledNavigableMenu>
 		</StyledComponentContext>
 	);
 };