From aed7b9ed60591e55e180d0683a222f15b22bf34e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fabian=20Ka=CC=88gy?= <mail@fabian-kaegy.de>
Date: Wed, 30 Aug 2023 09:37:32 +0200
Subject: [PATCH] fix spacing of search items in narrow contexts

---
 components/content-search/SearchItem.js | 21 +++++++++++++++++----
 1 file changed, 17 insertions(+), 4 deletions(-)

diff --git a/components/content-search/SearchItem.js b/components/content-search/SearchItem.js
index a467127d..48abe3ed 100644
--- a/components/content-search/SearchItem.js
+++ b/components/content-search/SearchItem.js
@@ -2,7 +2,12 @@ import PropTypes from 'prop-types';
 import styled from '@emotion/styled';
 import { safeDecodeURI, filterURLForDisplay } from '@wordpress/url';
 import { decodeEntities } from '@wordpress/html-entities';
-import { Button, TextHighlight, Tooltip } from '@wordpress/components';
+import {
+	Button,
+	TextHighlight,
+	Tooltip,
+	__experimentalTruncate as Truncate,
+} from '@wordpress/components';
 import { getTextContent, create } from '@wordpress/rich-text';
 
 const ButtonStyled = styled(Button)`
@@ -11,8 +16,9 @@ const ButtonStyled = styled(Button)`
 	width: 100%;
 	justify-content: space-between;
 	align-items: center;
-	border-radius: 2px !important;
-	padding: 2em 0.7em !important;
+	border-radius: 2px;
+	height: auto !important;
+	padding: 0.3em 0.7em;
 	overflow: hidden;
 
 	&:hover {
@@ -31,6 +37,11 @@ const ButtonStyled = styled(Button)`
 		text-transform: capitalize;
 		border-radius: 2px;
 	}
+
+	.block-editor-link-control__search-item-header {
+		display: flex;
+		flex-direction: column;
+	}
 `;
 
 /**
@@ -90,7 +101,9 @@ const SearchItem = ({
 							paddingRight: !showType ? 0 : null,
 						}}
 					>
-						{filterURLForDisplay(safeDecodeURI(suggestion.url)) || ''}
+						<Truncate numberOfLines={1} limit={55} ellipsizeMode="middle">
+							{filterURLForDisplay(safeDecodeURI(suggestion.url)) || ''}
+						</Truncate>
 					</span>
 				</span>
 				{showType && (