Extended width of years with 3 quarters to full width

site/src/pages/RoadmapPage/Planner.scss

@@ -1,2 +0,0 @@
-.planner {
-}

site/src/pages/RoadmapPage/Planner.tsx

@@ -140,6 +140,9 @@ const Planner: FC = () => {
 
   const { unitCount, courseCount } = calculatePlannerOverviewStats();
 
+  const quarterCounts = currentPlanData.map((years) => years.quarters.length);
+  const maxQuarterCount = Math.max(...quarterCounts);
+
   return (
     <div className="planner">
       <Modal
@@ -174,13 +177,13 @@ const Planner: FC = () => {
         saveRoadmap={saveRoadmap}
         missingPrerequisites={missingPrerequisites}
       />
-      <section className="years">
+      <section className="years" data-max-quarter-count={maxQuarterCount}>
         {currentPlanData.map((year, yearIndex) => {
           return <Year key={yearIndex} yearIndex={yearIndex} data={year} />;
         })}
       </section>
       <AddYearPopup
-        placeholderName={'Year ' + (currentPlanData.length + 1)}
+        placeholderName={`Year ${currentPlanData.length + 1}`}
         placeholderYear={
           currentPlanData.length === 0
             ? new Date().getFullYear()

site/src/pages/RoadmapPage/Year.scss

@@ -44,11 +44,72 @@
 .year-accordion-content {
   border-radius: var(--border-radius);
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+  --min-quarter-width: 250px;
+  grid-template-columns: repeat(auto-fill, minmax(var(--min-quarter-width), 1fr));
   gap: 20px;
   margin-block: 16px 4px;
 }
 
+// Each breakpoint is the width at which a quarter can be added to a year, given a min width of 250px.
+// The corresponding value of --min-quarter-width is the maximum width that a quarter can be
+// at that breakpoint with data-max-quarter-count quarters, without overflowing into a 2nd row.
+// This code works up until 2598px wide, at which quarter count 5 doesn't extend to the full width.
+// If there was a formula to calculate all of this, that would be extremely beneficial.
+
+@media only screen and (min-width: 1108px) {
+  .years[data-max-quarter-count='1'] .year-accordion-content {
+    --min-quarter-width: 520px;
+  }
+}
+
+@media only screen and (min-width: 1378px) {
+  .years[data-max-quarter-count='2'] .year-accordion-content {
+    --min-quarter-width: 380px;
+  }
+}
+
+@media only screen and (min-width: 1648px) {
+  .years[data-max-quarter-count='1'] .year-accordion-content {
+    --min-quarter-width: 1060px;
+  }
+  .years[data-max-quarter-count='2'] .year-accordion-content {
+    --min-quarter-width: 520px;
+  }
+  .years[data-max-quarter-count='3'] .year-accordion-content {
+    --min-quarter-width: 340px;
+  }
+}
+
+@media only screen and (min-width: 1918px) {
+  .years[data-max-quarter-count='2'] .year-accordion-content {
+    --min-quarter-width: 655px;
+  }
+  .years[data-max-quarter-count='3'] .year-accordion-content {
+    --min-quarter-width: 430px;
+  }
+  .years[data-max-quarter-count='4'] .year-accordion-content {
+    --min-quarter-width: 304px;
+  }
+}
+
+@media only screen and (min-width: 2194px) {
+  .years[data-max-quarter-count='3'] .year-accordion-content {
+    --min-quarter-width: 520px;
+  }
+  .years[data-max-quarter-count='4'] .year-accordion-content {
+    --min-quarter-width: 385px;
+  }
+  .years[data-max-quarter-count='5'] .year-accordion-content {
+    --min-quarter-width: 304px;
+  }
+}
+
+@media only screen and (min-width: 2532px) {
+  .years[data-max-quarter-count='6'] .year-accordion-content {
+    --min-quarter-width: 258px;
+  }
+}
+
 .year-accordion-title {
   display: flex;
   justify-content: space-between;