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

Larger month label column so that it is easier to use on mobile devices.
Move calendarweeks etc. in DOM after the month name bar, to make them render on top of it and not under.
2025-09-25 10:28:35 -06:00 · 2025-09-25 10:26:10 -06:00 · 2025-09-25 10:17:22 -06:00 · 2025-09-25 10:05:59 -06:00 · 2025-09-25 10:02:27 -06:00 · 2025-09-25 09:34:03 -06:00
19 changed files with 378 additions and 300 deletions
--- a/src/App.vue
+++ b/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 },
 )
--- a/src/assets/colors.css
+++ b/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 */
--- a/src/assets/layout.css
+++ b/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;
--- a/src/components/BaseDialog.vue
+++ b/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>
--- a/src/components/CalendarDay.vue
+++ b/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;
--- a/src/components/CalendarHeader.vue
+++ b/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);
--- a/src/components/CalendarView.vue
+++ b/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;
--- a/src/components/CalendarWeek.vue
+++ b/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);
--- a/src/components/EventDialog.vue
+++ b/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;
--- a/src/components/EventOverlay.vue
+++ b/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;
--- a/src/components/HeaderControls.vue
+++ b/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;
  }
--- a/src/components/Jogwheel.vue
+++ b/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; }
--- a/src/components/Numeric.vue
+++ b/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;
 }
--- a/src/components/Search.vue
+++ b/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;
--- a/src/components/SettingsDialog.vue
+++ b/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);
--- a/src/plugins/virtualWeeks.js
+++ b/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,
  }
--- a/src/stores/CalendarStore.js
+++ b/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,
--- a/src/utils/date.js
+++ b/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,
-}
--- a/vite.config.js
+++ b/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';
+          }
+        }
+      }
+    }
+  }
 })
Author	SHA1	Message	Date
Leo Vasanko	bc16473715	Soften the scroll blur effect a tiny bit to avoid glitches when missing a frame.	2025-09-25 10:28:35 -06:00
Leo Vasanko	b30618031a	Larger month label column so that it is easier to use on mobile devices.	2025-09-25 10:26:10 -06:00
Leo Vasanko	cb60c589e3	Move calendarweeks etc. in DOM after the month name bar, to make them render on top of it and not under.	2025-09-25 10:17:22 -06:00
Leo Vasanko	3c5cad0afe	Dark autumn colors tuning.	2025-09-25 10:05:59 -06:00
Leo Vasanko	6d91833f0f	Fix touch moving of dialogs.	2025-09-25 10:02:27 -06:00
Leo Vasanko	a3e9e13b29	Split the bloated date libs to a separate module that rarely changes, speeding up page loads when the app itself has changed.	2025-09-25 09:34:03 -06:00
Leo Vasanko	73ce1b1be2	Dark mode month color tuneup to avoid too dark shades and to match spring colors with light mode.	2025-09-25 09:29:07 -06:00
Leo Vasanko	93fc600a7a	Do not import defineExpose because it is now a compiler macro.	2025-09-25 08:41:40 -06:00
Leo Vasanko	09df4bed5e	Remove export block in favor of directly exporting symbols.	2025-09-25 08:39:25 -06:00
Leo Vasanko	86a1a4d772	Scroll the week to view the second row visible (showing also the previous week) rather than centered, for better UX.	2025-09-25 08:35:46 -06:00
Leo Vasanko	159bbf816d	Prefer rem, assure that dialogs scale correctly.	2025-09-25 08:29:14 -06:00
Leo Vasanko	c41a3b84f4	Do not show results box and "no results" when there are no results. Just show nothing.	2025-09-25 08:03:43 -06:00
Leo Vasanko	6c396bab61	Hopefully more robust header autoclose logic to avoid OSD keyboard causing a just-focused search bar getting hidden.	2025-09-25 08:00:12 -06:00
Leo Vasanko	8a508f273d	Optimise blur.	2025-09-25 07:36:42 -06:00
Leo Vasanko	704773dc8a	Show holiday name tooltip on the entire day cell.	2025-09-25 07:23:22 -06:00
Leo Vasanko	0859e77b6a	Styling changes, avoid glitches even on very small screens.	2025-09-25 07:19:40 -06:00
Leo Vasanko	d461a42ae5	Hide shortcut key on Android.	2025-09-24 17:03:19 -06:00
Leo Vasanko	ade17b80b1	Shrink header by removing gaps on small screens.	2025-09-24 16:57:08 -06:00
Leo Vasanko	a0b140d54b	Responsive date strings in calendar days for small screen support and consistent wrapping.	2025-09-24 16:53:17 -06:00
Leo Vasanko	365d9e1be2	Add touch support to months scroll.	2025-09-24 16:25:40 -06:00
Leo Vasanko	e210babe29	Use shorter date format in title that fits better on narrow tabs	2025-09-24 16:18:37 -06:00
Leo Vasanko	31c5551535	Remove the 14 day selection limit for creating or modifying events.	2025-09-24 16:09:50 -06:00
Leo Vasanko	9b2354fd91	Improved header layout on small screens, add margin left of search bar on larger screens.	2025-09-24 16:04:31 -06:00
Leo Vasanko	43aa8db650	Implement highlight effect on the day navigated to.	2025-09-24 15:48:25 -06:00
Leo Vasanko	debeececaf	Implement Ctrl-F tip on search bar, adjust header layout (search box expanding).	2025-09-24 14:38:41 -06:00