From eba1a86f4e25bac89ea455a7c32e52dfaeb0c5ce Mon Sep 17 00:00:00 2001
From: eloisetaylor5693 <eloisetaylor5693@gmail.com>
Date: Sat, 30 Nov 2024 17:37:06 +0000
Subject: [PATCH] Fix file list item styling

- File list item text wraps inline with the text instead of
  to the PDF icon
- Reduced padding between files
---
 src/pages/resources.js         | 34 ++++++++++++++++++----------------
 src/pages/resources.module.css | 16 +++++++++-------
 2 files changed, 27 insertions(+), 23 deletions(-)

diff --git a/src/pages/resources.js b/src/pages/resources.js
index c64ac1ce..184f141d 100644
--- a/src/pages/resources.js
+++ b/src/pages/resources.js
@@ -18,22 +18,24 @@ const ResourcesIndex = ({ data, location }) => {
 
       <p>{resourcesPageData?.subTitle}</p>
 
-      {/* https://stackoverflow.com/questions/13354578/custom-li-list-style-with-font-awesome-icon */}
-      {/* <FontAwesomeIcon icon="fa-regular fa-file" /> */}
-      {/* <FontAwesomeIcon icon="fa-solid fa-file-image" /> */}
-      {/* <FontAwesomeIcon icon="fa-regular fa-file-lines" /> */}
-      {/* <FontAwesomeIcon icon="fa-solid fa-file-pdf" /> */}
-      <ul className={style.pdfFileListItem}>
-        {resourcesPageData?.resourceFiles?.map(resourceFile => {
-          return (
-            <li className={style.linkText}>
-              <a href={resourceFile.url} className={style.linkText}>
-                {resourceFile.title}
-              </a>
-            </li>
-          );
-        })}
-      </ul>
+      <div className={style.fileListContainer}>
+        {/* https://stackoverflow.com/questions/13354578/custom-li-list-style-with-font-awesome-icon */}
+        {/* <FontAwesomeIcon icon="fa-regular fa-file" /> */}
+        {/* <FontAwesomeIcon icon="fa-solid fa-file-image" /> */}
+        {/* <FontAwesomeIcon icon="fa-regular fa-file-lines" /> */}
+        {/* <FontAwesomeIcon icon="fa-solid fa-file-pdf" /> */}
+        <ul className={style.pdfFileListItem}>
+          {resourcesPageData?.resourceFiles?.map(resourceFile => {
+            return (
+              <li className={style.linkText}>
+                <a href={resourceFile.url} className={style.linkText}>
+                  {resourceFile.title}
+                </a>
+              </li>
+            );
+          })}
+        </ul>
+      </div>
     </Layout>
   );
 };
diff --git a/src/pages/resources.module.css b/src/pages/resources.module.css
index badbc2f6..af62073a 100644
--- a/src/pages/resources.module.css
+++ b/src/pages/resources.module.css
@@ -1,16 +1,18 @@
+.file-list-container {
+  padding-left: var(--spacing-6);
+}
+
 .pdf-file-list-item {
-  margin-left: var(--spacing-0);
   list-style-image: url("../images/PDF_32.png");
+  list-style-position: outside;
 }
 
 .pdf-file-list-item li {
-  margin-left: var(--spacing-0);
-  padding-left: var(--spacing-0);
+  margin-bottom: 0%;
 }
 
 .link-text {
   vertical-align: middle;
-  padding-bottom: var(--fontSize-4);
   top: -15px;
   position: relative;
 }
@@ -20,13 +22,13 @@
     top: unset;
     position: unset;
     vertical-align: middle;
-    padding-bottom: var(--fontSize-4);
+    padding-bottom: var(--fontSize-3);
   }
 }
 
 @media screen and (min-width: 600px) {
-  .pdf-file-list-item {
-    margin-left: var(--spacing-4);
+  .file-list-container {
+    padding-left: var(--spacing-8);
   }
 
   .pdf-file-list-item li {