A step in the right direction for this time axis

.claude/settings.local.json

@@ -0,0 +1,9 @@
+{
+  "permissions": {
+    "allow": [
+      "Bash(npm run build:*)"
+    ],
+    "deny": []
+  },
+  "$schema": "https://json.schemastore.org/claude-code-settings.json"
+}

src/managers/GridManager.ts

@@ -166,6 +166,7 @@ export class GridManager {
     if (!this.grid) return;
 
     const timeAxis = document.createElement('swp-time-axis');
+    const timeAxisContent = document.createElement('swp-time-axis-content');
     const startHour = calendarConfig.get('dayStartHour');
     const endHour = calendarConfig.get('dayEndHour');
 
@@ -174,9 +175,10 @@ export class GridManager {
       const period = hour >= 12 ? 'PM' : 'AM';
       const displayHour = hour > 12 ? hour - 12 : (hour === 0 ? 12 : hour);
       marker.textContent = `${displayHour} ${period}`;
-      timeAxis.appendChild(marker);
+      timeAxisContent.appendChild(marker);
     }
 
+    timeAxis.appendChild(timeAxisContent);
     this.grid.appendChild(timeAxis);
   }
 

src/managers/ScrollManager.ts

@@ -397,15 +397,18 @@ export class ScrollManager {
     if (!this.scrollableContent || !this.timeAxis) return;
 
     const scrollTop = this.scrollableContent.scrollTop;
+    const timeAxisContent = this.timeAxis.querySelector('swp-time-axis-content');
     
+    if (timeAxisContent) {
       // Use transform for smooth performance
-    this.timeAxis.style.transform = `translateY(-${scrollTop}px)`;
+      timeAxisContent.style.transform = `translateY(-${scrollTop}px)`;
       
       // Debug logging (can be removed later)
       if (scrollTop % 100 === 0) { // Only log every 100px to avoid spam
         console.log(`ScrollManager: Synced time-axis to scrollTop: ${scrollTop}px`);
       }
     }
+  }
 
   /**
    * Create and add horizontal scroll handle to bottom middle spacer

wwwroot/css/calendar-layout-css.css

@@ -39,7 +39,8 @@ swp-calendar-nav {
 swp-calendar-container {
   display: grid;
   grid-template-columns: 60px 1fr 20px;
-  grid-template-rows: auto calc(1fr - 20px) 20px;
+  grid-template-rows: 80px 1fr 20px;
+  height: 100%;
   overflow: hidden;
   position: relative;
 }
@@ -72,10 +73,10 @@ swp-right-header-spacer {
 
 /* Week container for sliding */
 swp-week-container {
-  grid-column: 2 / 4; /* Span across columns 2-3 to include right spacer area */
+  grid-column: 2 / 3;
   grid-row: 1 / 3;
   display: grid;
-  grid-template-rows: auto 1fr;
+  grid-template-rows: 80px 1fr;
   position: relative;
   width: 100%;
   transition: transform 400ms cubic-bezier(0.4, 0, 0.2, 1);
@@ -98,12 +99,19 @@ swp-time-axis {
   grid-row: 2;
   background: var(--color-surface);
   border-right: 1px solid var(--color-border);
-  position: sticky;
+  position: relative;
   left: 0;
   z-index: 3; /* Lower than header elements so it scrolls behind them */
   width: 60px;
+  overflow: hidden;
+  height: 100%;
+}
+
+/* Time axis content that scrolls */
+swp-time-axis-content {
   display: flex;
   flex-direction: column;
+  position: relative;
 }
 
 /* Right bottom spacer */