125692

apps/app/src/components/PageList/PageListItemS.tsx

@@ -3,6 +3,7 @@ import React from 'react';
 import { PageListMeta } from '@growi/ui/dist/components/PagePath/PageListMeta';
 import { PagePathLabel } from '@growi/ui/dist/components/PagePath/PagePathLabel';
 import { UserPicture } from '@growi/ui/dist/components/User/UserPicture';
+import Clamp from 'react-multiline-clamp';
 
 import { IPageHasId } from '~/interfaces/page';
 
@@ -35,7 +36,9 @@ export const PageListItemS = (props: PageListItemSProps): JSX.Element => {
     pagePathElement = (
       <div className={`${styles['page-list']}`}>
         <div className="mx-2 path-element">
-          <a className="text-break" href={page.path}>{pagePathElement}</a>
+          <Clamp lines={2}>
+            <a className="text-break" href={page.path}>{pagePathElement}</a>
+          </Clamp>
         </div>
       </div>
     );

packages/ui/src/styles/molecules/_page_list.scss

@@ -92,10 +92,6 @@
   }
 
   .path-element {
-    display: -webkit-box;
-    -webkit-line-clamp: 2;
-    -webkit-box-orient: vertical;
-    overflow: hidden;
     line-height: 1.2;
   }