frontend/css/app.css

@@ -528,6 +528,17 @@ a { color: var(--primary); text-decoration: none; }
   z-index: 4;
   pointer-events: none;
 }
+/* Bottom divider on the previous-month cells in the same row as the change.
+   Uses ::before because these cells never have month-divider-left. */
+.month-col.month-divider-bottom::before {
+  content: '';
+  position: absolute;
+  bottom: 0; left: 0; right: 0;
+  height: 3px;
+  background: var(--month-divider-color, #7090c0);
+  z-index: 4;
+  pointer-events: none;
+}
 .month-row.month-divider-top {
   position: relative;
 }

frontend/js/views/month.js

@@ -141,10 +141,12 @@ export function renderMonth(container, currentDate, events, onDayClick, onEventC
       // First-of-month marker: show month abbreviation, push day number below
       const isFirstOfMonth = cell.getDate() === 1;
       const firstCls   = isFirstOfMonth ? 'first-of-month' : '';
-      // Vertical line at month change, horizontal line spanning from change to end of row
+      // Step-shaped boundary at month change: bottom under the previous-month
+      // tail, vertical at the change, top across the new-month head.
       const dividerClasses = [];
       if (isFirstOfMonth && idx > 0) dividerClasses.push('month-divider-left');
       if (monthChangeIdx > 0 && idx >= monthChangeIdx) dividerClasses.push('month-divider-top');
+      if (monthChangeIdx > 0 && idx < monthChangeIdx) dividerClasses.push('month-divider-bottom');
       const dividerCls = dividerClasses.join(' ');
       const monthLabel = isFirstOfMonth
         ? `<div class="month-marker">${monthsShort[cell.getMonth()]}</div>`