Fix alignment issues

src/Calendar.scss

@@ -4,6 +4,7 @@
 @import 'bootstrap/scss/forms';
 @import 'bootstrap/scss/grid';
 @import 'bootstrap/scss/buttons';
+@import './consts';
 
 .Calendar {
     @include make-container();
@@ -49,7 +50,7 @@
 
 @include media-breakpoint-up(md) {
     .Month-decade {
-        @include make-row();
+        @include make-row($gutter: 0);
 
         > * {
             @include make-col-ready();
@@ -68,7 +69,7 @@
 
     .Month-decadeHead {
         display: block;
-        @include make-row();
+        @include make-row($gutter: 0);
     }
 
     .Day-decade {
@@ -76,17 +77,22 @@
     }
 }
 
+.Day, .DecadeName, .ComplementaryDay-fake {
+    margin: $calendar-gutter;
+    @include make-col($columns: 10);
+}
+
 @include media-breakpoint-up(lg) {
     .ComplementaryDays {
-        @include make-row();
+        @include make-row($gutter: 0);
 
         > * {
             @include make-col-ready();
         }
     }
 
-    .ComplementaryDay {
-        @include make-col($columns: 2);
+    .ComplementaryDay, .ComplementaryDay-fake {
+        @include make-col();
     }
 
     .ComplementaryDays-splitter {
@@ -94,9 +100,17 @@
     }
 }
 
-.Day, .DecadeName {
-    margin: 0.5em;
-    @include make-col($columns: 10);
+.Month, .ComplementaryDays {
+    margin-left: -$calendar-gutter;
+    margin-right: -$calendar-gutter;
+}
+
+.ComplementaryDay {
+    margin-top: $calendar-gutter;
+}
+
+.ComplementaryDay-fake {
+    padding: 0.5em;
 }
 
 .Day {

src/Calendar.tsx

@@ -68,9 +68,11 @@ function ComplementaryDay({year, month, day, todayJDN}: DateProps & { todayJDN:
 }
 
 function ComplementaryDays({year, todayJDN}: { year: number, todayJDN: number }): JSX.Element {
+    const leap = frIsLeap(year);
     return <div className="ComplementaryDays">{
-        Array.from(Array(frIsLeap(year) ? 6 : 5).keys()).map(i => <>
-            <ComplementaryDay year={year} month={13} day={i + 1 as Day} todayJDN={todayJDN}/>
+        Array.from(Array(6).keys()).map(i => <>
+            {(i < 5 || leap) && <ComplementaryDay year={year} month={13} day={i + 1 as Day} todayJDN={todayJDN}/>}
+            {i === 5 && !leap && <div className="ComplementaryDay-fake"/>}
             {i % 2 === 1 && <div className="ComplementaryDays-splitter"/>}
         </>)
     }</div>;

src/consts.scss

@@ -1 +1,2 @@
 $calendar-width: 1600px;
+$calendar-gutter: 0.5rem;