Styling details, removed absolute positioning of each weekrow and month label in favor of a wrapper that uses block layout inside it. Gaps/borders removed on the calendar.

src/assets/layout.css

@@ -82,17 +82,6 @@ header {
 #calendar-content {
   position: relative;
 }
-/* Week row: label + 7-day grid + jogwheel column */
-.week-row {
-  display: grid;
-  grid-template-columns: var(--week-w) repeat(7, var(--day-w)) var(--month-w);
-  position: relative;
-  overflow: visible;
-  height: var(--row-h);
-  scroll-snap-align: start;
-  width: 100%;
-}
-
 /* Label cells */
 .year-label,
 .week-label {
@@ -109,8 +98,8 @@ header {
 }
 /* 7-day grid inside each week row */
 .week-row > .days-grid {
-  grid-column: 2 / span 7;
   display: grid;
+  grid-column: 2 / span 7;
   grid-template-columns: repeat(7, 1fr);
   grid-auto-rows: 1fr;
   position: relative;

src/components/CalendarDay.vue

@@ -41,8 +41,6 @@ const formattedDate = computed(() => {
 <style scoped>
 .cell {
   position: relative;
-  border-inline-end: 1px solid var(--border-color);
-  border-bottom: 1px solid var(--border-color);
   user-select: none;
   display: grid;
   /* Updated grid for centered day number */
@@ -98,7 +96,7 @@ const formattedDate = computed(() => {
 .cell {
   background-image: linear-gradient(
     135deg,
-    var(--holiday-grad-start, rgba(255, 255, 255, 0.5)) 0%,
+    var(--holiday-grad-start, rgba(255, 255, 255, 0.3)) 0%,
     var(--holiday-grad-end, rgba(255, 255, 255, 0)) 70%
   );
 }
@@ -106,7 +104,7 @@ const formattedDate = computed(() => {
   .cell {
     background-image: linear-gradient(
       135deg,
-      var(--holiday-grad-start, rgba(255, 255, 255, 0.1)) 0%,
+      var(--holiday-grad-start, rgba(255, 255, 255, 0.05)) 0%,
       var(--holiday-grad-end, rgba(255, 255, 255, 0)) 70%
     );
   }

src/components/CalendarView.vue

@@ -513,12 +513,17 @@ window.addEventListener('resize', () => {
       <div class="calendar-container">
         <div class="calendar-viewport" ref="viewport">
           <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"
-              :style="{ top: week.top + 'px' }"
                 @day-mousedown="handleDayMouseDown"
                 @day-mouseenter="handleDayMouseEnter"
                 @day-mouseup="handleDayMouseUp"
@@ -526,17 +531,22 @@ window.addEventListener('resize', () => {
                 @event-click="handleEventClick"
               />
             </div>
+          </div>
           <div class="month-column-area" :style="{ height: contentHeight + 'px' }">
             <div class="month-labels-container" :style="{ height: '100%' }">
-              <template v-for="monthWeek in visibleWeeks" :key="monthWeek.virtualWeek + '-month'">
+              <div
+                class="month-labels-wrapper"
+                :style="{
+                  transform: `translateY(${visibleWeeks.length ? visibleWeeks[0].top : 0}px)`,
+                  gridTemplateRows: `repeat(${visibleWeeks.length}, var(--row-h))`,
+                }"
+              >
+                <template v-for="(monthWeek, i) in visibleWeeks" :key="monthWeek.virtualWeek + '-month'">
                   <div
                     v-if="monthWeek && monthWeek.monthLabel"
                     class="month-label"
                     :class="monthWeek.monthLabel?.monthClass"
-                  :style="{
+                    :style="{ gridRow: `${i + 1} / span ${monthWeek.monthLabel?.weeksSpan || 1}` }"
-                    height: `calc(var(--row-h) * ${monthWeek.monthLabel?.weeksSpan || 1})`,
-                    top: (monthWeek.top || 0) + 'px',
-                  }"
                     @pointerdown="handleMonthScrollPointerDown"
                     @touchstart.prevent="handleMonthScrollTouchStart"
                     @wheel="handleMonthScrollWheel"
@@ -550,6 +560,7 @@ window.addEventListener('resize', () => {
             </div>
           </div>
         </div>
+      </div>
       <EventDialog ref="eventDialogRef" :selection="{ startDate: null, dayCount: 0 }" />
     </div>
   </div>
@@ -604,6 +615,13 @@ header h1 {
   width: 100%;
 }
 
+.weeks-wrapper {
+  position: absolute;
+  inset: 0 auto auto 0;
+  width: 100%;
+  will-change: transform;
+}
+
 .month-column-area {
   position: relative;
   cursor: ns-resize;
@@ -615,18 +633,24 @@ header h1 {
   height: 100%;
 }
 
-.month-label {
+.month-labels-wrapper {
   position: absolute;
-  inset-inline-start: 0;
+  inset: 0 auto auto 0;
   width: 100%;
-  background-image: linear-gradient(to bottom, rgba(186, 186, 186, 0.3), rgba(186, 186, 186, 0.2));
+  will-change: transform;
+  display: grid;
+  grid-auto-flow: row;
+}
+
+.month-label {
+  width: 100%;
+  opacity: 0.8;
   font-size: 2em;
   font-weight: 700;
-  color: var(--muted);
   display: flex;
   align-items: center;
   justify-content: center;
-  z-index: 15;
+  z-index: 5;
   overflow: hidden;
   cursor: ns-resize;
   user-select: none;

src/components/CalendarWeek.vue

@@ -33,20 +33,10 @@ const handleDayTouchStart = (dateStr) => {
 const handleEventClick = (payload) => {
   emit('event-click', payload)
 }
-
-// Only apply upside-down rotation (bottomup) for Latin script month labels
-function shouldRotateMonth(label) {
-  if (!label) return false
-  try {
-    return /\p{Script=Latin}/u.test(label)
-  } catch (e) {
-    return /[A-Za-z\u00C0-\u024F\u1E00-\u1EFF]/u.test(label)
-  }
-}
 </script>
 
 <template>
-  <div class="week-row" :style="{ top: `${props.week.top}px` }">
+  <div class="week-row">
     <div class="week-label">W{{ props.week.weekNumber }}</div>
     <div class="days-grid">
       <CalendarDay
@@ -68,7 +58,6 @@ function shouldRotateMonth(label) {
 .week-row {
   display: grid;
   grid-template-columns: var(--week-w) repeat(7, 1fr);
-  position: absolute;
   height: var(--row-h);
   width: 100%;
 }

src/utils/date.js

@@ -200,7 +200,7 @@ function formatDateCompact(date) {
     weekday: 'short', 
     day: 'numeric', 
     month: 'short'
-  }).replace(", ", " ")
+  })
 }
 
 export {