fix: handle line getting cut and tooltip not shown

Author: SavvyShah

packages/web/src/components/search/SearchBox.js

@@ -53,7 +53,7 @@ import SearchSvg from '../shared/SearchSvg';
 import { TagItem, TagsContainer } from '../../styles/Tags';
 import Container from '../../styles/Container';
 import Title from '../../styles/Title';
-import { Actions as ActionContainer, searchboxSuggestions, suggestionsContainer, TextArea } from '../../styles/Input';
+import { Actions as ActionContainer, searchboxSuggestions, Suggestion, SuggestionDescription, suggestionsContainer, TextArea } from '../../styles/Input';
 import Button from '../../styles/Button';
 import SuggestionItem from './addons/SuggestionItem';
 import {
@@ -68,7 +68,6 @@ import CancelSvg from '../shared/CancelSvg';
 import CustomSvg from '../shared/CustomSvg';
 import SuggestionWrapper from './addons/SuggestionWrapper';
 import AutofillSvg from '../shared/AutofillSvg';
-import Flex from '../../styles/Flex';
 import AutosuggestFooterContainer from '../../styles/AutoSuggestFooterContainer';
 import HOOKS from '../../utils/hooks';
 import { Answer, Footer, SearchBoxAISection, SourceTags } from '../../styles/SearchBoxAI';
@@ -2077,29 +2076,28 @@ const SearchBox = (props) => {
 																									type={`${sectionItem._suggestion_type}-search-icon`}
 																								/>
 																							</div>
-																							<div className="trim">
-																								<Flex direction="column">
-																									{sectionItem.label && (
-																										<TextWithTooltip
-																											title={sectionItem.label}
-																											className="section-list-item__label"
-																											innerHTML={
-																												sectionItem.label
-																											}
-																										/>
-																									)}
-																									{sectionItem.description && (
-																										<div
-																											className="section-list-item__description"
-																											dangerouslySetInnerHTML={{
-																												__html: XSS(
-																													sectionItem.description,
-																												),
-																											}}
-																										/>
-																									)}
-																								</Flex>
-																							</div>
+																							<Suggestion direction="column">
+																								{sectionItem.label && (
+																									<TextWithTooltip
+																										title={sectionItem.label}
+																										className="section-list-item__label"
+																										innerHTML={
+																											sectionItem.label
+																										}
+																									/>
+																								)}
+																								{sectionItem.description && (
+																									<SuggestionDescription
+																										lines={1}
+																										className="section-list-item__description"
+																										dangerouslySetInnerHTML={{
+																											__html: XSS(
+																												sectionItem.description,
+																											),
+																										}}
+																									/>
+																								)}
+																							</Suggestion>
 																							{getActionIcon(
 																								sectionItem,
 																							)}

packages/web/src/components/search/addons/TextWithTooltip.js

@@ -2,6 +2,19 @@ import { string } from 'prop-types';
 import types from '@appbaseio/reactivecore/lib/utils/types';
 import React, { useState, useEffect, useRef } from 'react';
 
+import styled from '@emotion/styled';
+
+const Container = styled.div`
+	width: 100%;
+	overflow: hidden;
+	white-space: nowrap;
+	text-overflow: ellipsis;
+`;
+
+const Content = styled.span`
+	display: ${props => (props.isOverflowing ? 'inline' : 'block')};
+`;
+
 /**
  * Shows tooltip when text content overflows out of the container
  * */
@@ -15,6 +28,7 @@ const TextWithTooltip = ({
 	useEffect(() => {
 		const container = containerRef.current;
 		const content = contentRef.current;
+
 		if (container && content) {
 			const containerWidth = container.offsetWidth;
 			const contentWidth = content.scrollWidth;
@@ -24,16 +38,17 @@ const TextWithTooltip = ({
 	}, [innerHTML, title]);
 
 	return (
-		<div title={isOverflowing ? title : ''} ref={containerRef} >
-			<div
+		<Container title={isOverflowing ? title : ''} ref={containerRef} >
+			<Content
 				className={className}
 				style={style}
+				isOverflowing={isOverflowing}
 				ref={contentRef}
 				dangerouslySetInnerHTML={{
 					__html: innerHTML,
 				}}
 			/>
-		</div>
+		</Container>
 	);
 };
 

packages/web/src/styles/Input.js

@@ -1,5 +1,6 @@
 import styled from '@emotion/styled';
 import { css } from '@emotion/core';
+import Flex from './Flex';
 
 const alertBorder = ({ theme }) => `
 	border: 1px solid ${theme.colors.alertColor};
@@ -194,19 +195,8 @@ const suggestions = (themePreset, theme) => css`
 		cursor: pointer;
 		padding: 10px;
 		user-select: none;
-
-		& > .trim {
-			display: -webkit-box;
-			display: flex;
-			width: 100%;
-			max-height: 2.3rem;
-			line-height: 1.2rem;
-			-webkit-line-clamp: 2;
-			-webkit-box-orient: vertical;
-			overflow: hidden;
-			text-overflow: ellipsis;
-			white-space: nowrap;
-		}
+		width: 100%;
+		overflow: hidden;
 
 		&:hover,
 		&:focus {
@@ -217,6 +207,15 @@ const suggestions = (themePreset, theme) => css`
 	${themePreset === 'dark' && theme && dark(theme)};
 `;
 
+const TrimmedText = styled.div`
+	display: -webkit-box;
+	width: 100%;
+	-webkit-line-clamp: ${props => props.lines || 2};
+	-webkit-box-orient: vertical;
+	overflow: hidden;
+	text-overflow: ellipsis;
+`;
+
 const searchboxSuggestions = (themePreset, theme) => css`
 	${suggestions(themePreset, theme)};
 
@@ -278,29 +277,22 @@ const searchboxSuggestions = (themePreset, theme) => css`
 		.section-list {
 			padding-left: 0;
 		}
-		.section-list-item {
-			&__label,
-			&__description {
-				overflow: hidden;
-				text-overflow: ellipsis;
-				white-space: nowrap;
-
-				* {
-					margin: 0;
-					padding: 0;
-				}
-			}
-
-			&__label {
-			}
-			&__description {
-				margin-top: 5px;
-				opacity: 0.7;
-				font-size: 12px;
-			}
-		}
 	}
 `;
+const Suggestion = styled(Flex)`
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	width: 100%;
+`;
+
+const SuggestionDescription = styled(TrimmedText)`
+	overflow: hidden;
+	text-overflow: ellipsis;
+	margin-top: 5px;
+	opacity: 0.7;
+	font-size: 12px;
+`;
 
 const suggestionsContainer = css`
 	position: relative;
@@ -346,4 +338,7 @@ export {
 	searchboxSuggestions,
 	TextArea,
 	Actions,
+	TrimmedText,
+	Suggestion,
+	SuggestionDescription,
 };