improve spacing

apps/app/src/client/components/PagePathNavSticky/PagePathNavSticky.tsx

@@ -25,7 +25,7 @@ const { isTrashPage } = pagePathUtils;
 
 
 export const PagePathNavSticky = (props: PagePathNavLayoutProps): JSX.Element => {
-  const { pagePath } = props;
+  const { pagePath, latterLinkClassName, ...rest } = props;
 
   const isPrinting = usePrintMode();
 
@@ -96,10 +96,11 @@ export const PagePathNavSticky = (props: PagePathNavLayoutProps): JSX.Element =>
             return (
               <div className="d-inline-block pe-auto">
                 <PagePathNavLayout
-                  {...props}
+                  pagePath={pagePath}
                   latterLink={latterLink}
-                  latterLinkClassName="fs-3 text-truncate"
+                  latterLinkClassName={`${latterLinkClassName} text-truncate`}
                   maxWidth={navMaxWidth}
+                  {...rest}
                 />
               </div>
             );
@@ -109,7 +110,12 @@ export const PagePathNavSticky = (props: PagePathNavLayoutProps): JSX.Element =>
             // Use 'd-block' to make the children take the full width
             // This is to improve UX when opening/closing CopyDropdown
             <div className="d-block pe-auto">
-              <PagePathNav {...props} inline />
+              <PagePathNav
+                pagePath={pagePath}
+                latterLinkClassName={latterLinkClassName}
+                inline
+                {...rest}
+              />
             </div>
           );
         }}

apps/app/src/client/components/TrashPageList.tsx

@@ -123,7 +123,7 @@ export const TrashPageList = (): JSX.Element => {
   }, [t]);
 
   return (
-    <div data-testid="trash-page-list" className="mt-5 d-edit-none">
+    <div data-testid="trash-page-list" className="d-edit-none">
       <CustomNavAndContents
         navTabMapping={navTabMapping}
         navRightElement={emptyTrashButton}

apps/app/src/components/Common/PagePathNavTitle/PagePathNavTitle.module.scss

@@ -1,5 +0,0 @@
-@use '@growi/core-styles/scss/bootstrap/init' as bs;
-
-.grw-page-path-nav-title :global {
-  min-height: 75px;
-}

apps/app/src/components/Common/PagePathNavTitle/PagePathNavTitle.tsx

@@ -6,10 +6,6 @@ import { useIsomorphicLayoutEffect } from 'usehooks-ts';
 import type { PagePathNavLayoutProps } from '../PagePathNav';
 import { PagePathNav } from '../PagePathNav';
 
-import styles from './PagePathNavTitle.module.scss';
-
-const moduleClass = styles['grw-page-path-nav-title'] ?? '';
-
 const PagePathNavSticky = withLoadingProps<PagePathNavLayoutProps>(
   (useLoadingProps) =>
     dynamic(
@@ -42,15 +38,12 @@ export const PagePathNavTitle = (
     setClient(true);
   }, []);
 
-  const className = `${moduleClass} mb-4`;
-
   return isClient ? (
     <PagePathNavSticky
       {...props}
-      className={className}
       latterLinkClassName="fs-2"
     />
   ) : (
-    <PagePathNav {...props} className={className} latterLinkClassName="fs-2" />
+    <PagePathNav {...props} latterLinkClassName="fs-2" />
   );
 };

apps/app/src/components/PageView/PageContentFooter.tsx

@@ -27,7 +27,7 @@ export const PageContentFooter = (
   }
 
   return (
-    <div className={`${styles['page-content-footer']} my-4 pt-4 d-edit-none`}>
+    <div className={`${styles['page-content-footer']} py-4 d-edit-none`}>
       <div className="page-meta">
         <AuthorInfo
           user={creator}

apps/app/src/components/PageView/PageViewLayout.tsx

@@ -36,7 +36,7 @@ export const PageViewLayout = (props: Props): JSX.Element => {
       <div
         className={`main ${className} ${pageViewLayoutClass} ${fluidLayoutClass} flex-expand-vert ps-sidebar`}
       >
-        <div className="container-lg wide-gutter-x-lg grw-container-convertible flex-expand-vert">
+        <div className="container-lg wide-gutter-x-lg grw-container-convertible flex-expand-vert gap-4">
           {headerContents != null && headerContents}
           {!isPrinting && sideContents != null ? (
             <div className="flex-expand-horiz gap-3 z-0">

apps/app/src/pages/trash/index.page.tsx

@@ -67,8 +67,10 @@ const TrashPage: NextPageWithLayout<Props> = (props: Props) => {
 
         <div className="main ps-sidebar">
           <div className="container-lg wide-gutter-x-lg">
-            <PagePathNavTitle pagePath="/trash" />
-            <TrashPageList />
+            <div className="d-flex flex-column gap-4">
+              <PagePathNavTitle pagePath="/trash" />
+              <TrashPageList />
+            </div>
           </div>
         </div>
       </div>