wwwroot/css/calendar-v2.css

@@ -70,22 +70,24 @@ swp-calendar-container {
   overflow: hidden;
 }
 
-swp-header-spacer {
-  background: var(--color-surface);
-  border-right: 1px solid var(--color-border);
-  border-bottom: 1px solid var(--color-border);
-}
-
 /* Time axis */
 swp-time-axis {
+  grid-column: 1;
+  grid-row: 1 / 3;
+  display: grid;
+  grid-template-rows: subgrid;
   border-right: 1px solid var(--color-border);
   background: var(--color-surface);
-  overflow: hidden;
+}
+
+swp-header-spacer {
+  border-bottom: 1px solid var(--color-border);
 }
 
 swp-time-axis-content {
   display: flex;
   flex-direction: column;
+  overflow: hidden;
 }
 
 swp-hour-marker {
@@ -101,7 +103,7 @@ swp-grid-container {
   grid-column: 2;
   grid-row: 1 / 3;
   display: grid;
-  grid-template-rows: auto 1fr;
+  grid-template-rows: subgrid;
   overflow: hidden;
 }
 
@@ -110,7 +112,6 @@ swp-calendar-header {
   display: grid;
   grid-template-columns: repeat(var(--grid-columns), 1fr);
   grid-auto-rows: auto;
-  border-bottom: 1px solid var(--color-border);
   background: var(--color-surface);
 }
 

wwwroot/v2.html

@@ -20,8 +20,8 @@
       </swp-calendar-nav>
 
       <swp-calendar-container>
-        <swp-header-spacer></swp-header-spacer>
         <swp-time-axis>
+          <swp-header-spacer></swp-header-spacer>
           <swp-time-axis-content id="time-axis"></swp-time-axis-content>
         </swp-time-axis>
         <swp-grid-container>