minor frontend changes

frontend/src/components/Calendar.jsx

@@ -59,6 +59,7 @@ export default function Calendar({
   windowLookup = new Map(),
   onWindowSelect,
 }) {
+  const DEFAULT_SHIFT_MIN_ROWS = 3
   const SLOT_CHROME_PX = 10
   const TEST_CARD_ROW_HEIGHT_PX = 22
   const TEST_CARD_ROW_GAP_PX = 2
@@ -75,7 +76,11 @@ export default function Calendar({
   // weekStart is Monday, so days[0]=Mon ... days[6]=Sun → put Sunday first
   const orderedDays = [ ...days.slice(0, 7)]
   const shiftMinRows = useMemo(() => {
-    const minima = { shift2: 1, shift3: 1, nextDayShift1: 1 }
+    const minima = {
+      shift2: DEFAULT_SHIFT_MIN_ROWS,
+      shift3: DEFAULT_SHIFT_MIN_ROWS,
+      nextDayShift1: DEFAULT_SHIFT_MIN_ROWS,
+    }
 
     for (const date of orderedDays) {
       const key = toDateKey(date)
@@ -83,16 +88,16 @@ export default function Calendar({
       const nextKey = toDateKey(addDays(date, 1))
       const nextDayShift1 = scheduleData[nextKey]?.shift1 ?? []
 
-      minima.shift2 = Math.max(minima.shift2, shifts.shift2.length || 1)
-      minima.shift3 = Math.max(minima.shift3, shifts.shift3.length || 1)
-      minima.nextDayShift1 = Math.max(minima.nextDayShift1, nextDayShift1.length || 1)
+      minima.shift2 = Math.max(minima.shift2, shifts.shift2.length || DEFAULT_SHIFT_MIN_ROWS)
+      minima.shift3 = Math.max(minima.shift3, shifts.shift3.length || DEFAULT_SHIFT_MIN_ROWS)
+      minima.nextDayShift1 = Math.max(minima.nextDayShift1, nextDayShift1.length || DEFAULT_SHIFT_MIN_ROWS)
     }
 
     return minima
   }, [orderedDays, scheduleData])
   const slotHeights = useMemo(() => {
     const calcSlotHeight = (rows) => {
-      const safeRows = Math.max(1, rows || 1)
+      const safeRows = Math.max(DEFAULT_SHIFT_MIN_ROWS, rows || DEFAULT_SHIFT_MIN_ROWS)
       const contentHeight = (safeRows * TEST_CARD_ROW_HEIGHT_PX) + ((safeRows - 1) * TEST_CARD_ROW_GAP_PX)
       return contentHeight + SLOT_CHROME_PX
     }
@@ -178,6 +183,17 @@ export default function Calendar({
             <span className="absolute left-0 top-0">9AM</span>
             <span className="absolute left-0" style={{ top: `${slotHeights.shift2}px` }}>5PM</span>
             <span className="absolute left-0" style={{ top: `${slotHeights.shift2 + slotHeights.shift3}px` }}>12AM</span>
+            <span
+              className="absolute right-2 text-[10px] font-bold uppercase tracking-[0.16em] text-gray-600"
+              style={{
+                top: `${slotHeights.shift2 + slotHeights.shift3 + (slotHeights.nextDayShift1 / 2)}px`,
+                transform: 'translateY(-50%) rotate(180deg)',
+                writingMode: 'vertical-rl',
+                textOrientation: 'mixed',
+              }}
+            >
+              Next Day
+            </span>
           </div>
         </div>