From 209ae0830dc4b306031fe381faa292c76273141c Mon Sep 17 00:00:00 2001
From: Janus Knudsen <janus@sevenweirdpeople.com>
Date: Fri, 1 Aug 2025 23:45:13 +0200
Subject: [PATCH] A step in the right direction for this time axis

---
 .claude/settings.local.json         |  9 +++++++++
 src/managers/GridManager.ts         |  4 +++-
 src/managers/ScrollManager.ts       | 15 +++++++++------
 wwwroot/css/calendar-layout-css.css | 16 ++++++++++++----
 4 files changed, 33 insertions(+), 11 deletions(-)
 create mode 100644 .claude/settings.local.json

diff --git a/.claude/settings.local.json b/.claude/settings.local.json
new file mode 100644
index 0000000..456dfe7
--- /dev/null
+++ b/.claude/settings.local.json
@@ -0,0 +1,9 @@
+{
+  "permissions": {
+    "allow": [
+      "Bash(npm run build:*)"
+    ],
+    "deny": []
+  },
+  "$schema": "https://json.schemastore.org/claude-code-settings.json"
+}
\ No newline at end of file
diff --git a/src/managers/GridManager.ts b/src/managers/GridManager.ts
index b331375..288f3f1 100644
--- a/src/managers/GridManager.ts
+++ b/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);
   }
 
diff --git a/src/managers/ScrollManager.ts b/src/managers/ScrollManager.ts
index 6ac4124..99dea44 100644
--- a/src/managers/ScrollManager.ts
+++ b/src/managers/ScrollManager.ts
@@ -397,13 +397,16 @@ export class ScrollManager {
     if (!this.scrollableContent || !this.timeAxis) return;
 
     const scrollTop = this.scrollableContent.scrollTop;
+    const timeAxisContent = this.timeAxis.querySelector('swp-time-axis-content');
     
-    // Use transform for smooth performance
-    this.timeAxis.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`);
+    if (timeAxisContent) {
+      // Use transform for smooth performance
+      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`);
+      }
     }
   }
 
diff --git a/wwwroot/css/calendar-layout-css.css b/wwwroot/css/calendar-layout-css.css
index 65aed81..80663fa 100644
--- a/wwwroot/css/calendar-layout-css.css
+++ b/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 */