From c4cd84dcc884469a0d84e2bec239b2fc3596c44f Mon Sep 17 00:00:00 2001
From: Andrew <80933354+ndrooo@users.noreply.github.com>
Date: Sat, 24 Aug 2024 13:13:55 -0400
Subject: [PATCH] fix: Add a wrapper element to dates in PageList. (#1345)

* Add a wrapper span to dates in PageList.

This means there is a placeholder when date is not specified, so the values in grid-template-columns always line up correctly.

* Use a <div> instead -- better practice to stick to block elements.
---
 quartz/components/PageList.tsx         | 12 +++++++-----
 quartz/components/styles/listPage.scss |  2 +-
 2 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/quartz/components/PageList.tsx b/quartz/components/PageList.tsx
index 8dc19b74c..cc0124a8f 100644
--- a/quartz/components/PageList.tsx
+++ b/quartz/components/PageList.tsx
@@ -46,11 +46,13 @@ export const PageList: QuartzComponent = ({ cfg, fileData, allFiles, limit, sort
         return (
           <li class="section-li">
             <div class="section">
-              {page.dates && (
-                <p class="meta">
-                  <Date date={getDate(cfg, page)!} locale={cfg.locale} />
-                </p>
-              )}
+              <div>
+                {page.dates && (
+                  <p class="meta">
+                    <Date date={getDate(cfg, page)!} locale={cfg.locale} />
+                  </p>
+                )}
+              </div>
               <div class="desc">
                 <h3>
                   <a href={resolveRelative(fileData.slug!, page.slug!)} class="internal">
diff --git a/quartz/components/styles/listPage.scss b/quartz/components/styles/listPage.scss
index d51568dc0..44de70a45 100644
--- a/quartz/components/styles/listPage.scss
+++ b/quartz/components/styles/listPage.scss
@@ -23,7 +23,7 @@ li.section-li {
       background-color: transparent;
     }
 
-    & > .meta {
+    & .meta {
       margin: 0 1em 0 0;
       opacity: 0.6;
     }