use react multiline clamp

packages/app/src/components/SearchPage/SearchResultListItem.tsx

@@ -1,5 +1,7 @@
 import React, { FC } from 'react';
 
+import Clamp from 'react-multiline-clamp';
+
 import { UserPicture, PageListMeta, PagePathLabel } from '@growi/ui';
 import { DevidedPagePath } from '@growi/core';
 
@@ -20,8 +22,6 @@ type Props ={
   onClickInvoked: (data: string) => void,
 }
 
-const MAX_SNIPPET_LENGTH = 180;
-const APPEND_SNIPPET_STRING = '...';
 
 const SearchResultListItem: FC<Props> = (props:Props) => {
 
@@ -34,14 +34,6 @@ const SearchResultListItem: FC<Props> = (props:Props) => {
   const pagePathElem = <PagePathLabel page={page} isFormerOnly />;
   const snippet = page.elasticSearchResult.snippet;
 
-  const sliceSnippet = (snippet: string): string => {
-    // when regex pattern is not matched with less than 300 characters slicedSnippet is null
-    console.log('snippet', snippet);
-    const slicedAndMatchedSnippet: string[] | null = snippet.slice(0, MAX_SNIPPET_LENGTH).match(/[\s\S]*<\/em>[^(<em)]*/g);
-    return slicedAndMatchedSnippet == null
-      ? `${snippet.slice(0, MAX_SNIPPET_LENGTH)}${APPEND_SNIPPET_STRING}` : `${slicedAndMatchedSnippet[0]}${APPEND_SNIPPET_STRING}`;
-  };
-
   // TODO : send cetain  length of body (revisionBody) from elastisearch by adding some settings to the query and
   //         when keyword is not in page content, display revisionBody.
   // TASK : https://estoc.weseek.co.jp/redmine/issues/79606
@@ -102,8 +94,14 @@ const SearchResultListItem: FC<Props> = (props:Props) => {
             </div>
             <div
               className="mt-1 mb-2"
-              dangerouslySetInnerHTML={{ __html: snippet.length <= MAX_SNIPPET_LENGTH ? snippet : sliceSnippet(snippet) }}
             >
+              <Clamp
+                lines={2}
+              >
+                {/* eslint-disable-next-line react/no-danger */}
+                <div dangerouslySetInnerHTML={{ __html: snippet }}>
+                </div>
+              </Clamp>
             </div>
           </div>
         </div>

packages/app/src/styles/_search.scss

@@ -246,7 +246,7 @@
 }
 
 .search-page-item {
-  height: 160px;
+  height: 130px;
 }
 
 @include media-breakpoint-down(sm) {