From c7a67581d6eddb8e60c4e78a20c171470305f6be Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fabian=20Ka=CC=88gy?= Date: Thu, 24 Aug 2023 10:04:17 +0200 Subject: [PATCH] fix styling of search results in ContentPicker in WordPress 6.3 + --- components/content-search/SearchItem.js | 12 ++++++++++++ components/content-search/index.js | 9 +++------ 2 files changed, 15 insertions(+), 6 deletions(-) diff --git a/components/content-search/SearchItem.js b/components/content-search/SearchItem.js index 856dc0aa..a467127d 100644 --- 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 index 6a0f5934..17cecafe 100644 --- 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`