src/assets/colors.css

@@ -21,11 +21,8 @@
   --label-bg-rgb: 250, 251, 254;
 
   /* Holiday colors */
-  --holiday-bg: rgba(255, 215, 0, 0.1);
-  --holiday-border: rgba(255, 215, 0, 0.3);
-  --holiday: #8b4513;
-  --holiday-label-bg: rgba(255, 215, 0, 0.8);
-  --holiday-label: #5d4037;
+  --holiday: #da0;
+  --holiday-label: var(--strong);
 
   /* Input / recurrence tokens */
   --input-border: var(--muted-alt);

src/assets/layout.css

@@ -4,7 +4,7 @@
   --row-h: 2.2em;
   --label-w: minmax(4em, 8%);
   --cell-w: 1fr;
-  --cell-h: clamp(4em, 8vh, 8em);
+  --cell-h: 12vh;
   --overlay-w: minmax(3rem, 5%);
 }
 

src/components/CalendarDay.vue

@@ -118,9 +118,8 @@ const props = defineProps({
   left: 0.1em;
   right: 0.1em;
   line-height: 1;
-  max-height: 2.4em;
   overflow: hidden;
-  font-size: 0.8em;
+  font-size: clamp(1.2vw, 0.6em, 1.2em);
 }
 
 .holiday-name {

src/components/CalendarView.vue

@@ -43,6 +43,10 @@ function createEventFromSelection() {
 const scrollTop = ref(0)
 const viewportHeight = ref(600)
 const rowHeight = ref(64)
+// Probe element & observer for dynamic var(--cell-h) changes
+const rowProbe = ref(null)
+let rowProbeObserver = null
+
 const baseDate = computed(() => new Date(1970, 0, 4 + calendarStore.config.first_day))
 
 const selection = ref({ startDate: null, dayCount: 0 })
@@ -163,6 +167,11 @@ const contentHeight = computed(() => {
 })
 
 function computeRowHeight() {
+  if (rowProbe.value) {
+    const h = rowProbe.value.getBoundingClientRect().height || 64
+    rowHeight.value = Math.round(h)
+    return rowHeight.value
+  }
   const el = document.createElement('div')
   el.style.position = 'absolute'
   el.style.visibility = 'hidden'
@@ -173,6 +182,21 @@ function computeRowHeight() {
   rowHeight.value = Math.round(h)
   return rowHeight.value
 }
+function measureFromProbe() {
+  if (!rowProbe.value) return
+  const h = rowProbe.value.getBoundingClientRect().height
+  if (!h) return
+  const newH = Math.round(h)
+  if (newH !== rowHeight.value) {
+    const oldH = rowHeight.value
+    const currentTopVW = Math.floor(scrollTop.value / oldH) + minVirtualWeek.value
+    rowHeight.value = newH
+    const newScrollTop = (currentTopVW - minVirtualWeek.value) * newH
+    scrollTop.value = newScrollTop
+    if (viewport.value) viewport.value.scrollTop = newScrollTop
+    scheduleRebuild('row-height-change')
+  }
+}
 
 function getWeekIndex(date) {
   const dayOffset = (date.getDay() - calendarStore.config.first_day + 7) % 7
@@ -502,6 +526,13 @@ onMounted(() => {
   // Initial build after mount & measurement
   scheduleRebuild('init')
 
+  if (window.ResizeObserver && rowProbe.value) {
+    rowProbeObserver = new ResizeObserver(() => {
+      measureFromProbe()
+    })
+    rowProbeObserver.observe(rowProbe.value)
+  }
+
   onBeforeUnmount(() => {
     clearInterval(timer)
   })
@@ -511,6 +542,12 @@ onBeforeUnmount(() => {
   if (viewport.value) {
     viewport.value.removeEventListener('scroll', onScroll)
   }
+  if (rowProbeObserver && rowProbe.value) {
+    try {
+      rowProbeObserver.unobserve(rowProbe.value)
+      rowProbeObserver.disconnect()
+    } catch (e) {}
+  }
 })
 
 const handleDayMouseDown = (d) => {
@@ -593,11 +630,15 @@ watch(
 // Rebuild if viewport height changes (e.g., resize)
 window.addEventListener('resize', () => {
   if (viewport.value) viewportHeight.value = viewport.value.clientHeight
+  measureFromProbe()
   scheduleRebuild('resize')
 })
 </script>
 
 <template>
+  <!-- hidden probe for measuring var(--cell-h) -->
+  <div ref="rowProbe" class="row-height-probe" aria-hidden="true"></div>
+  <!-- existing template root starts below -->
   <div class="wrap">
     <header>
       <h1>Calendar</h1>
@@ -832,4 +873,6 @@ header h1 {
 .month-name-label.no-rotate > span {
   transform: none;
 }
+
+.row-height-probe { position: absolute; visibility: hidden; height: var(--cell-h); pointer-events: none; }
 </style>