Merge pull request #7839 from weseek/imprv/122419-125587-adjust-margin-between-title

imprv: Adjust margin between title

apps/app/src/components/Bookmarks/BookmarkFolderTree.module.scss

@@ -64,7 +64,7 @@ $grw-bookmark-item-padding-left: 35px;
 
     .grw-bookmark-item-list{
       min-width: 30px;
-      height: 35px;
+      height: 50px;
 
       .picture {
         width: 16px;

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

@@ -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} isNarrowView/>}
 
         <div className='grw-foldertree-control'>
           <PageItemControl

apps/app/src/components/PageList/PageListItemS.module.scss

@@ -0,0 +1,3 @@
+.page-title {
+  line-height: 1.2;
+}

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

@@ -3,19 +3,27 @@ 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';
 
+import styles from './PageListItemS.module.scss';
 
 type PageListItemSProps = {
   page: IPageHasId,
   noLink?: boolean,
   pageTitle?: string
+  isNarrowView?: boolean,
 }
 
 export const PageListItemS = (props: PageListItemSProps): JSX.Element => {
 
-  const { page, noLink = false, pageTitle } = props;
+  const {
+    page,
+    noLink = false,
+    pageTitle,
+    isNarrowView = false,
+  } = props;
 
   const path = pageTitle != null ? pageTitle : page.path;
 
@@ -27,7 +35,15 @@ export const PageListItemS = (props: PageListItemSProps): JSX.Element => {
   return (
     <>
       <UserPicture user={page.lastUpdateUser} noLink={noLink} />
-      {pagePathElement}
+      {isNarrowView ? (
+        <Clamp lines={2}>
+          <div className={`mx-2 ${styles['page-title']} ${noLink ? 'text-break' : ''}`}>
+            {pagePathElement}
+          </div>
+        </Clamp>
+      ) : (
+        pagePathElement
+      )}
       <span className="ml-2">
         <PageListMeta page={page} />
       </span>