From e4245fc19330dedf83d04b135a586ffaf47c1a56 Mon Sep 17 00:00:00 2001
From: Leo Vasanko <git@vasanko.com>
Date: Thu, 25 Sep 2025 22:17:22 +0000
Subject: [PATCH] Move calendarweeks etc. in DOM after the month name bar, to
 make them render on top of it and not under.

---
 src/components/CalendarView.vue | 45 ++++++++++++++++++---------------
 1 file changed, 24 insertions(+), 21 deletions(-)

diff --git a/src/components/CalendarView.vue b/src/components/CalendarView.vue
index 3a62a56..6226c28 100644
--- a/src/components/CalendarView.vue
+++ b/src/components/CalendarView.vue
@@ -541,26 +541,6 @@ window.addEventListener('resize', () => {
       />
       <div class="calendar-container">
         <div class="calendar-viewport" ref="viewport" :style="viewportBlurStyle">
-          <div class="calendar-content" :style="{ height: contentHeight + 'px' }">
-            <div
-              class="weeks-wrapper"
-              :style="{
-                transform: `translateY(${visibleWeeks.length ? visibleWeeks[0].top : 0}px)`,
-              }"
-            >
-              <CalendarWeek
-                v-for="week in visibleWeeks"
-                :key="week.virtualWeek"
-                :week="week"
-                :dragging="isDragging"
-                @day-mousedown="handleDayMouseDown"
-                @day-mouseenter="handleDayMouseEnter"
-                @day-mouseup="handleDayMouseUp"
-                @day-touchstart="handleDayTouchStart"
-                @event-click="handleEventClick"
-              />
-            </div>
-          </div>
           <div class="month-column-area" :style="{ height: contentHeight + 'px' }">
             <div class="month-labels-container" :style="{ height: '100%' }">
               <div
@@ -588,6 +568,26 @@ window.addEventListener('resize', () => {
               </div>
             </div>
           </div>
+          <div class="calendar-content" :style="{ height: contentHeight + 'px' }">
+            <div
+              class="weeks-wrapper"
+              :style="{
+                transform: `translateY(${visibleWeeks.length ? visibleWeeks[0].top : 0}px)`,
+              }"
+            >
+              <CalendarWeek
+                v-for="week in visibleWeeks"
+                :key="week.virtualWeek"
+                :week="week"
+                :dragging="isDragging"
+                @day-mousedown="handleDayMouseDown"
+                @day-mouseenter="handleDayMouseEnter"
+                @day-mouseup="handleDayMouseUp"
+                @day-touchstart="handleDayTouchStart"
+                @event-click="handleEventClick"
+              />
+            </div>
+          </div>
         </div>
         <!-- Jogwheel overlay captures drag + wheel over month name column -->
         <Jogwheel
@@ -650,6 +650,8 @@ header h1 {
 .calendar-content {
   position: relative;
   width: 100%;
+  grid-column: 1;
+  grid-row: 1;
 }
 
 .weeks-wrapper {
@@ -662,6 +664,8 @@ header h1 {
 .month-column-area {
   position: relative;
   cursor: ns-resize;
+  grid-column: 2;
+  grid-row: 1;
 }
 
 .month-labels-container {
@@ -687,7 +691,6 @@ header h1 {
   display: flex;
   align-items: center;
   justify-content: center;
-  z-index: 5;
   overflow: hidden;
   cursor: ns-resize;
   user-select: none;