From ab2bf713042ec3bde118684fdd59eead17c36139 Mon Sep 17 00:00:00 2001
From: Quantum <quantum2048@gmail.com>
Date: Sun, 13 Feb 2022 15:00:20 -0500
Subject: [PATCH] Support reflowing to 2 days per row

---
 src/Calendar.scss | 28 ++++++++++++++++++++--------
 src/Calendar.tsx  |  3 ++-
 2 files changed, 22 insertions(+), 9 deletions(-)

diff --git a/src/Calendar.scss b/src/Calendar.scss
index 304f61c..a9ffe56 100644
--- a/src/Calendar.scss
+++ b/src/Calendar.scss
@@ -48,22 +48,34 @@
     display: none;
 }
 
-@include media-breakpoint-up(md) {
-    .Month-decade {
-        @include make-row($gutter: 0);
+.Month-decade {
+    @include make-row($gutter: 0);
 
-        > * {
-            @include make-col-ready();
-        }
+    > * {
+        @include make-col-ready();
     }
 }
 
-.Month-decadeSplitter {
+.Month-decadeSplitter-small, .Month-decadeSplitter-medium {
     width: 100%;
 }
 
+.Month-decadeSplitter-medium {
+    display: none;
+}
+
+@include media-breakpoint-up(md) {
+    .Month-decadeSplitter-small {
+        display: none;
+    }
+
+    .Month-decadeSplitter-medium {
+        display: block;
+    }
+}
+
 @include media-breakpoint-up(xl) {
-    .Month-decadeSplitter {
+    .Month-decadeSplitter-medium {
         display: none;
     }
 
diff --git a/src/Calendar.tsx b/src/Calendar.tsx
index d2251d7..91df123 100644
--- a/src/Calendar.tsx
+++ b/src/Calendar.tsx
@@ -54,7 +54,8 @@ function NormalMonth({year, month, todayJDN}: MonthProps & { todayJDN: number })
             Array.from(Array(3).keys()).map(i => <div className="Month-decade">{
                 Array.from(Array(10).keys()).map(j => <>
                     <NormalDay year={year} month={month} day={i * 10 + j + 1 as Day} todayJDN={todayJDN}/>
-                    {j === 4 && <div className="Month-decadeSplitter"/>}
+                    {j % 2 === 1 && <div className="Month-decadeSplitter-small"/>}
+                    {j === 4 && <div className="Month-decadeSplitter-medium"/>}
                 </>)
             }</div>)
         }</div>