Soften the scroll blur effect a tiny bit to avoid glitches when missing a frame.

src/App.vue

@@ -37,8 +37,6 @@ onMounted(() => {
   document.addEventListener('keydown', handleGlobalKey, { passive: false })
   // Set document language via shared util
   if (lang) document.documentElement.setAttribute('lang', lang)
-  // Initialize title
-  document.title = formatTodayString(new Date(calendarStore.now))
 })
 
 onBeforeUnmount(() => {
@@ -49,7 +47,7 @@ onBeforeUnmount(() => {
 watch(
   () => calendarStore.now,
   (val) => {
-    document.title = formatTodayString(new Date(val))
+    document.title = formatTodayString(new Date(val), "short", "short")
   },
   { immediate: false },
 )

src/assets/colors.css

@@ -95,18 +95,18 @@
 .nov { background: hsl(22 15% 55%) }
 
 @media (prefers-color-scheme: dark) {
-  .dec { background: hsl(220 50% 10%) }
-  .jan { background: hsl(220 50% 4%) }
-  .feb { background: hsl(220 50% 10%) }
-  .mar { background: hsl(130 60% 3%) }
-  .apr { background: hsl(130 60% 6%) }
-  .may { background: hsl(130 60% 10%) }
-  .jun { background: hsl(50 85% 8%) }
-  .jul { background: hsl(50 85% 12%) }
-  .aug { background: hsl(50 85% 8%) }
-  .sep { background: hsl(22 100% 10%) }
-  .oct { background: hsl(22 90% 6%) }
-  .nov { background: hsl(22 80% 3%) }
+  .dec { background: hsl(220 50% 12%) }
+  .jan { background: hsl(220 50% 8%) }
+  .feb { background: hsl(220 50% 12%) }
+  .mar { background: hsl(130 40% 20%) }
+  .apr { background: hsl(130 60% 15%) }
+  .may { background: hsl(130 80% 10%) }
+  .jun { background: hsl(50 85% 16%) }
+  .jul { background: hsl(50 85% 20%) }
+  .aug { background: hsl(50 85% 16%) }
+  .sep { background: hsl(22 100% 14%) }
+  .oct { background: hsl(22 90% 10%) }
+  .nov { background: hsl(22 80% 7%) }
 }
 
 /* Light mode — gray shades and colors */

src/assets/layout.css

@@ -1,13 +1,15 @@
 :root {
   --week-w: 3rem;
   --day-w: 1fr;
-  --month-w: 2rem;
+  --month-w: 3rem;
   --row-h: 15vh;
 }
 * {
   box-sizing: border-box;
 }
-
+html {
+  font-size: min(3vmin, 16px);
+}
 html,
 body {
   height: 100%;
@@ -16,7 +18,7 @@ body {
 body {
   margin: 0;
   font:
-    500 14px/1.2 ui-sans-serif,
+    500 1rem/1.2 ui-sans-serif,
     system-ui,
     -apple-system,
     Segoe UI,
@@ -90,7 +92,7 @@ header {
   width: 100%;
   color: var(--muted);
   cursor: ns-resize;
-  font-size: 1.2em;
+  font-size: 1.2rem;
 }
 
 .week-label {
@@ -109,7 +111,7 @@ header {
 
 .month-name-label {
   grid-column: -2 / -1;
-  font-size: 2em;
+  font-size: 2rem;
   font-weight: 700;
   color: var(--muted);
   display: flex;

src/components/BaseDialog.vue

@@ -24,7 +24,6 @@ const modalPosition = ref({ x: 0, y: 0 })
 const dialogWidth = ref(null)
 const dialogHeight = ref(null)
 const hasMoved = ref(false)
-const margin = 8 // viewport margin in px to keep dialog from touching edges
 
 // Collect incoming non-prop attributes (e.g., class / style from usage site)
 const attrs = useAttrs()
@@ -62,8 +61,8 @@ function handleDrag(event) {
   const h = dialogHeight.value || modalRef.value?.offsetHeight || 0
   const vw = window.innerWidth
   const vh = window.innerHeight
-  x = clamp(x, margin, Math.max(margin, vw - w - margin))
-  y = clamp(y, margin, Math.max(margin, vh - h - margin))
+  x = clamp(x, 0, Math.max(0, vw - w - 0))
+  y = clamp(y, 0, Math.max(0, vh - h - 0))
   modalPosition.value = { x, y }
   event.preventDefault()
 }
@@ -97,10 +96,14 @@ const modalStyle = computed(() => {
 // <BaseDialog class="settings-modal" :style="{ top: '...' }" /> works even with fragment root.
 const modalAttrs = computed(() => {
   const { class: extClass, style: extStyle, ...rest } = attrs
+  // When dialog has been moved (dragged), internal positioning styles must override external ones
+  const mergedStyle = hasMoved.value
+    ? [extStyle, modalStyle.value].filter(Boolean)
+    : [modalStyle.value, extStyle].filter(Boolean)
   return {
     ...rest,
     class: ['ec-modal', extClass].filter(Boolean),
-    style: [modalStyle.value, extStyle].filter(Boolean), // external style overrides internal
+    style: mergedStyle,
   }
 })
 
@@ -120,7 +123,8 @@ function positionNearAnchor() {
   const anchor = props.anchorEl || anchorRef.value
   if (!anchor) return
   const rect = anchor.getBoundingClientRect()
-  const offsetY = 8 // vertical gap below the anchor
+  const rootFontSize = parseFloat(getComputedStyle(document.documentElement).fontSize)
+  const offsetY = 0.5 * rootFontSize // vertical gap below the anchor in rem converted to pixels
   const w = modalRef.value?.offsetWidth || dialogWidth.value || 320
   const h = modalRef.value?.offsetHeight || dialogHeight.value || 200
   const vw = window.innerWidth
@@ -128,8 +132,8 @@ function positionNearAnchor() {
   let x = rect.left
   let y = rect.bottom + offsetY
   // If anchor is wider than dialog and would overflow right edge, clamp; otherwise keep left align
-  x = clamp(x, margin, Math.max(margin, vw - w - margin))
-  y = clamp(y, margin, Math.max(margin, vh - h - margin))
+  x = clamp(x, 0, Math.max(0, vw - w - 0))
+  y = clamp(y, 0, Math.max(0, vh - h - 0))
   modalPosition.value = { x, y }
 }
 
@@ -172,8 +176,8 @@ function handleResize() {
     const vw = window.innerWidth
     const vh = window.innerHeight
     modalPosition.value = {
-      x: clamp(modalPosition.value.x, margin, Math.max(margin, vw - w - margin)),
-      y: clamp(modalPosition.value.y, margin, Math.max(margin, vh - h - margin)),
+      x: clamp(modalPosition.value.x, 0, Math.max(0, vw - w - 0)),
+      y: clamp(modalPosition.value.y, 0, Math.max(0, vh - h - 0)),
     }
   }
 }
@@ -206,19 +210,18 @@ onUnmounted(() => {
   </div>
 </template>
 
-<style scoped>
+<style>
 .ec-modal {
   position: fixed; /* still fixed for overlay & dragging, but now top/left are set dynamically */
   background: color-mix(in srgb, var(--panel) 85%, transparent);
   backdrop-filter: blur(0.625em);
-  -webkit-backdrop-filter: blur(0.625em);
   color: var(--ink);
-  border-radius: 0.6em;
-  min-height: 23em;
-  min-width: 26em;
-  max-width: min(34em, 90vw);
-  box-shadow: 0 0.6em 1.8em rgba(0, 0, 0, 0.35);
-  border: 0.0625em solid color-mix(in srgb, var(--muted) 40%, transparent);
+  border-radius: 0.6rem;
+  min-height: 23rem;
+  min-width: 26rem;
+  max-width: min(34rem, 90vw);
+  box-shadow: 0 0.6rem 1.8rem rgba(0, 0, 0, 0.35);
+  border: 0.0625rem solid color-mix(in srgb, var(--muted) 40%, transparent);
   z-index: 1000;
   overflow: hidden;
 }
@@ -230,35 +233,36 @@ onUnmounted(() => {
 .ec-form {
   display: grid;
   grid-template-rows: auto 1fr auto;
-  min-height: 23em;
+  min-height: 23rem;
   height: 100%;
   width: 100%;
 }
 .ec-header {
   cursor: move;
   user-select: none;
-  padding: 0.75em 1em 0.5em 1em;
+  touch-action: none;
+  padding: 0.75rem 1rem 0.5rem 1rem;
   display: flex;
   justify-content: space-between;
   align-items: center;
-  gap: 1em;
+  gap: 1rem;
 }
 .ec-title {
   margin: 0;
-  font-size: 1.1em;
+  font-size: 1.1rem;
 }
 .ec-body {
   display: flex;
   flex-direction: column;
-  gap: 1em;
-  padding: 0 1em 0.5em 1em;
+  gap: 1rem;
+  padding: 0 1rem 0.5rem 1rem;
   overflow: auto;
 }
 .ec-footer {
-  padding: 0.5em 1em 1em 1em;
+  padding: 0.5rem 1rem 1rem 1rem;
   display: flex;
   justify-content: space-between;
-  gap: 1em;
+  gap: 1rem;
   flex-wrap: wrap;
 }
 </style>

src/components/CalendarDay.vue

@@ -1,15 +1,44 @@
 <script setup>
-import { computed } from 'vue'
-import { formatDateCompact, fromLocalString } from '@/utils/date'
+import { computed, ref, onMounted, onBeforeUnmount } from 'vue'
+import { fromLocalString } from '@/utils/date'
 
 const props = defineProps({
   day: Object,
   dragging: { type: Boolean, default: false },
 })
 
+// Reactive viewport width detection
+const isNarrowView = ref(false)
+const isSmallView = ref(false)
+
+function checkViewportWidth() {
+  const width = window.innerWidth
+  isSmallView.value = width < 800
+  isNarrowView.value = width < 600
+}
+
+onMounted(() => {
+  checkViewportWidth()
+  window.addEventListener('resize', checkViewportWidth)
+})
+
+onBeforeUnmount(() => {
+  window.removeEventListener('resize', checkViewportWidth)
+})
+
 const formattedDate = computed(() => {
   const date = fromLocalString(props.day.date)
-  return formatDateCompact(date)
+  let options = { weekday: 'short', day: 'numeric', month: 'short' }
+  // Remove weekday on very small viewports
+  if (isNarrowView.value) options = { day: 'numeric', month: 'short' }
+  let formatted = date.toLocaleDateString(undefined, options)
+  // Split between weekday and day/month on small viewports
+  if (isSmallView.value) formatted = formatted.replace(/\s/, '\n')
+  // Replace the last space (between month and day) with nbsp to prevent breaking there
+  // but keep the space after weekday (if present) as regular space to allow wrapping
+  formatted = formatted.replace(/\s+(?=\S+$)/, '\u00A0')
+  
+  return formatted
 })
 </script>
 
@@ -17,22 +46,14 @@ const formattedDate = computed(() => {
   <div
     class="cell"
     :style="props.dragging ? 'touch-action:none;' : 'touch-action:pan-y;'"
-    :class="[
-      props.day.monthClass,
-      {
-        today: props.day.isToday,
-        weekend: props.day.isWeekend,
-        firstday: props.day.isFirstDay,
-        selected: props.day.isSelected,
-        holiday: props.day.isHoliday,
-      },
-    ]"
+    :class="[props.day.monthClass, { today: props.day.isToday, weekend: props.day.isWeekend, firstday: props.day.isFirstDay, selected: props.day.isSelected, holiday: props.day.isHoliday }]"
     :data-date="props.day.date"
+    :title="props.day.holiday?.name"
   >
     <span class="compact-date">{{ formattedDate }}</span>
     <h1 class="day-number">{{ props.day.displayText }}</h1>
     <span v-if="props.day.lunarPhase" class="lunar-phase">{{ props.day.lunarPhase }}</span>
-    <div v-if="props.day.holiday" class="holiday-info" dir="auto" :title="props.day.holiday.name">
+    <div v-if="props.day.holiday" class="holiday-info" dir="auto">
       {{ props.day.holiday.name }}
     </div>
   </div>
@@ -43,10 +64,8 @@ const formattedDate = computed(() => {
   position: relative;
   user-select: none;
   display: grid;
-  /* Updated grid for centered day number */
   grid-template-columns: 1fr;
   grid-template-rows: 1fr auto;
-  /* Named grid areas */
   grid-template-areas:
     'day-number'
     'holiday-info';
@@ -89,6 +108,26 @@ const formattedDate = computed(() => {
   z-index: 15;
   pointer-events: none;
 }
+
+/* Search highlight animation */
+.cell.search-highlight-flash::after {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: calc(100% + .2rem);
+  height: calc(100% + .2rem);
+  border-radius: 1rem;
+  background: transparent;
+  border: 0.3em solid var(--strong);
+  z-index: 16;
+  pointer-events: none;
+}
+
+.cell.search-highlight-flash::after { animation: search-highlight-flash 1.5s ease-out forwards; }
+
+@keyframes search-highlight-flash {0%{opacity:0;transform:translate(-50%,-50%) scale(.8);border-width:.1em}15%{opacity:1;transform:translate(-50%,-50%) scale(1.05);border-width:.4em}30%{opacity:1;transform:translate(-50%,-50%) scale(1);border-width:.3em}100%{opacity:0;transform:translate(-50%,-50%) scale(1);border-width:.3em}}
 .cell.selected h1.day-number {
   opacity: 0.3;
   filter: brightness(1.2);
@@ -112,10 +151,9 @@ const formattedDate = computed(() => {
 .lunar-phase {
   grid-area: lunar-phase;
   position: absolute;
-  inset-block-start: 0.5em;
-  inset-inline-end: 0.2em;
-  font-size: 0.8em;
-  opacity: 0.7;
+  inset-block-start: 0.1em;
+  inset-inline-end: 0.1em;
+  font-size: 0.8rem;
 }
 
 .compact-date {
@@ -123,10 +161,12 @@ const formattedDate = computed(() => {
   top: 0.25em;
   left: 0.25em;
   inset-inline-end: 1rem; /* Space for lunar phase */
-  font-weight: 400;
+  font-weight: 300;
+  font-size: 0.8rem;
   color: var(--ink);
   line-height: 1;
   pointer-events: none;
+  white-space: pre-wrap;
 }
 
 .cell.weekend .compact-date {
@@ -148,7 +188,7 @@ const formattedDate = computed(() => {
   overflow: hidden;
   max-width: 100%;
   color: var(--holiday);
-  font-size: 1em;
+  font-size: 0.8rem;
   font-weight: 400;
   line-height: 1.0;
   padding-inline: 0.15em;

src/components/CalendarHeader.vue

@@ -119,7 +119,7 @@ const weekdayNames = computed(() => {
 .calendar-header {
   display: grid;
   grid-template-columns: var(--week-w) repeat(7, 1fr) var(--month-w);
-  border-bottom: 2px solid var(--muted);
+  border-bottom: .1rem solid var(--muted);
   align-items: last baseline;
   flex-shrink: 0;
   width: 100%;
@@ -135,7 +135,7 @@ const weekdayNames = computed(() => {
   text-transform: uppercase;
   text-align: center;
   font-weight: 600;
-  font-size: 1.2em;
+  font-size: 1.2rem;
 }
 .dow.weekend {
   color: var(--weekend);

src/components/CalendarView.vue

@@ -54,9 +54,8 @@ let _blurFrame = null
 
 function _updateMotionBlur() {
   const pos = scrollTop.value || 0
-  if (_lastBlurPos) {
-    blurAmount.value = 0.5 * Math.abs(pos - _lastBlurPos)
-  }
+  if (_lastBlurPos) blurAmount.value = 0.1 * blurAmount.value + 0.9 * Math.min(20, 0.5 * Math.abs(pos - _lastBlurPos))
+  if (!_lastBlurPos || blurAmount.value < 5) blurAmount.value = 0
   _lastBlurPos = pos
   _blurFrame = requestAnimationFrame(_updateMotionBlur)
 }
@@ -197,11 +196,24 @@ function measureFromProbe() {
 const {
   getWeekIndex,
   getFirstDayForVirtualWeek,
-  goToToday,
   handleHeaderYearChange,
-  scrollToWeekCentered,
+  scrollToWeek,
 } = vwm
 
+function showDay(input) {
+  const dateStr = input instanceof Date ? toLocalString(input, DEFAULT_TZ) : String(input)
+  const weekIndex = getWeekIndex(fromLocalString(dateStr, DEFAULT_TZ))
+  scrollToWeek(weekIndex, 'nav', true)
+  const diff = Math.abs(weekIndex - centerVisibleWeek.value)
+  const delay = Math.min(800, diff * 40)
+  setTimeout(() => {
+    const el = document.querySelector(`[data-date="${dateStr}"]`)
+    if (!el) return
+    el.classList.add('search-highlight-flash')
+    setTimeout(() => el.classList.remove('search-highlight-flash'), 1500)
+  }, delay)
+}
+
 // Reference date for search: center of the current viewport (virtual week at vertical midpoint)
 const centerVisibleWeek = computed(() => {
   const midRow = (scrollTop.value + viewportHeight.value / 2) / rowHeight.value
@@ -216,10 +228,6 @@ const centerVisibleDateStr = computed(() => {
   }
 })
 
-// createWeek logic moved to virtualWeeks plugin
-
-// goToToday now provided by manager
-
 function clearSelection() {
   selection.value = { startDate: null, dayCount: 0 }
 }
@@ -245,7 +253,6 @@ watch(
 
 function startDrag(dateStr) {
   dateStr = normalizeDate(dateStr)
-  if (calendarStore.config.select_days === 0) return
   isDragging.value = true
   dragAnchor.value = dateStr
   selection.value = { startDate: dateStr, dayCount: 1 }
@@ -358,23 +365,13 @@ function getDateFromCoordinates(clientX, clientY) {
 }
 
 function calculateSelection(anchorStr, otherStr) {
-  const limit = calendarStore.config.select_days
   const anchorDate = fromLocalString(anchorStr, DEFAULT_TZ)
   const otherDate = fromLocalString(otherStr, DEFAULT_TZ)
   const forward = otherDate >= anchorDate
   const span = daysInclusive(anchorStr, otherStr)
 
-  if (span <= limit) {
-    const startDate = forward ? anchorStr : otherStr
-    return { startDate, dayCount: span }
-  }
-
-  if (forward) {
-    return { startDate: anchorStr, dayCount: limit }
-  } else {
-    const startDate = addDaysStr(anchorStr, -(limit - 1), DEFAULT_TZ)
-    return { startDate, dayCount: limit }
-  }
+  const startDate = forward ? anchorStr : otherStr
+  return { startDate, dayCount: span }
 }
 
 onMounted(() => {
@@ -457,26 +454,15 @@ const handleEventClick = (payload) => {
   openEditEventDialog(payload)
 }
 
-function scrollToEventStart(startDate, smooth = true) {
-  try {
-    const dateObj = fromLocalString(startDate, DEFAULT_TZ)
-    const weekIndex = getWeekIndex(dateObj)
-    scrollToWeekCentered(weekIndex, 'search-jump', smooth)
-  } catch {
-    /* noop */
+function handleHeaderSearchPreview(r) { if (r) showDay(r.startDate) }
+function handleHeaderSearchActivate(r) {
+  if (!r) return
+  showDay(r.startDate)
+  if (!r._goto && !r._holiday) {
+    const ev = calendarStore.getEventById(r.id)
+    if (ev) openEditEventDialog({ id: ev.id, event: ev })
   }
 }
-function handleHeaderSearchPreview(result) {
-  if (!result) return
-  scrollToEventStart(result.startDate, true)
-}
-function handleHeaderSearchActivate(result) {
-  if (!result) return
-  scrollToEventStart(result.startDate, true)
-  // Open edit dialog for the event
-  const ev = calendarStore.getEventById(result.id)
-  if (ev) openEditEventDialog({ id: ev.id, event: ev })
-}
 
 // Heuristic: rotate month label (180deg) only for predominantly Latin text.
 // We explicitly avoid locale detection; rely solely on characters present.
@@ -543,7 +529,7 @@ window.addEventListener('resize', () => {
     <div class="wrap">
       <HeaderControls
         :reference-date="centerVisibleDateStr"
-        @go-to-today="goToToday"
+        @go-to-today="() => showDay(calendarStore.today)"
         @search-preview="handleHeaderSearchPreview"
         @search-activate="handleHeaderSearchActivate"
       />
@@ -555,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
@@ -602,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
@@ -664,6 +650,8 @@ header h1 {
 .calendar-content {
   position: relative;
   width: 100%;
+  grid-column: 1;
+  grid-row: 1;
 }
 
 .weeks-wrapper {
@@ -676,6 +664,8 @@ header h1 {
 .month-column-area {
   position: relative;
   cursor: ns-resize;
+  grid-column: 2;
+  grid-row: 1;
 }
 
 .month-labels-container {
@@ -696,12 +686,11 @@ header h1 {
 .month-label {
   width: 100%;
   opacity: 0.8;
-  font-size: 2em;
+  font-size: 2.2rem;
   font-weight: 700;
   display: flex;
   align-items: center;
-  justify-content: center;
-  z-index: 5;
+  justify-content: start;
   overflow: hidden;
   cursor: ns-resize;
   user-select: none;

src/components/CalendarWeek.vue

@@ -67,7 +67,7 @@ const handleEventClick = (payload) => {
   place-items: center;
   width: 100%;
   color: var(--muted);
-  font-size: 1.2em;
+  font-size: 1.2rem;
   font-weight: 500;
   user-select: none;
   height: var(--row-h);

src/components/EventDialog.vue

@@ -6,7 +6,6 @@ import WeekdaySelector from './WeekdaySelector.vue'
 import Numeric from './Numeric.vue'
 import {
   addDaysStr,
-  getMondayOfISOWeek,
   fromLocalString,
   formatDateShort,
   formatDateLong,
@@ -675,7 +674,7 @@ const recurrenceSummary = computed(() => {
 }
 
 .ec-field > span {
-  font-size: 0.85em;
+  font-size: 0.85rem;
   color: var(--muted);
 }
 
@@ -683,12 +682,13 @@ const recurrenceSummary = computed(() => {
 .ec-field input[type='time'],
 .ec-field input[type='number'],
 .ec-field select {
-  border: 1px solid var(--muted);
+  border: .1rem solid var(--muted);
   border-radius: 0.4rem;
   padding: 0.5rem 0.6rem;
   width: 100%;
   background: transparent;
   color: var(--ink);
+  font-size: 1rem;
 }
 
 .ec-color-swatches {
@@ -726,6 +726,7 @@ const recurrenceSummary = computed(() => {
   padding: 0.5em 0.8em;
   border-radius: 0.4em;
   cursor: pointer;
+  font-size: 1rem;
   transition: all 0.2s ease;
 }
 
@@ -771,7 +772,7 @@ const recurrenceSummary = computed(() => {
 }
 
 .ec-field-label {
-  font-size: 0.85em;
+  font-size: 0.85rem;
   color: var(--muted);
 }
 
@@ -801,7 +802,7 @@ const recurrenceSummary = computed(() => {
 }
 
 .ec-weekday-text {
-  font-size: 0.8em;
+  font-size: 0.8rem;
   font-weight: 500;
   text-align: center;
 }
@@ -848,12 +849,12 @@ const recurrenceSummary = computed(() => {
   align-items: center;
   gap: 0.5em;
   flex-wrap: wrap;
-  font-size: 0.75em;
+  font-size: 0.75rem;
 }
 .freq-select {
   padding: 0.4rem 0.55rem;
   font-size: 0.75rem;
-  border: 1px solid var(--input-border);
+  border: .1rem solid var(--input-border);
   background: var(--panel-alt);
   color: var(--ink);
   border-radius: 0.45rem;
@@ -867,18 +868,19 @@ const recurrenceSummary = computed(() => {
   background: var(--panel-accent);
   color: var(--ink);
   box-shadow:
-    0 0 0 1px var(--input-focus),
-    0 0 0 4px rgba(37, 99, 235, 0.15);
+    0 0 0 .1rem var(--input-focus),
+    0 0 0 .4rem rgba(37, 99, 235, 0.15);
 }
 .interval-input,
 .occ-input {
   display: none;
 }
 .ec-field input[type='text'] {
-  border: 1px solid var(--input-border);
+  border: .1rem solid var(--input-border);
   background: var(--panel-alt);
   border-radius: 0.45rem;
   padding: 0.4rem 0.5rem;
+  font-size: 1rem;
   transition:
     border-color 0.18s ease,
     background-color 0.18s ease,
@@ -889,8 +891,8 @@ const recurrenceSummary = computed(() => {
   border-color: var(--input-focus);
   background: var(--panel-accent);
   box-shadow:
-    0 0 0 1px var(--input-focus),
-    0 0 0 4px rgba(37, 99, 235, 0.15);
+    0 0 0 .1rem var(--input-focus),
+    0 0 0 .4rem rgba(37, 99, 235, 0.15);
 }
 .hint {
   font-size: 0.65rem;
@@ -908,7 +910,7 @@ const recurrenceSummary = computed(() => {
   align-items: center;
   width: 100%;
   padding: 0.6rem 0.8rem;
-  border: 1px solid var(--muted);
+  border: .1rem solid var(--muted);
   background: var(--panel);
   border-radius: 0.4rem;
   cursor: pointer;
@@ -931,7 +933,7 @@ const recurrenceSummary = computed(() => {
   display: grid;
   gap: 0.6rem;
   padding: 0.6rem;
-  border: 1px solid var(--muted);
+  border: .1rem solid var(--muted);
   border-radius: 0.4rem;
   background: color-mix(in srgb, var(--muted) 20%, transparent);
 }
@@ -945,7 +947,7 @@ const recurrenceSummary = computed(() => {
 .ec-repeat-modes .mode-btn {
   flex: 1 1 auto;
   padding: 0.4rem 0.6rem;
-  border: 1px solid var(--muted);
+  border: .1rem solid var(--muted);
   background: var(--panel);
   border-radius: 0.4rem;
   cursor: pointer;

src/components/EventOverlay.vue

@@ -185,7 +185,7 @@ function segmentKey(seg) {
 
 function getSegmentRowHeight(seg) {
   const data = segmentCompression.value[segmentKey(seg)]
-  return data && typeof data.rowHeight === 'number' ? `${data.rowHeight}px` : '1.5em'
+  return data && typeof data.rowHeight === 'number' ? `${data.rowHeight}px` : '1.5rem'
 }
 
 function getSegmentTotalHeight(seg) {
@@ -321,18 +321,16 @@ function startLocalDrag(init, evt) {
   let originalWeekday = null
   let originalPattern = null
   if (init.mode === 'move') {
-    try {
-      originalWeekday = new Date(init.startDate + 'T00:00:00').getDay()
-      const baseEv = store.getEventById(init.id)
-      if (
-        baseEv &&
-        baseEv.recur &&
-        baseEv.recur.freq === 'weeks' &&
-        Array.isArray(baseEv.recur.weekdays)
-      ) {
-        originalPattern = [...baseEv.recur.weekdays]
-      }
-    } catch {}
+    originalWeekday = new Date(init.startDate + 'T00:00:00').getDay()
+    const baseEv = store.getEventById(init.id)
+    if (
+      baseEv &&
+      baseEv.recur &&
+      baseEv.recur.freq === 'weeks' &&
+      Array.isArray(baseEv.recur.weekdays)
+    ) {
+      originalPattern = [...baseEv.recur.weekdays]
+    }
   }
 
   dragState.value = {
@@ -565,7 +563,7 @@ function applyRangeDuringDrag(st, startDate, endDate) {
   inset: 0;
   display: grid;
   grid-template-columns: repeat(7, 1fr);
-  margin-top: 1.8em;
+  margin-top: 1.0rem;
   pointer-events: none;
 }
 .segment-grid {
@@ -582,7 +580,7 @@ function applyRangeDuringDrag(st, startDate, endDate) {
   border-radius: 1rem;
   /* Font-size so that ascender+descender exactly fills the row height:
     given total = asc+desc at 1em (hardcoded 1.15), font-size = rowHeight / total */
-  font-size: calc(var(--segment-row-height, 1.5em) / 1.15);
+  font-size: calc(var(--segment-row-height, 1.5rem) / 1.15);
   font-weight: 500;
   cursor: grab;
   pointer-events: auto;

src/components/HeaderControls.vue

@@ -1,13 +1,23 @@
 <template>
   <div class="header-controls-wrapper">
     <Transition name="header-controls" appear>
-      <div v-if="isVisible" class="header-controls">
-        <EventSearch
-          ref="eventSearchRef"
-          :reference-date="referenceDate"
-          @activate="handleSearchActivate"
-          @preview="(r) => emit('search-preview', r)"
-        />
+      <div
+        v-if="isVisible"
+        ref="headerControlsRef"
+        class="header-controls"
+        @focusin="handleFocusIn"
+        @focusout="handleFocusOut"
+      >
+        <div class="search-with-spacer">
+          <!-- Shrinkable spacer to align search with week label column; smoothly shrinks as needed -->
+          <div class="pre-search-spacer" aria-hidden="true"></div>
+          <EventSearch
+            ref="eventSearchRef"
+            :reference-date="referenceDate"
+            @activate="handleSearchActivate"
+            @preview="(r) => emit('search-preview', r)"
+          />
+        </div>
         <div
           class="current-time"
           aria-label="Current time (click to go to today)"
@@ -65,7 +75,7 @@
 </template>
 
 <script setup>
-import { computed, ref, onMounted, onBeforeUnmount, defineExpose, nextTick } from 'vue'
+import { computed, ref, onMounted, onBeforeUnmount, nextTick, watch } from 'vue'
 import { useCalendarStore } from '@/stores/CalendarStore'
 import { formatTodayString } from '@/utils/date'
 import EventSearch from '@/components/Search.vue'
@@ -118,18 +128,19 @@ function goToToday() {
 
 // Screen size detection and visibility toggle
 const isVisible = ref(false)
-// Track if we auto-opened due to a find (Ctrl/Cmd+F)
-const autoOpenedForSearch = ref(false)
+const headerControlsRef = ref(null)
+const hasFocusWithin = ref(false)
 
 function checkScreenSize() {
   const isSmallScreen = window.innerHeight < 600
-  // Default to open on large screens, closed on small screens
-  isVisible.value = !isSmallScreen
+  isVisible.value = !isSmallScreen || hasFocusWithin.value
 }
 
 function toggleVisibility() {
   isVisible.value = !isVisible.value
-  if (!isVisible.value) autoOpenedForSearch.value = false
+  if (!isVisible.value) {
+    hasFocusWithin.value = false
+  }
 }
 
 // Settings dialog integration
@@ -146,6 +157,25 @@ function openSettings() {
 
 // Search component ref exposure
 const eventSearchRef = ref(null)
+
+function handleFocusIn() {
+  hasFocusWithin.value = true
+  if (!isVisible.value) isVisible.value = true
+}
+
+function handleFocusOut(event) {
+  const container = headerControlsRef.value
+  if (!container) {
+    hasFocusWithin.value = false
+    return
+  }
+  const nextTarget = event.relatedTarget ?? document.activeElement
+  if (nextTarget && container.contains(nextTarget)) return
+  hasFocusWithin.value = false
+  if (window.innerHeight < 600) {
+    checkScreenSize()
+  }
+}
 function focusSearch(selectAll = true) {
   eventSearchRef.value?.focusSearch(selectAll)
 }
@@ -163,24 +193,21 @@ function handleGlobalFind(e) {
     e.preventDefault()
     if (!isVisible.value) {
       isVisible.value = true
-      autoOpenedForSearch.value = true
-    } else {
-      autoOpenedForSearch.value = false
     }
     // Defer focus until after transition renders input
-    nextTick(() => requestAnimationFrame(() => focusSearch(true)))
+    nextTick(() => focusSearch(true))
   }
 }
 
 function handleSearchActivate(r) {
   emit('search-activate', r)
-  // Auto close only if we auto-opened for search shortcut
-  if (autoOpenedForSearch.value) {
-    isVisible.value = false
-  }
-  autoOpenedForSearch.value = false
 }
 
+watch(isVisible, (visible) => {
+  if (visible) nextTick(() => focusSearch(true))
+  else hasFocusWithin.value = false
+})
+
 onMounted(() => {
   checkScreenSize()
   window.addEventListener('resize', checkScreenSize)
@@ -204,7 +231,32 @@ onBeforeUnmount(() => {
   align-items: center;
   width: 100%;
   padding-inline-end: 2rem;
+  gap: 1rem;
 }
+
+@media (max-width: 600px) {
+  .header-controls { gap: 0.1rem; }
+}
+/* Group search + spacer so outer gap doesn't create unwanted space */
+.search-with-spacer {
+  display: flex;
+  flex: 1;
+  min-width: 0;
+  align-items: stretch;
+}
+.search-with-spacer > .search-bar {
+  flex: 1 1 auto;
+  min-width: 6rem; /* allow spacer to give up space first */
+}
+
+.pre-search-spacer {
+  flex: 0 1000 var(--week-w);
+  width: var(--week-w);
+  min-width: .5rem;
+  pointer-events: none;
+  transition: flex-basis 0.35s ease, width 0.35s ease;
+}
+
 .toggle-btn {
   position: fixed;
   top: 0;
@@ -215,7 +267,7 @@ onBeforeUnmount(() => {
   padding: 0;
   margin: 0.5em;
   cursor: pointer;
-  font-size: 1em;
+  font-size: 1rem;
   font-weight: 700;
   line-height: 1;
   display: inline-flex;
@@ -243,13 +295,13 @@ onBeforeUnmount(() => {
 .header-controls-leave-to {
   opacity: 0;
   max-height: 0;
-  transform: translateY(-20px);
+  transform: translateY(-1rem);
 }
 
 .header-controls-enter-to,
 .header-controls-leave-from {
   opacity: 1;
-  max-height: 100px;
+  max-height: 4rem;
   transform: translateY(0);
 }
 
@@ -304,15 +356,14 @@ onBeforeUnmount(() => {
 }
 
 .today-date {
-  font-size: 1.5em;
+  font-size: 1.5rem;
   white-space: pre-line;
   text-align: center;
-  margin-inline-end: 2rem;
 }
 
 .current-time {
   font-family: ui-monospace, SF Mono, Consolas, Monaco, "Cascadia Mono", "Segoe UI Mono", "Roboto Mono", "Ubuntu Mono", "Source Code Pro", "Fira Mono", "Droid Sans Mono", "Courier New", monospace;
-  font-size: 3.6em;
+  font-size: 3.6rem;
   white-space: nowrap;
   text-align: center;
   cursor: pointer;
@@ -323,7 +374,7 @@ onBeforeUnmount(() => {
   color: var(--strong);
 }
 
-@media (max-width: 700px) {
+@media (max-width: 770px) {
   .current-time {
     display: none;
   }

src/components/Jogwheel.vue

@@ -52,17 +52,17 @@ function clampScroll(x) {
 function animateTo(target){target=clampScroll(target);const now=performance.now();if(animActive){const p=Math.min(1,(now-animStart)/ANIM_DURATION);animFrom=animFrom+(animTo-animFrom)*easeOutCubic(p);animTo=target;animStart=now;}else{animFrom=props.scrollTop;animTo=target;animStart=now;animActive=true;animFrame=requestAnimationFrame(stepAnim);return}if(!animFrame)animFrame=requestAnimationFrame(stepAnim)}
 function stepAnim(){if(!animActive)return;const t=Math.min(1,(performance.now()-animStart)/ANIM_DURATION);const val=animFrom+(animTo-animFrom)*easeOutCubic(t);emit('scroll-to',clampScroll(val));if(t>=1){animActive=false;animFrame=null;return}animFrame=requestAnimationFrame(stepAnim)}
 
-function onDragMouseDown(e){if(e.button!==0)return;if(animActive){const now=performance.now();const p=Math.min(1,(now-animStart)/ANIM_DURATION);const cur=animFrom+(animTo-animFrom)*easeOutCubic(p);animActive=false;animFrame&&cancelAnimationFrame(animFrame);animFrame=null;emit('scroll-to',clampScroll(cur));}cancelDragMomentum();isDragging.value=true;mainStartScroll=props.scrollTop;accumDelta=0;lastClientY=e.clientY;dragSamples=[{t:performance.now(),s:mainStartScroll}];if(jogwheelViewport.value&&jogwheelViewport.value.requestPointerLock)jogwheelViewport.value.requestPointerLock();window.addEventListener('mousemove',onDragMouseMove,{passive:false});window.addEventListener('mouseup',onDragMouseUp,{passive:false});e.preventDefault()}
+function onDragPointerDown(e){if(e.button!==0)return;if(animActive){const now=performance.now();const p=Math.min(1,(now-animStart)/ANIM_DURATION);const cur=animFrom+(animTo-animFrom)*easeOutCubic(p);animActive=false;animFrame&&cancelAnimationFrame(animFrame);animFrame=null;emit('scroll-to',clampScroll(cur));}cancelDragMomentum();isDragging.value=true;mainStartScroll=props.scrollTop;accumDelta=0;lastClientY=e.clientY;dragSamples=[{t:performance.now(),s:mainStartScroll}];if(jogwheelViewport.value&&jogwheelViewport.value.requestPointerLock)jogwheelViewport.value.requestPointerLock();window.addEventListener('pointermove',onDragPointerMove,{passive:false});window.addEventListener('pointerup',onDragPointerUp,{passive:false});window.addEventListener('pointercancel',onDragPointerUp,{passive:false});e.preventDefault()}
 
-function onDragMouseMove(e){if(!isDragging.value) return;let dy=typeof e.movementY==='number'?e.movementY:0;if(!pointerLocked){if(lastClientY!=null)dy=e.clientY-lastClientY;lastClientY=e.clientY;}accumDelta+=dy;let desired=mainStartScroll-accumDelta*SPEED_DRAG;if(desired<0)desired=0;const maxScroll=Math.max(0,props.totalVirtualWeeks*props.rowHeight-props.viewportHeight);if(desired>maxScroll)desired=maxScroll;emit('scroll-to',desired);dragSamples.push({t:performance.now(),s:desired});e.preventDefault()}
+function onDragPointerMove(e){if(!isDragging.value) return;let dy=typeof e.movementY==='number'?e.movementY:0;if(!pointerLocked){if(lastClientY!=null)dy=e.clientY-lastClientY;lastClientY=e.clientY;}accumDelta+=dy;let desired=mainStartScroll-accumDelta*SPEED_DRAG;if(desired<0)desired=0;const maxScroll=Math.max(0,props.totalVirtualWeeks*props.rowHeight-props.viewportHeight);if(desired>maxScroll)desired=maxScroll;emit('scroll-to',desired);dragSamples.push({t:performance.now(),s:desired});e.preventDefault()}
 
-function onDragMouseUp(e){if(!isDragging.value)return;isDragging.value=false;lastClientY=null;window.removeEventListener('mousemove',onDragMouseMove);window.removeEventListener('mouseup',onDragMouseUp);if(pointerLocked&&document.exitPointerLock)document.exitPointerLock();const v=computeDragVelocity();dragSamples=[];if(Math.abs(v)>=DRAG_MIN_V)startDragMomentum(v);e.preventDefault()}
+function onDragPointerUp(e){if(!isDragging.value)return;isDragging.value=false;lastClientY=null;window.removeEventListener('pointermove',onDragPointerMove);window.removeEventListener('pointerup',onDragPointerUp);window.removeEventListener('pointercancel',onDragPointerUp);if(pointerLocked&&document.exitPointerLock)document.exitPointerLock();const v=computeDragVelocity();dragSamples=[];if(Math.abs(v)>=DRAG_MIN_V)startDragMomentum(v);e.preventDefault()}
 
-function handlePointerLockChange(){pointerLocked=document.pointerLockElement===jogwheelViewport.value;if(!pointerLocked&&isDragging.value)onDragMouseUp(new MouseEvent('mouseup'))}
+function handlePointerLockChange(){pointerLocked=document.pointerLockElement===jogwheelViewport.value;if(!pointerLocked&&isDragging.value)onDragPointerUp(new PointerEvent('pointerup'))}
 
-onMounted(()=>{if(jogwheelViewport.value){jogwheelViewport.value.addEventListener('mousedown',onDragMouseDown);jogwheelViewport.value.addEventListener('wheel',onWheel,{passive:false,capture:true});}document.addEventListener('pointerlockchange',handlePointerLockChange)})
+onMounted(()=>{if(jogwheelViewport.value){jogwheelViewport.value.addEventListener('pointerdown',onDragPointerDown);jogwheelViewport.value.addEventListener('wheel',onWheel,{passive:false,capture:true});}document.addEventListener('pointerlockchange',handlePointerLockChange)})
 
-onBeforeUnmount(()=>{if(jogwheelViewport.value){jogwheelViewport.value.removeEventListener('mousedown',onDragMouseDown);jogwheelViewport.value.removeEventListener('wheel',onWheel);}window.removeEventListener('mousemove',onDragMouseMove);window.removeEventListener('mouseup',onDragMouseUp);document.removeEventListener('pointerlockchange',handlePointerLockChange)})
+onBeforeUnmount(()=>{if(jogwheelViewport.value){jogwheelViewport.value.removeEventListener('pointerdown',onDragPointerDown);jogwheelViewport.value.removeEventListener('wheel',onWheel);}window.removeEventListener('pointermove',onDragPointerMove);window.removeEventListener('pointerup',onDragPointerUp);window.removeEventListener('pointercancel',onDragPointerUp);document.removeEventListener('pointerlockchange',handlePointerLockChange)})
 
 function onWheel(e){if(e.ctrlKey)return;e.preventDefault();e.stopPropagation();cancelDragMomentum();const dy=e.deltaY;if(Math.abs(dy)<MIN_WHEEL_ABS)return;const dir=dy>0?1:-1;const base=animActive?animTo:props.scrollTop;animateTo(base+dir*MONTH_SCROLL())}
 
@@ -87,6 +87,7 @@ function startDragMomentum(v){cancelDragMomentum();dragMomentumVelocity=v;dragMo
   z-index: 20;
   cursor: ns-resize;
   overscroll-behavior: contain;
+  touch-action: none;
 }
 
 .jogwheel-viewport::-webkit-scrollbar { display: none; }

src/components/Numeric.vue

@@ -245,6 +245,7 @@ function onWheel(e) {
   justify-content: center;
   gap: 0.25rem;
   background: none;
+  font-size: 1rem;
   font-variant-numeric: tabular-nums;
   touch-action: none;
 }

src/components/Search.vue

@@ -8,6 +8,9 @@
       aria-label="Search dates, holidays and events"
       @keydown="handleSearchKeydown"
     />
+    <div v-if="shortcut" class="shortcut-hint">
+      {{ shortcut }}
+    </div>
     <ul
       v-if="searchQuery.trim() && searchResults.length"
       class="search-dropdown"
@@ -26,14 +29,11 @@
         ><span class="date">{{ r.startDate }}</span>
       </li>
     </ul>
-    <div v-else-if="searchQuery.trim() && !searchResults.length" class="search-empty">
-      No matches
-    </div>
   </div>
 </template>
 
 <script setup>
-import { ref, watch, nextTick, computed, defineExpose, onUnmounted, onMounted } from 'vue'
+import { ref, watch, nextTick, computed, onUnmounted, onMounted } from 'vue'
 import { useCalendarStore } from '@/stores/CalendarStore'
 import {
   fromLocalString,
@@ -60,6 +60,12 @@ const searchIndex = ref(0)
 const searchInputRef = ref(null)
 let previewTimer = null
 
+// Note: Android is also Linux. HarmonyOS 5 doesn't include "Linux".
+const shortcut = /Android/.test(navigator.userAgent) ? ''
+  : /Mac/.test(navigator.userAgent) ? '⌘F'
+  : /Windows|Linux/.test(navigator.userAgent) ? 'Ctrl+F'
+  : ''
+
 // Accent-insensitive lowercasing
 const norm = (s) =>
   s
@@ -469,8 +475,8 @@ function parseGoToDateCandidate(input, refStr) {
 
 <style scoped>
 .search-bar {
-  flex: 0 1 20rem;
-  margin-inline: auto; /* center with equal free-space on both sides */
+  flex: 1;
+  min-width: 0;
   position: relative;
 }
 .search-bar input {
@@ -478,9 +484,9 @@ function parseGoToDateCandidate(input, refStr) {
   padding: 0.32rem 0.5rem;
   padding-inline-start: 2.05rem; /* increased space for icon */
   border-radius: 0.45rem;
-  border: 1px solid color-mix(in srgb, var(--muted) 35%, transparent);
+  border: .1rem solid color-mix(in srgb, var(--muted) 35%, transparent);
   background: color-mix(in srgb, var(--panel) 88%, transparent);
-  font: inherit;
+  font-size: 1rem;
   line-height: 1.1;
   color: var(--ink);
   outline: none;
@@ -509,6 +515,27 @@ function parseGoToDateCandidate(input, refStr) {
 .search-bar input::-webkit-search-cancel-button {
   cursor: pointer;
 }
+
+.shortcut-hint {
+  position: absolute;
+  top: 50%;
+  inset-inline-end: 0.5rem;
+  transform: translateY(-50%);
+  pointer-events: none;
+  font-size: 0.75rem;
+  opacity: 0.6;
+  color: var(--muted);
+  font-family: ui-monospace, SF Mono, Consolas, Monaco, "Cascadia Mono", "Segoe UI Mono", "Roboto Mono", "Ubuntu Mono", "Source Code Pro", "Fira Mono", "Droid Sans Mono", "Courier New", monospace;
+  background: color-mix(in srgb, var(--panel) 85%, transparent);
+  padding: 0.15rem 0.3rem;
+  border-radius: 0.25rem;
+  border: .1rem solid color-mix(in srgb, var(--muted) 25%, transparent);
+}
+
+.search-bar input:focus + .shortcut-hint,
+.search-bar input:not(:placeholder-shown) + .shortcut-hint {
+  display: none;
+}
 .search-dropdown {
   position: absolute;
   top: calc(100% + 0.25rem);
@@ -520,8 +547,7 @@ function parseGoToDateCandidate(input, refStr) {
   padding: 0.2rem;
   background: color-mix(in srgb, var(--panel) 92%, transparent);
   backdrop-filter: blur(0.6em);
-  -webkit-backdrop-filter: blur(0.6em);
-  border: 1px solid color-mix(in srgb, var(--muted) 35%, transparent);
+  border: .1rem solid color-mix(in srgb, var(--muted) 35%, transparent);
   border-radius: 0.55rem;
   max-height: 16rem;
   overflow: auto;
@@ -562,8 +588,7 @@ function parseGoToDateCandidate(input, refStr) {
   padding: 0.45rem 0.6rem;
   background: color-mix(in srgb, var(--panel) 92%, transparent);
   backdrop-filter: blur(0.6em);
-  -webkit-backdrop-filter: blur(0.6em);
-  border: 1px solid color-mix(in srgb, var(--muted) 35%, transparent);
+  border: .1rem solid color-mix(in srgb, var(--muted) 35%, transparent);
   border-radius: 0.55rem;
   box-shadow: 0 0.5em 1.25em rgba(0, 0, 0, 0.3);
   font-size: 0.7rem;

src/components/SettingsDialog.vue

@@ -253,11 +253,12 @@ defineExpose({ open })
   border-inline-start: 2px solid var(--border-color);
 }
 select {
-  border: 1px solid var(--muted);
+  border: .1rem solid var(--muted);
   background: var(--panel-alt, transparent);
   color: var(--ink);
   padding: 0.4rem 0.5rem;
   border-radius: 0.4rem;
+  font-size: 1rem;
 }
 
 .holiday-row {
@@ -273,7 +274,7 @@ select {
 
 .state-select {
   flex: 0 0 auto;
-  min-width: 120px;
+  min-width: 4rem;
 }
 
 .footer-row {
@@ -291,12 +292,13 @@ select {
   gap: 0.5rem;
 }
 .ec-btn {
-  border: 1px solid var(--muted);
+  border: .1rem solid var(--muted);
   background: transparent;
   color: var(--ink);
   padding: 0.5rem 0.8rem;
   border-radius: 0.4rem;
   cursor: pointer;
+  font-size: 1rem;
 }
 .ec-btn.close-btn {
   background: var(--panel-alt);

src/plugins/virtualWeeks.js

@@ -287,20 +287,20 @@ export function createVirtualWeekManager({
   function goToToday() {
     const todayDate = new Date(calendarStore.now)
     const targetWeekIndex = getWeekIndex(todayDate)
-    scrollToWeekCentered(targetWeekIndex, 'go-to-today', true)
+    scrollToWeek(targetWeekIndex, 'go-to-today', true)
   }
 
-  function scrollToWeekCentered(weekIndex, reason = 'center-scroll', smooth = true) {
+  function scrollToWeek(weekIndex, reason = 'scroll', smooth = true) {
     if (weekIndex == null || !isFinite(weekIndex)) return
     const maxScroll = Math.max(0, contentHeight.value - viewportHeight.value)
-    const baseTop = (weekIndex - minVirtualWeek.value) * rowHeight.value
-    // Center: subtract half viewport minus half row height
-    let newScrollTop = baseTop - (viewportHeight.value / 2 - rowHeight.value / 2)
-    newScrollTop = Math.max(0, Math.min(newScrollTop, maxScroll))
+    // Scroll so that the top of the viewport aligns with the top of the previous week,
+    // making the target week the second visible week row
+    const newScrollTop = (weekIndex - 1 - minVirtualWeek.value) * rowHeight.value
+    const clampedScrollTop = Math.max(0, Math.min(newScrollTop, maxScroll))
     if (smooth && viewport.value && typeof viewport.value.scrollTo === 'function') {
-      viewport.value.scrollTo({ top: newScrollTop, behavior: 'smooth' })
+      viewport.value.scrollTo({ top: clampedScrollTop, behavior: 'smooth' })
     } else if (setScrollTopFn) {
-      setScrollTopFn(newScrollTop, reason)
+      setScrollTopFn(clampedScrollTop, reason)
       scheduleWindowUpdate(reason)
     }
   }
@@ -322,7 +322,7 @@ export function createVirtualWeekManager({
     getWeekIndex,
     getFirstDayForVirtualWeek,
     goToToday,
-    scrollToWeekCentered,
+    scrollToWeek,
     handleHeaderYearChange,
     attachScroll,
   }

src/stores/CalendarStore.js

@@ -23,7 +23,6 @@ export const useCalendarStore = defineStore('calendar', {
     _holidayConfigSignature: null,
     _holidaysInitialized: false,
     config: {
-      select_days: 14,
       first_day: 1,
       holidays: {
         enabled: true,

src/utils/date.js

@@ -2,14 +2,14 @@
 import * as dateFns from 'date-fns'
 import { fromZonedTime, toZonedTime } from 'date-fns-tz'
 
-const DEFAULT_TZ = Intl.DateTimeFormat().resolvedOptions().timeZone || 'UTC'
+export const DEFAULT_TZ = Intl.DateTimeFormat().resolvedOptions().timeZone || 'UTC'
 
 // Re-exported iso helpers (keep the same exported names used elsewhere)
-const getISOWeek = dateFns.getISOWeek
-const getISOWeekYear = dateFns.getISOWeekYear
+export const getISOWeek = dateFns.getISOWeek
+export const getISOWeekYear = dateFns.getISOWeekYear
 
 // Constants
-const monthAbbr = [
+export const monthAbbr = [
   'jan',
   'feb',
   'mar',
@@ -24,15 +24,15 @@ const monthAbbr = [
   'dec',
 ]
 // We get scrolling issues if the virtual view is bigger than that
-const MIN_YEAR = 1582
-const MAX_YEAR = 3000
+export const MIN_YEAR = 1582
+export const MAX_YEAR = 3000
 
 // Core helpers ------------------------------------------------------------
 /**
  * Construct a date at local midnight in the specified IANA timezone.
  * Returns a native Date whose wall-clock components in that zone are (Y, M, D 00:00:00).
  */
-function makeTZDate(year, monthIndex, day, timeZone = DEFAULT_TZ) {
+export function makeTZDate(year, monthIndex, day, timeZone = DEFAULT_TZ) {
   const iso = `${String(year).padStart(4, '0')}-${String(monthIndex + 1).padStart(2, '0')}-${String(
     day,
   ).padStart(2, '0')}`
@@ -43,40 +43,40 @@ function makeTZDate(year, monthIndex, day, timeZone = DEFAULT_TZ) {
 /**
  * Alias constructor for timezone-specific calendar date (semantic sugar over makeTZDate).
  */
-const TZDate = (year, monthIndex, day, timeZone = DEFAULT_TZ) =>
+export const TZDate = (year, monthIndex, day, timeZone = DEFAULT_TZ) =>
   makeTZDate(year, monthIndex, day, timeZone)
 
 /**
  * Construct a UTC-based date/time (wrapper for Date.UTC for consistency).
  */
-const UTCDate = (year, monthIndex, day, hour = 0, minute = 0, second = 0, ms = 0) =>
+export const UTCDate = (year, monthIndex, day, hour = 0, minute = 0, second = 0, ms = 0) =>
   new Date(Date.UTC(year, monthIndex, day, hour, minute, second, ms))
 
-function toLocalString(date = new Date(), timeZone = DEFAULT_TZ) {
+export function toLocalString(date = new Date(), timeZone = DEFAULT_TZ) {
   return dateFns.format(toZonedTime(date, timeZone), 'yyyy-MM-dd')
 }
 
-function fromLocalString(dateString, timeZone = DEFAULT_TZ) {
+export function fromLocalString(dateString, timeZone = DEFAULT_TZ) {
   if (!dateString) return makeTZDate(1970, 0, 1, timeZone)
   const parsed = dateFns.parseISO(dateString)
   const utcDate = fromZonedTime(`${dateString}T00:00:00`, timeZone)
   return toZonedTime(utcDate, timeZone) || parsed
 }
 
-function getMondayOfISOWeek(date, timeZone = DEFAULT_TZ) {
+export function getMondayOfISOWeek(date, timeZone = DEFAULT_TZ) {
   const d = toZonedTime(date, timeZone)
   const dow = (dateFns.getDay(d) + 6) % 7 // Monday=0
   return dateFns.addDays(dateFns.startOfDay(d), -dow)
 }
 
-const mondayIndex = (d) => (dateFns.getDay(d) + 6) % 7
+export const mondayIndex = (d) => (dateFns.getDay(d) + 6) % 7
 
 // (Recurrence utilities moved to events.js)
 
 // Utility formatting & localization ---------------------------------------
-const pad = (n) => String(n).padStart(2, '0')
+export const pad = (n) => String(n).padStart(2, '0')
 
-function daysInclusive(aStr, bStr, timeZone = DEFAULT_TZ) {
+export function daysInclusive(aStr, bStr, timeZone = DEFAULT_TZ) {
   const a = fromLocalString(aStr, timeZone)
   const b = fromLocalString(bStr, timeZone)
   return (
@@ -84,12 +84,12 @@ function daysInclusive(aStr, bStr, timeZone = DEFAULT_TZ) {
   )
 }
 
-function addDaysStr(str, n, timeZone = DEFAULT_TZ) {
+export function addDaysStr(str, n, timeZone = DEFAULT_TZ) {
   return toLocalString(dateFns.addDays(fromLocalString(str, timeZone), n), timeZone)
 }
 
 // Weekday name helpers now return Sunday-first ordering (index 0 = Sunday ... 6 = Saturday)
-function getLocalizedWeekdayNames(timeZone = DEFAULT_TZ) {
+export function getLocalizedWeekdayNames(timeZone = DEFAULT_TZ) {
   const sunday = makeTZDate(2025, 0, 5, timeZone) // a Sunday
   return Array.from({ length: 7 }, (_, i) =>
     new Intl.DateTimeFormat(undefined, { weekday: 'short', timeZone }).format(
@@ -99,7 +99,7 @@ function getLocalizedWeekdayNames(timeZone = DEFAULT_TZ) {
 }
 
 // Long (wide) localized weekday names, Sunday-first ordering
-function getLocalizedWeekdayNamesLong(timeZone = DEFAULT_TZ) {
+export function getLocalizedWeekdayNamesLong(timeZone = DEFAULT_TZ) {
   const sunday = makeTZDate(2025, 0, 5, timeZone)
   return Array.from({ length: 7 }, (_, i) =>
     new Intl.DateTimeFormat(undefined, { weekday: 'long', timeZone }).format(
@@ -108,26 +108,26 @@ function getLocalizedWeekdayNamesLong(timeZone = DEFAULT_TZ) {
   )
 }
 
-function getLocaleFirstDay() {
+export function getLocaleFirstDay() {
   const day = new Intl.Locale(navigator.language).weekInfo?.firstDay ?? 1
   return day % 7
 }
 
-function getLocaleWeekendDays() {
+export function getLocaleWeekendDays() {
   const wk = new Set(new Intl.Locale(navigator.language).weekInfo?.weekend ?? [6, 7])
   return Array.from({ length: 7 }, (_, i) => wk.has(1 + ((i + 6) % 7)))
 }
 
-function reorderByFirstDay(days, firstDay) {
+export function reorderByFirstDay(days, firstDay) {
   return Array.from({ length: 7 }, (_, i) => days[(i + firstDay) % 7])
 }
 
-function getLocalizedMonthName(idx, short = false, timeZone = DEFAULT_TZ) {
+export function getLocalizedMonthName(idx, short = false, timeZone = DEFAULT_TZ) {
   const d = makeTZDate(2025, idx, 1, timeZone)
   return new Intl.DateTimeFormat(undefined, { month: short ? 'short' : 'long', timeZone }).format(d)
 }
 
-function formatDateRange(startDate, endDate, timeZone = DEFAULT_TZ) {
+export function formatDateRange(startDate, endDate, timeZone = DEFAULT_TZ) {
   const a = toLocalString(startDate, timeZone)
   const b = toLocalString(endDate, timeZone)
   if (a === b) return a
@@ -138,7 +138,7 @@ function formatDateRange(startDate, endDate, timeZone = DEFAULT_TZ) {
   return `${a}/${b}`
 }
 
-function lunarPhaseSymbol(date) {
+export function lunarPhaseSymbol(date) {
   // Reference new moon (J2000 era) used for approximate phase calculations
   const ref = UTCDate(2000, 0, 6, 18, 14, 0)
   const obs = new Date(date)
@@ -165,14 +165,14 @@ function lunarPhaseSymbol(date) {
 /**
  * Format date as short localized string (e.g., "Jan 15")
  */
-function formatDateShort(date) {
+export function formatDateShort(date) {
   return date.toLocaleDateString(undefined, { month: 'short', day: 'numeric' }).replace(/, /, ' ')
 }
 
 /**
  * Format date as long localized string with optional year (e.g., "Mon Jan 15" or "Mon Jan 15, 2025")
  */
-function formatDateLong(date, includeYear = false) {
+export function formatDateLong(date, includeYear = false) {
   const opts = {
     weekday: 'short',
     month: 'short',
@@ -185,57 +185,9 @@ function formatDateLong(date, includeYear = false) {
 /**
  * Format date as today string (e.g., "Monday\nJanuary 15")
  */
-function formatTodayString(date) {
+export function formatTodayString(date, weekday = "long", month = "long") {
   const formatted = date
-    .toLocaleDateString(undefined, { weekday: 'long', month: 'long', day: 'numeric' })
+    .toLocaleDateString(undefined, { weekday, month, day: 'numeric' })
     .replace(/,? /, '\n')
   return formatted.charAt(0).toUpperCase() + formatted.slice(1)
 }
-
-/**
- * Format date as compact string for day cell corner (e.g., "Mon 15 Jan")
- */
-function formatDateCompact(date) {
-  return date.toLocaleDateString(undefined, { 
-    weekday: 'short', 
-    day: 'numeric', 
-    month: 'short'
-  })
-}
-
-export {
-  // constants
-  monthAbbr,
-  MIN_YEAR,
-  MAX_YEAR,
-  DEFAULT_TZ,
-  // core tz helpers
-  makeTZDate,
-  toLocalString,
-  fromLocalString,
-  // recurrence
-  getMondayOfISOWeek,
-  mondayIndex,
-  // formatting & localization
-  pad,
-  daysInclusive,
-  addDaysStr,
-  getLocalizedWeekdayNames,
-  getLocalizedWeekdayNamesLong,
-  getLocaleFirstDay,
-  getLocaleWeekendDays,
-  reorderByFirstDay,
-  getLocalizedMonthName,
-  formatDateRange,
-  formatDateShort,
-  formatDateLong,
-  formatDateCompact,
-  formatTodayString,
-  lunarPhaseSymbol,
-  // iso helpers re-export
-  getISOWeek,
-  getISOWeekYear,
-  // constructors
-  TZDate,
-  UTCDate,
-}

vite.config.js

@@ -15,4 +15,18 @@ export default defineConfig({
       '@': fileURLToPath(new URL('./src', import.meta.url))
     },
   },
+  build: {
+    chunkSizeWarningLimit: 1500,
+    rollupOptions: {
+      output: {
+        manualChunks: (id) => {
+          if (id.includes('node_modules/date-fns') || 
+              id.includes('node_modules/date-fns-tz') || 
+              id.includes('node_modules/date-holidays')) {
+            return 'vendor-date-libs';
+          }
+        }
+      }
+    }
+  }
 })