125692 merge 125587

apps/app/src/components/Bookmarks/BookmarkItem.tsx

@@ -123,7 +123,7 @@ export const BookmarkItem = (props: Props): JSX.Element => {
       useDragMode={isOperable}
     >
       <li
-        className="grw-bookmark-item-list list-group-item list-group-item-action border-0 py-0 mr-auto d-flex my-2 align-items-center"
+        className="grw-bookmark-item-list list-group-item list-group-item-action border-0 py-0 my-2 mr-auto d-flex align-items-center"
         key={bookmarkedPage._id}
         id={bookmarkItemId}
         style={{ paddingLeft }}
@@ -136,7 +136,7 @@ export const BookmarkItem = (props: Props): JSX.Element => {
             onPressEnter={pressEnterForRenameHandler}
             validationTarget={ValidationTarget.PAGE}
           />
-        ) : <PageListItemS page={bookmarkedPage} pageTitle={pageTitle}/>}
+        ) : <PageListItemS page={bookmarkedPage} pageTitle={pageTitle} isBookmarkItem/>}
 
         <div className='grw-foldertree-control'>
           <PageItemControl

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

@@ -6,16 +6,23 @@ import { UserPicture } from '@growi/ui/dist/components/User/UserPicture';
 
 import { IPageHasId } from '~/interfaces/page';
 
+import styles from './PageList.module.scss';
 
 type PageListItemSProps = {
   page: IPageHasId,
   noLink?: boolean,
   pageTitle?: string
+  isBookmarkItem?: boolean,
 }
 
 export const PageListItemS = (props: PageListItemSProps): JSX.Element => {
 
-  const { page, noLink = false, pageTitle } = props;
+  const {
+    page,
+    noLink = false,
+    pageTitle,
+    isBookmarkItem = false,
+  } = props;
 
   const path = pageTitle != null ? pageTitle : page.path;
 
@@ -24,6 +31,16 @@ export const PageListItemS = (props: PageListItemSProps): JSX.Element => {
     pagePathElement = <a className="text-break" href={page.path}>{pagePathElement}</a>;
   }
 
+  if (isBookmarkItem) {
+    pagePathElement = (
+      <div className={`${styles['page-list']}`}>
+        <div className="mx-2 path-element">
+          <a className="text-break" href={page.path}>{pagePathElement}</a>
+        </div>
+      </div>
+    );
+  }
+
   return (
     <>
       <UserPicture user={page.lastUpdateUser} noLink={noLink} />

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

@@ -90,4 +90,12 @@
       }
     }
   }
+
+  .path-element {
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    line-height: 1.2;
+  }
 }