adjust spaces and styles

packages/app/src/components/DescendantsPageList.tsx

@@ -42,13 +42,15 @@ const DescendantsPageList = (props: Props): JSX.Element => {
     <>
       <PageList pages={data} />
 
-      <PaginationWrapper
-        activePage={activePage}
-        changePage={setPageNumber}
-        totalItemsCount={data.totalCount}
-        pagingLimit={data.limit}
-        align="center"
-      />
+      <div className="my-4">
+        <PaginationWrapper
+          activePage={activePage}
+          changePage={setPageNumber}
+          totalItemsCount={data.totalCount}
+          pagingLimit={data.limit}
+          align="center"
+        />
+      </div>
     </>
   );
 };

packages/app/src/components/NotFoundPage.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react';
+import React, { useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import PageListIcon from './Icons/PageListIcon';
@@ -14,11 +14,11 @@ const NotFoundPage = (): JSX.Element => {
 
   const { data: currentPagePath } = useCurrentPagePath();
 
-  const DescendantsPageListForThisPage = (): JSX.Element => {
+  const DescendantsPageListForThisPage = useCallback((): JSX.Element => {
     return currentPagePath != null
       ? <DescendantsPageList path={currentPagePath} />
       : <></>;
-  };
+  }, [currentPagePath]);
 
   const navTabMapping = useMemo(() => {
     return {
@@ -35,12 +35,12 @@ const NotFoundPage = (): JSX.Element => {
         index: 1,
       },
     };
-  }, [t]);
+  }, [DescendantsPageListForThisPage, t]);
 
 
   return (
     <div className="d-edit-none">
-      <CustomNavAndContents navTabMapping={navTabMapping} />
+      <CustomNavAndContents navTabMapping={navTabMapping} tabContentClasses={['py-4']} />
     </div>
   );
 };

packages/app/src/components/PageList/PageList.tsx

@@ -39,7 +39,7 @@ const PageList = (props: Props): JSX.Element => {
 
   return (
     <div className="page-list">
-      <ul className="page-list-ul page-list-ul-flat">
+      <ul className="page-list-ul list-group-flush">
         {pageList}
       </ul>
     </div>