diff --git a/src/components/EventOverlay.vue b/src/components/EventOverlay.vue
index a49d64a..9bf58f2 100644
--- a/src/components/EventOverlay.vue
+++ b/src/components/EventOverlay.vue
@@ -3,8 +3,13 @@
     <div
       v-for="seg in eventSegments"
       :key="'seg-' + seg.startIdx + '-' + seg.endIdx"
-      :class="['segment-grid', { compress: isSegmentCompressed(seg) }]"
-      :style="segmentStyle(seg)"
+      class="segment-grid"
+      :style="{
+        ...segmentStyle(seg),
+        '--segment-row-height': getSegmentRowHeight(seg),
+        '--segment-scale-factor': getSegmentScaleFactor(seg),
+        height: getSegmentTotalHeight(seg)
+      }"
     >
       <div
         v-for="span in seg.events"
@@ -179,8 +184,19 @@ function segmentKey(seg) {
   return seg.startIdx + '-' + seg.endIdx
 }
 
-function isSegmentCompressed(seg) {
-  return !!segmentCompression.value[segmentKey(seg)]
+function getSegmentRowHeight(seg) {
+  const data = segmentCompression.value[segmentKey(seg)]
+  return data && typeof data.rowHeight === 'number' ? `${data.rowHeight}px` : '1.5em'
+}
+
+function getSegmentTotalHeight(seg) {
+  const data = segmentCompression.value[segmentKey(seg)]
+  return data && typeof data.totalHeight === 'number' ? `${data.totalHeight}px` : 'auto'
+}
+
+function getSegmentScaleFactor(seg) {
+  const data = segmentCompression.value[segmentKey(seg)]
+  return data && typeof data.scaleFactor === 'number' ? data.scaleFactor : 1.0
 }
 
 function recomputeCompression() {
@@ -195,8 +211,31 @@ function recomputeCompression() {
   const usable = Math.max(0, available - marginTop)
   const nextMap = {}
   for (const seg of eventSegments.value) {
-    const desired = (seg.rowsCount || 1) * baseRowPx
-    nextMap[segmentKey(seg)] = desired > usable
+    const rowCount = seg.rowsCount || 1
+    const gapPx = 2 // gap between grid rows
+    const totalGaps = Math.max(0, rowCount - 1) * gapPx
+    const desired = rowCount * baseRowPx + totalGaps
+    const needsScaling = desired > usable
+    if (needsScaling) {
+      // Calculate the scaled row height that fits within available space
+      const availableForRows = usable - totalGaps
+      const scaledRowHeight = Math.max(0, availableForRows) / rowCount
+      // Never scale larger than the base size
+      const finalRowHeight = Math.min(scaledRowHeight, baseRowPx)
+      const scaleFactor = finalRowHeight / baseRowPx
+      nextMap[segmentKey(seg)] = {
+        rowHeight: finalRowHeight,
+        totalHeight: finalRowHeight * rowCount + totalGaps,
+        scaleFactor: scaleFactor
+      }
+    } else {
+      // Use base size when there's enough space
+      nextMap[segmentKey(seg)] = {
+        rowHeight: baseRowPx,
+        totalHeight: desired,
+        scaleFactor: 1.0
+      }
+    }
   }
   segmentCompression.value = nextMap
 }
@@ -542,16 +581,13 @@ function applyRangeDuringDrag(st, startDate, endDate) {
   pointer-events: none;
   overflow: hidden;
   grid-auto-columns: 1fr;
-  grid-auto-rows: 1.5em;
-}
-.segment-grid.compress {
-  grid-auto-rows: 1fr;
+  grid-auto-rows: var(--segment-row-height, 1.5em);
 }
 
 .event-span {
-  padding: 0.1em 0.3em;
-  border-radius: 1em;
-  font-size: clamp(0.45em, 1.8vh, 0.75em);
+  padding: calc(0.1em * var(--segment-scale-factor, 1)) calc(0.3em * var(--segment-scale-factor, 1));
+  border-radius: calc(1em * var(--segment-scale-factor, 1));
+  font-size: calc(clamp(0.45em, 1.8vh, 0.75em) * var(--segment-scale-factor, 1));
   font-weight: 600;
   cursor: grab;
   pointer-events: auto;