fix styling of search results in ContentPicker in WordPress 6.3 +

10up · Aug 24, 2023 · c7a6758 · c7a6758
1 parent c38732c
commit c7a6758
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 6 deletions.
diff --git a/components/content-search/SearchItem.js b/components/content-search/SearchItem.js
@@ -6,6 +6,15 @@ import { Button, TextHighlight, Tooltip } from '@wordpress/components';
 import { getTextContent, create } from '@wordpress/rich-text';
 
 const ButtonStyled = styled(Button)`
+	display: flex;
+	text-align: left;
+	width: 100%;
+	justify-content: space-between;
+	align-items: center;
+	border-radius: 2px !important;
+	padding: 2em 0.7em !important;
+	overflow: hidden;
+
 	&:hover {
 		/* Add opacity background to support future color changes */
 		/* Reduce background from #ddd to 0.05 for text contrast  */
@@ -18,6 +27,9 @@ const ButtonStyled = styled(Button)`
 
 	.block-editor-link-control__search-item-type {
 		background-color: rgba(0, 0, 0, 0.05);
+		padding: 2px 4px;
+		text-transform: capitalize;
+		border-radius: 2px;
 	}
 `;
 

diff --git a/components/content-search/index.js b/components/content-search/index.js
@@ -318,12 +318,9 @@ const ContentSearch = ({
 		/* stylelint-disable */
 		max-height: 350px;
 		overflow-y: auto;
-
-		&& {
-			margin: 0;
-			padding: 0;
-			list-style: none;
-		}
+		list-style: none !important;
+		margin: 0;
+		padding: 0;
 	`;
 
 	const loadingCSS = css`