Styling for a more compact layout.

src/assets/layout.css

@@ -2,10 +2,10 @@
 :root {
   /* Layout */
   --row-h: 2.2em;
-  --label-w: minmax(4em, 8%);
+  --week-w: 3em;
-  --cell-w: 1fr;
+  --day-w: 1fr;
-  --cell-h: 12vh;
+  --row-h: 12vh;
-  --overlay-w: minmax(3rem, 5%);
+  --month-w: 4em;
 }
 
 /* Layout & typography */
@@ -69,7 +69,7 @@ header {
 .calendar-header,
 #calendar-header {
   display: grid;
-  grid-template-columns: var(--label-w) repeat(7, var(--cell-w)) var(--overlay-w);
+  grid-template-columns: var(--week-w) repeat(7, var(--day-w)) var(--month-w);
   border-bottom: 0.2em solid var(--muted);
   align-items: last baseline;
   flex-shrink: 0;
@@ -107,7 +107,7 @@ header {
   top: 0;
   right: 0;
   bottom: 0;
-  width: var(--overlay-w);
+  width: var(--month-w);
   overflow-y: auto;
   overflow-x: hidden;
   scrollbar-width: none;
@@ -132,10 +132,10 @@ header {
 /* Week row: label + 7-day grid + jogwheel column */
 .week-row {
   display: grid;
-  grid-template-columns: var(--label-w) repeat(7, var(--cell-w)) var(--overlay-w);
+  grid-template-columns: var(--week-w) repeat(7, var(--day-w)) var(--month-w);
   position: relative;
   overflow: visible;
-  height: var(--cell-h);
+  height: var(--row-h);
   scroll-snap-align: start;
   width: 100%;
 }
@@ -152,7 +152,7 @@ header {
 }
 
 .week-label {
-  height: var(--cell-h);
+  height: var(--row-h);
 }
 /* 7-day grid inside each week row */
 .week-row > .days-grid {

src/components/CalendarDay.vue

@@ -46,7 +46,7 @@ const props = defineProps({
   padding: 0.25em;
   overflow: hidden;
   width: 100%;
-  height: var(--cell-h);
+  height: var(--row-h);
   font-weight: 700;
   transition: background-color 0.15s ease;
 }

src/components/CalendarHeader.vue

@@ -119,7 +119,7 @@ const weekdayNames = computed(() => {
 <style scoped>
 .calendar-header {
   display: grid;
-  grid-template-columns: var(--label-w) repeat(7, 1fr) 3rem;
+  grid-template-columns: var(--week-w) repeat(7, 1fr) 3rem;
   border-bottom: 2px solid var(--muted);
   align-items: last baseline;
   flex-shrink: 0;
@@ -132,15 +132,6 @@ const weekdayNames = computed(() => {
   -webkit-touch-callout: none;
   -webkit-tap-highlight-color: transparent;
 }
-
-.year-label {
-  display: grid;
-  place-items: center;
-  width: 100%;
-  color: var(--muted);
-  font-size: 1.2em;
-  padding: 0.5rem;
-}
 .dow {
   text-transform: uppercase;
   text-align: center;

src/components/CalendarView.vue

@@ -43,7 +43,7 @@ function createEventFromSelection() {
 const scrollTop = ref(0)
 const viewportHeight = ref(600)
 const rowHeight = ref(64)
-// Probe element & observer for dynamic var(--cell-h) changes
+// Probe element & observer for dynamic var(--row-h) changes
 const rowProbe = ref(null)
 let rowProbeObserver = null
 
@@ -175,7 +175,7 @@ function computeRowHeight() {
   const el = document.createElement('div')
   el.style.position = 'absolute'
   el.style.visibility = 'hidden'
-  el.style.height = 'var(--cell-h)'
+  el.style.height = 'var(--row-h)'
   document.body.appendChild(el)
   const h = el.getBoundingClientRect().height || 64
   el.remove()
@@ -697,13 +697,10 @@ window.addEventListener('resize', () => {
 </script>
 
 <template>
-  <!-- hidden probe for measuring var(--cell-h) -->
+  <!-- hidden probe for measuring var(--row-h) -->
   <div ref="rowProbe" class="row-height-probe" aria-hidden="true"></div>
   <div class="wrap">
-    <HeaderControls
+    <HeaderControls @go-to-today="goToToday" @open-settings="openSettings" />
-      @go-to-today="goToToday"
-      @open-settings="openSettings"
-    />
 
     <CalendarHeader
       :scroll-top="scrollTop"
@@ -730,7 +727,6 @@ window.addEventListener('resize', () => {
           <div
             v-for="week in visibleWeeks"
             :key="`month-${week.virtualWeek}`"
-            v-show="week.monthLabel"
             class="month-name-label"
             :class="{ 'no-rotate': !shouldRotateMonth(week.monthLabel?.text) }"
             :style="{
@@ -831,7 +827,7 @@ header h1 {
 .row-height-probe {
   position: absolute;
   visibility: hidden;
-  height: var(--cell-h);
+  height: var(--row-h);
   pointer-events: none;
 }
 </style>

src/components/CalendarWeek.vue

@@ -57,9 +57,9 @@ const handleEventClick = (payload) => {
 <style scoped>
 .week-row {
   display: grid;
-  grid-template-columns: var(--label-w) repeat(7, 1fr) 3rem;
+  grid-template-columns: var(--week-w) repeat(7, 1fr) 3rem;
   position: absolute;
-  height: var(--cell-h);
+  height: var(--row-h);
   width: 100%;
 }
 
@@ -90,6 +90,6 @@ const handleEventClick = (payload) => {
 /* Fixed heights for cells and labels (from cells.css) */
 .week-row :deep(.cell),
 .week-label {
-  height: var(--cell-h);
+  height: var(--row-h);
 }
 </style>

src/components/EventDialog.vue

@@ -696,7 +696,7 @@ const recurrenceSummary = computed(() => {
   outline-offset: 0.125em;
   cursor: pointer;
   appearance: none;
-  width: 3em;
+  width: 80%;
   height: 1em;
 }
 
@@ -711,8 +711,8 @@ const recurrenceSummary = computed(() => {
 }
 
 .ec-btn {
-  border: 0.0625em solid var(--muted);
+  background: none;
-  background: transparent;
+  border: none;
   color: var(--ink);
   padding: 0.5em 0.8em;
   border-radius: 0.4em;
@@ -883,63 +883,6 @@ const recurrenceSummary = computed(() => {
     0 0 0 1px var(--input-focus),
     0 0 0 4px rgba(37, 99, 235, 0.15);
 }
-.mini-stepper {
-  display: inline-flex;
-  align-items: center;
-  background: var(--panel-alt);
-  border: 1px solid var(--input-border);
-  border-radius: 0.5rem;
-  overflow: hidden;
-  font-size: 0.7rem;
-  height: 1.9rem;
-}
-.mini-stepper .step {
-  background: transparent;
-  border: none;
-  color: var(--ink);
-  padding: 0 0.55rem;
-  cursor: pointer;
-  font-size: 0.9rem;
-  line-height: 1;
-  font-weight: 600;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 100%;
-  transition:
-    background-color 0.15s ease,
-    color 0.15s ease;
-}
-.mini-stepper .step:hover:not(:disabled) {
-  background: var(--pill-hover-bg);
-}
-.mini-stepper .step:disabled {
-  opacity: 0.35;
-  cursor: default;
-}
-.mini-stepper .value {
-  min-width: 1.6rem;
-  text-align: center;
-  font-variant-numeric: tabular-nums;
-  font-weight: 600;
-  letter-spacing: 0.02em;
-}
-.mini-stepper:focus-within {
-  border-color: var(--input-focus);
-  box-shadow:
-    0 0 0 1px var(--input-focus),
-    0 0 0 4px rgba(37, 99, 235, 0.15);
-}
-.mini-stepper.occ .value {
-  min-width: 2rem;
-}
-.occ-stepper.mini-stepper.occ .value {
-  min-width: 2rem;
-}
-.mini-stepper .step:focus-visible {
-  outline: 2px solid var(--input-focus);
-  outline-offset: -2px;
-}
 .hint {
   font-size: 0.65rem;
   opacity: 0.65;

src/components/Numeric.vue

@@ -289,17 +289,12 @@ function onWheel(e) {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  padding: 0 0.4rem;
   gap: 0.25rem;
-  border: 1px solid transparent;
+  background: none;
-  background: transparent;
-  border-radius: 0.4rem;
-  min-height: 1.8rem;
   font-variant-numeric: tabular-nums;
   touch-action: none;
 }
 .mini-stepper.drag-mode:focus-visible {
-  border-color: var(--input-border, var(--muted));
   box-shadow: 0 0 0 2px var(--input-focus, #2563eb);
   outline: none;
 }