Make calendar stack like a normal calendar.

src/routes/Month.js

@@ -11,6 +11,8 @@ import {
   startOfMonth,
 } from "date-fns"
 
+import { getDateColumnOffset } from "utils/date"
+
 import { SIZES } from "styles/constants"
 
 import { AppLink as Link } from "components/elements"
@@ -18,8 +20,8 @@ import Seek from "components/Seek"
 
 const DayCardGrid = styled.div`
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
-  grid-gap: 20px;
+  grid-template-columns: repeat(7, 1fr);
+  grid-gap: min(1.5vw, 20px);
   margin-top: 20px;
 `
 const DayCard = styled.div`
@@ -48,7 +50,7 @@ const DayCardBanner = styled.div`
   padding: 5px 0px;
 `
 const DayCardContent = styled.div`
-  padding: 20px 25px;
+  padding: 20%
 `
 
 class Month extends Component {
@@ -64,12 +66,13 @@ class Month extends Component {
 
     let dayCards = []
     for (let i = 0; i < getDaysInMonth(currentDay); i++) {
-      const isDisabled = dayIndexesToInclude <= i && isThisMonth(currentDay)
+      const isDisabled = dayIndexesToInclude <= i && isThisMonth(currentDay);
+      const day = new Date(year, month - 1, i + 1);
       if (isDisabled) {
         dayCards.push(
-          <DayCard disabled={isDisabled} key={i}>
+          <DayCard disabled={isDisabled} key={i} style={{ gridColumnStart: getDateColumnOffset(i, day) }}>
             <DayCardBanner>
-              {format(new Date(year, month - 1, i + 1), "ddd")}
+              {format(day, "ddd")}
             </DayCardBanner>
             <DayCardContent>{i + 1}</DayCardContent>
           </DayCard>
@@ -78,12 +81,12 @@ class Month extends Component {
         dayCards.push(
           <Link
             key={i}
-            to={format(new Date(year, month - 1, i + 1), "/YYYY/MM/DD")}
-            style={{ textDecoration: "none" }}
+            to={format(day, "/YYYY/MM/DD")}
+            style={{ textDecoration: "none", gridColumnStart: getDateColumnOffset(i, day) }}
           >
             <DayCard key={i}>
               <DayCardBanner>
-                {format(new Date(year, month - 1, i + 1), "ddd")}
+                {format(day, "ddd")}
               </DayCardBanner>
               <DayCardContent>{i + 1}</DayCardContent>
             </DayCard>

src/utils/date.js

@@ -10,3 +10,5 @@ export const months = {
     new Date(0, index).toLocaleDateString("en-US", { month: "long" })
   ),
 }
+
+export const getDateColumnOffset = (index, date) => index === 0 ? date.getDay() + 1 : undefined;