From eaa55c94fd57e8a3cd8126deb5fe486f7b4c77a2 Mon Sep 17 00:00:00 2001
From: Leo Vasanko <leo@git>
Date: Tue, 23 Sep 2025 18:15:00 -0600
Subject: [PATCH] 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           | 13 +----
 src/components/CalendarDay.vue  |  6 +--
 src/components/CalendarView.vue | 94 +++++++++++++++++++++------------
 src/components/CalendarWeek.vue | 13 +----
 src/utils/date.js               |  4 +-
 5 files changed, 65 insertions(+), 65 deletions(-)

diff --git a/src/assets/layout.css b/src/assets/layout.css
index 3635ade..79d134e 100644
--- a/src/assets/layout.css
+++ b/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;
diff --git a/src/components/CalendarDay.vue b/src/components/CalendarDay.vue
index 07c8480..4974cab 100644
--- a/src/components/CalendarDay.vue
+++ b/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%
     );
   }
diff --git a/src/components/CalendarView.vue b/src/components/CalendarView.vue
index bb5c6b7..234f676 100644
--- a/src/components/CalendarView.vue
+++ b/src/components/CalendarView.vue
@@ -513,39 +513,50 @@ window.addEventListener('resize', () => {
       <div class="calendar-container">
         <div class="calendar-viewport" ref="viewport">
           <div class="calendar-content" :style="{ height: contentHeight + '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"
-              @day-touchstart="handleDayTouchStart"
-              @event-click="handleEventClick"
-            />
+            <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%' }">
-              <template v-for="monthWeek in visibleWeeks" :key="monthWeek.virtualWeek + '-month'">
-                <div
-                  v-if="monthWeek && monthWeek.monthLabel"
-                  class="month-label"
-                  :class="monthWeek.monthLabel?.monthClass"
-                  :style="{
-                    height: `calc(var(--row-h) * ${monthWeek.monthLabel?.weeksSpan || 1})`,
-                    top: (monthWeek.top || 0) + 'px',
-                  }"
-                  @pointerdown="handleMonthScrollPointerDown"
-                  @touchstart.prevent="handleMonthScrollTouchStart"
-                  @wheel="handleMonthScrollWheel"
-                >
-                  <span :class="{ bottomup: shouldRotateMonth(monthWeek.monthLabel?.text) }">{{
-                    monthWeek.monthLabel?.text || ''
-                  }}</span>
-                </div>
-              </template>
+              <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="{ gridRow: `${i + 1} / span ${monthWeek.monthLabel?.weeksSpan || 1}` }"
+                    @pointerdown="handleMonthScrollPointerDown"
+                    @touchstart.prevent="handleMonthScrollTouchStart"
+                    @wheel="handleMonthScrollWheel"
+                  >
+                    <span :class="{ bottomup: shouldRotateMonth(monthWeek.monthLabel?.text) }">{{
+                      monthWeek.monthLabel?.text || ''
+                    }}</span>
+                  </div>
+                </template>
+              </div>
             </div>
           </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;
diff --git a/src/components/CalendarWeek.vue b/src/components/CalendarWeek.vue
index e4d7229..f9fade7 100644
--- a/src/components/CalendarWeek.vue
+++ b/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%;
 }
diff --git a/src/utils/date.js b/src/utils/date.js
index f98e103..dfa2004 100644
--- a/src/utils/date.js
+++ b/src/utils/date.js
@@ -199,8 +199,8 @@ function formatDateCompact(date) {
   return date.toLocaleDateString(undefined, { 
     weekday: 'short', 
     day: 'numeric', 
-    month: 'short' 
-  }).replace(", ", " ")
+    month: 'short'
+  })
 }
 
 export {