From b7152f743bc90411ffd5a9e59057a79be430751b Mon Sep 17 00:00:00 2001
From: Mara-Li <mara-li@outlook.fr>
Date: Mon, 29 Jan 2024 07:52:04 +0100
Subject: [PATCH] feat: div that encapsulate PageList component (#750)

* feat: div that encapsulate PageList component

* change class to follow review

Co-authored-by: Jacky Zhao <j.zhao2k19@gmail.com>

* apply page-listing div to TagContent

---------

Co-authored-by: Jacky Zhao <j.zhao2k19@gmail.com>
---
 quartz/components/pages/FolderContent.tsx | 12 +++++++-----
 quartz/components/pages/TagContent.tsx    | 20 ++++++++++++--------
 2 files changed, 19 insertions(+), 13 deletions(-)

diff --git a/quartz/components/pages/FolderContent.tsx b/quartz/components/pages/FolderContent.tsx
index 436ed91f..47fb02f1 100644
--- a/quartz/components/pages/FolderContent.tsx
+++ b/quartz/components/pages/FolderContent.tsx
@@ -50,11 +50,13 @@ export default ((opts?: Partial<FolderContentOptions>) => {
         <article>
           <p>{content}</p>
         </article>
-        {options.showFolderCount && (
-          <p>{pluralize(allPagesInFolder.length, "item")} under this folder.</p>
-        )}
-        <div>
-          <PageList {...listProps} />
+        <div class="page-listing">
+          {options.showFolderCount && (
+            <p>{pluralize(allPagesInFolder.length, "item")} under this folder.</p>
+          )}
+          <div>
+            <PageList {...listProps} />
+          </div>
         </div>
       </div>
     )
diff --git a/quartz/components/pages/TagContent.tsx b/quartz/components/pages/TagContent.tsx
index 50507461..ec30c5ff 100644
--- a/quartz/components/pages/TagContent.tsx
+++ b/quartz/components/pages/TagContent.tsx
@@ -62,11 +62,13 @@ function TagContent(props: QuartzComponentProps) {
                   </a>
                 </h2>
                 {content && <p>{content}</p>}
-                <p>
-                  {pluralize(pages.length, "item")} with this tag.{" "}
-                  {pages.length > numPages && `Showing first ${numPages}.`}
-                </p>
-                <PageList limit={numPages} {...listProps} />
+                <div class="page-listing">
+                  <p>
+                    {pluralize(pages.length, "item")} with this tag.{" "}
+                    {pages.length > numPages && `Showing first ${numPages}.`}
+                  </p>
+                  <PageList limit={numPages} {...listProps} />
+                </div>
               </div>
             )
           })}
@@ -83,9 +85,11 @@ function TagContent(props: QuartzComponentProps) {
     return (
       <div class={classes}>
         <article>{content}</article>
-        <p>{pluralize(pages.length, "item")} with this tag.</p>
-        <div>
-          <PageList {...listProps} />
+        <div class="page-listing">
+          <p>{pluralize(pages.length, "item")} with this tag.</p>
+          <div>
+            <PageList {...listProps} />
+          </div>
         </div>
       </div>
     )