Fix layout spacing and schedule overlap

static/admin-v020.js

@@ -10,7 +10,7 @@
       segments: [],
       interaction: null,
       dragKind: null,
-      pixelsPerMinute: 1.65,
+      pixelsPerMinute: 2.25,
     },
   };
 
@@ -250,11 +250,11 @@
       const isEdge = index === 0 || index === marks.length - 1;
       const previous = visibleMarks[visibleMarks.length - 1];
 
-      if (isEdge && previous && top - previous.top < 30) {
+      if (isEdge && previous && top - previous.top < 42) {
         visibleMarks.pop();
       }
 
-      if (!previous || isEdge || top - (visibleMarks[visibleMarks.length - 1]?.top ?? -Infinity) >= 30) {
+      if (!previous || isEdge || top - (visibleMarks[visibleMarks.length - 1]?.top ?? -Infinity) >= 42) {
         visibleMarks.push({ minute, top, index });
       }
     });
@@ -273,10 +273,13 @@
     });
 
     segments.forEach((segment, index) => {
-      const segmentHeight = Math.max(Math.round(segment.durationMinutes * getEditorPixelsPerMinute()), 36);
+      const minimumHeight = segment.kind === "break" ? 16 : 42;
+      const rawHeight = Math.max(Math.round(segment.durationMinutes * getEditorPixelsPerMinute()), minimumHeight);
+      const inset = rawHeight > 80 ? 4 : rawHeight > 56 ? 3 : 2;
+      const segmentHeight = Math.max(rawHeight - (inset * 2), 16);
       const block = document.createElement("article");
       block.className = `schedule-editor-segment ${segment.kind}`;
-      block.style.top = `${Math.round((segment.startMinutes - startMinutes) * getEditorPixelsPerMinute())}px`;
+      block.style.top = `${Math.round((segment.startMinutes - startMinutes) * getEditorPixelsPerMinute()) + inset}px`;
       block.style.height = `${segmentHeight}px`;
       block.classList.toggle("is-compact", segmentHeight < 88);
       block.classList.toggle("is-tight", segmentHeight < 56);

static/v020.css

@@ -156,6 +156,7 @@ body.planner-interacting * {
   min-height: 0;
   display: grid;
   grid-template-rows: minmax(0, 1fr);
+  align-items: start;
   overflow: hidden;
 }
 
@@ -169,7 +170,8 @@ body.planner-interacting * {
   gap: 14px;
   height: 100%;
   min-height: 0;
-  align-items: stretch;
+  align-items: start;
+  align-content: start;
 }
 
 .todo-column {
@@ -182,13 +184,6 @@ body.planner-interacting * {
   border-radius: 28px;
 }
 
-.todo-column:nth-child(2) {
-  transform: translateY(10px);
-}
-
-.todo-column:nth-child(3) {
-  transform: translateY(24px);
-}
 
 .column-header {
   position: relative;