From 92688a31591471eaeb9ab3760b30ff0b6466c578 Mon Sep 17 00:00:00 2001
From: Greg Grothaus <ggrothau@gmail.com>
Date: Sun, 21 Jul 2024 15:41:43 -0700
Subject: [PATCH] Work credits table improvements (#365)

* Improved the layout and formatting of the work credits guide page.

* Adjusted the layout of the work credits table to ensure the final year is consistently aligned with the other years.
---
 src/routes/guides/work-credits/+page.svelte | 93 +++++++++++++--------
 1 file changed, 58 insertions(+), 35 deletions(-)

diff --git a/src/routes/guides/work-credits/+page.svelte b/src/routes/guides/work-credits/+page.svelte
index bfb0f5f..26ea5e7 100644
--- a/src/routes/guides/work-credits/+page.svelte
+++ b/src/routes/guides/work-credits/+page.svelte
@@ -28,25 +28,32 @@
   <p class="postdate">Published: {publishDate.toLocaleDateString()}</p>
 
   <p>
-    Understanding work credits is crucial for anyone planning their retirement or considering Social Security benefits. This guide explains what work credits are, how to earn them, and why they matter for your Social Security eligibility.
+    Understanding work credits is crucial for anyone planning their retirement
+    or considering Social Security benefits. This guide explains what work
+    credits are, how to earn them, and why they matter for your Social Security
+    eligibility.
   </p>
 
   <h2>What Are Work Credits?</h2>
 
   <p>
-    <strong>Work credits</strong> are the building blocks of your Social Security eligibility. They are earned by working and paying Social Security taxes. This system ensures a minimum level of work contribution before qualifying for benefits.
+    <strong>Work credits</strong> are the building blocks of your Social Security
+    eligibility. They are earned by working and paying Social Security taxes. This
+    system ensures a minimum level of work contribution before qualifying for benefits.
   </p>
 
   <h2>How Many Work Credits Do I Need?</h2>
 
   <h3>For Retirement Benefits</h3>
   <p>
-    <strong>You need 40 work credits to qualify for retirement benefits.</strong> This typically requires at least 10 years of work.
+    <strong>You need 40 work credits to qualify for retirement benefits.</strong
+    > This typically requires at least 10 years of work.
   </p>
 
   <h3>For Survivor's Benefits</h3>
   <p>
-    The number of work credits required for your family to qualify for survivor's benefits depends on your age at the time of death:
+    The number of work credits required for your family to qualify for
+    survivor's benefits depends on your age at the time of death:
   </p>
   <ul>
     <li>Younger individuals need fewer credits</li>
@@ -55,7 +62,11 @@
 
   <h3>For Disability Benefits</h3>
   <p>
-    The required number of work credits for disability benefits varies based on your age when you become disabled. For more details, visit the <a href="https://www.ssa.gov/benefits/retirement/planner/credits.html#h3">official SSA website</a>.
+    The required number of work credits for disability benefits varies based on
+    your age when you become disabled. For more details, visit the <a
+      href="https://www.ssa.gov/benefits/retirement/planner/credits.html#h3"
+      >official SSA website</a
+    >.
   </p>
 
   <h2>How Do I Earn Work Credits?</h2>
@@ -69,56 +80,66 @@
 
   <h3>Before 1987</h3>
   <p>
-    One work credit was earned for each calendar quarter with at least $250 in wages. These were also known as "quarters of coverage" (QCs).
+    One work credit was earned for each calendar quarter with at least $250 in
+    wages. These were also known as "quarters of coverage" (QCs).
   </p>
 
   <h3>After 1987</h3>
-  <p>
-    The system changed to a yearly basis:
-  </p>
+  <p>The system changed to a yearly basis:</p>
   <ul>
     <li>One credit is earned for each fixed dollar amount of earnings</li>
     <li>The required amount changes annually to keep pace with wage growth</li>
-    <li>Example: In 2000, you would earn one credit for each $780 of earnings</li>
+    <li>
+      Example: In 2000, you would earn one credit for each $780 of earnings
+    </li>
   </ul>
 
   <h2>Amount of Earnings Needed per Credit</h2>
 
   <p>
-    The earnings required to earn a credit change yearly. Here's a table showing the amount needed for each year since 1978:
+    The earnings required to earn a credit change yearly. Here's a table showing
+    the amount needed for each year since 1978:
   </p>
 
-  <table class="earnings-table">
-    <tr><th>Year</th><th>Earnings Required</th></tr>
+  <div class="earnings-container">
     {#each Object.entries(constants.EARNINGS_PER_CREDIT) as [year, earnings]}
-      <tr>
-        <td>{year}</td>
-        <td>${earnings.wholeDollars()}</td>
-      </tr>
+      <div class="earnings-year">
+        <span class="year">{year}:</span>
+        <span class="earnings">{earnings.wholeDollars()}</span>
+      </div>
     {/each}
-  </table>
-
+  </div>
   <p>
-    <strong>Example:</strong> In 1989, $500 earned one credit. With $1,700 in earnings that year, you would earn 3 credits. The extra $200 above $1,500 would not count towards a partial credit.
+    <strong>Example:</strong> In 1989, $500 earned one credit. With $1,700 in earnings
+    that year, you would earn 3 credits. The extra $200 above $1,500 would not count
+    towards a partial credit.
   </p>
 
   <h2>Qualifying for Spousal Benefits</h2>
 
   <p>
-    <strong>Important note:</strong> To receive spousal benefits, you don't need to have earned work credits yourself. You only need to be married to someone who has earned enough work credits.
+    <strong>Important note:</strong> To receive spousal benefits, you don't need
+    to have earned work credits yourself. You only need to be married to someone
+    who has earned enough work credits.
   </p>
 
   <h2>Additional Resources</h2>
 
   <ul>
     <li>
-      <a href="https://www.ssa.gov/benefits/retirement/planner/credits.html">Social Security Administration: How You Earn Credits</a>
+      <a href="https://www.ssa.gov/benefits/retirement/planner/credits.html"
+        >Social Security Administration: How You Earn Credits</a
+      >
     </li>
     <li>
-      <a href="https://www.ssa.gov/benefits/retirement/planner/credits.html#h3">Social Security Administration: How Many Credits You Need</a>
+      <a href="https://www.ssa.gov/benefits/retirement/planner/credits.html#h3"
+        >Social Security Administration: How Many Credits You Need</a
+      >
     </li>
     <li>
-      <a href="https://www.ssa.gov/oact/cola/QC.html">Social Security Administration: Quarters of Coverage</a>
+      <a href="https://www.ssa.gov/oact/cola/QC.html"
+        >Social Security Administration: Quarters of Coverage</a
+      >
     </li>
   </ul>
 
@@ -126,21 +147,23 @@
 </div>
 
 <style>
-  .earnings-table {
+  .earnings-container {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+    gap: 0.5rem;
     width: 100%;
-    border-collapse: collapse;
-    margin-bottom: 1rem;
+    font-size: 1.3rem;
+    padding: 1rem 0;
   }
-  .earnings-table th, .earnings-table td {
-    border: 1px solid #ddd;
-    padding: 8px;
-    text-align: left;
+  .earnings-year {
+    padding: 0.5rem;
   }
-  .earnings-table th {
-    background-color: #f2f2f2;
+  .year {
     font-weight: bold;
+    padding-right: 0.5rem;
   }
-  .earnings-table tr:nth-child(even) {
-    background-color: #f9f9f9;
+  .earnings {
+    display: inline-block;
+    width: 4em;
   }
 </style>