ISSUE #5264 - fix: too long word in the search input can cause UI oddity

3drepo · Dec 6, 2024 · 8d1e2fa · 8d1e2fa
1 parent fefed4f
commit 8d1e2fa
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 3 deletions.
diff --git a/.../cards/cardFilters/filtersSelection/tickets/list/ticketFiltersSelectionList.component.tsx b/.../cards/cardFilters/filtersSelection/tickets/list/ticketFiltersSelectionList.component.tsx
@@ -19,7 +19,7 @@ import { SearchContext, SearchContextType } from '@controls/search/searchContext
 import { useContext } from 'react';
 import { TicketFiltersSelectionItem } from './item/ticketFiltersSelectionItem.component';
 import { FormattedMessage } from 'react-intl';
-import { MenuList, EmptyListMessage } from './ticketFiltersSelectionList.styles';
+import { MenuList, EmptyListMessage, SearchWord } from './ticketFiltersSelectionList.styles';
 import { CardFilter } from '../../../cardFilters.types';
 
 type TicketFiltersSelectionListProps = {
@@ -34,7 +34,7 @@ export const TicketFiltersSelectionList = ({ onFilterClick }: TicketFiltersSelec
 				id="viewer.card.tickets.filters.emptyList"
 				defaultMessage="We couldn't find a match for {query}. Please try another search."
 				values={{
-					query: <b>&quot;{query}&quot;</b>,
+					query: <SearchWord>&quot;{query}&quot;</SearchWord>,
 				}}
 			/>
 		</EmptyListMessage>

diff --git a/...ewer/cards/cardFilters/filtersSelection/tickets/list/ticketFiltersSelectionList.styles.ts b/...ewer/cards/cardFilters/filtersSelection/tickets/list/ticketFiltersSelectionList.styles.ts
@@ -28,5 +28,10 @@ export const MenuList = styled(MenuListBase)`
 `;
 
 export const EmptyListMessage = styled(EmptyListMessageBase)`
-	margin: 0 10px 10px
+	margin: 0 10px 10px;
+`;
+
+export const SearchWord = styled.b`
+	max-width: 365px;
+	word-break: break-word;
 `;