wip

src/managers/ScrollManager.ts

@@ -331,23 +331,32 @@ export class ScrollManager {
     // Calculate available height for scrollable content
     const availableHeight = containerRect.height - headerHeight;
     
+    // Calculate available width (container width minus time-axis and scrollbar)
+    const availableWidth = containerRect.width - 60 - 20; // 60px time-axis, 20px scrollbar
+    
     console.log('ScrollManager: Dynamic height calculation');
     console.log('- Container height:', containerRect.height);
     console.log('- Navigation height:', navHeight);
     console.log('- Header height:', headerHeight);
     console.log('- Available height:', availableHeight);
+    console.log('- Available width:', availableWidth);
     
-    // Set the height on scrollable content
+    // Set the height and width on scrollable content
     if (availableHeight > 0) {
       this.scrollableContent.style.height = `${availableHeight}px`;
+    }
+    if (availableWidth > 0) {
+      this.scrollableContent.style.width = `${availableWidth}px`;
+    }
     
-      // Recalculate scroll bounds after height change
+    // Recalculate scroll bounds after dimension changes
     setTimeout(() => {
       this.calculateScrollBounds();
+      this.calculateHorizontalScrollBounds();
       this.updateHandlePosition();
+      this.updateHorizontalHandlePosition();
     }, 0);
   }
-  }
 
   /**
    * Hide native scrollbar while keeping scroll functionality

wwwroot/css/calendar-layout-css.css

@@ -262,8 +262,7 @@ swp-scrollable-content {
   scroll-behavior: smooth;
   position: relative;
   display: grid;
-  /* Height will be set dynamically by ScrollManager via ResizeObserver */
+  /* Height and width will be set dynamically by ScrollManager via ResizeObserver */
-  width: calc(100vw - 60px - 20px); /* Viewport width minus time-axis and scrollbar */
   
   /* Hide native scrollbars */
   scrollbar-width: none; /* Firefox */