Web: enhance overflow popup with styled all-day bars and continuation arrows

All-day events in the "+N weitere" popup now render as colored bars matching
the month-grid style: continues-left/right arrows when the event spans beyond
the selected day. Timed events keep dot+time+title format. Version bump v50.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

frontend/css/app.css

@@ -742,6 +742,7 @@ a { color: var(--primary); text-decoration: none; }
   box-shadow: var(--shadow-lg);
   padding: 10px 0;
   min-width: 220px; max-width: 300px;
+  overflow: hidden;
   user-select: none;
 }
 .mop-header {
@@ -769,6 +770,27 @@ a { color: var(--primary); text-decoration: none; }
   font-size: 12px; font-weight: 500; color: var(--text-1);
   white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
 }
+/* All-day event bars in overflow popup */
+.mop-bar {
+  position: relative; display: block;
+  margin: 2px 8px; padding: 3px 8px;
+  border-radius: 4px;
+  font-size: 11px; font-weight: 500; color: #fff;
+  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+  cursor: pointer;
+}
+.mop-bar:hover { filter: brightness(1.15); }
+.mop-bar.continues-left  { border-radius: 0 4px 4px 0; margin-left: 0; padding-left: 14px; }
+.mop-bar.continues-right { border-radius: 4px 0 0 4px; margin-right: 0; padding-right: 14px; }
+.mop-bar.continues-left.continues-right { border-radius: 0; }
+.mop-bar.continues-left::before {
+  content: '‹'; position: absolute; left: 3px; top: 50%;
+  transform: translateY(-50%); font-size: 12px; opacity: 0.85;
+}
+.mop-bar.continues-right::after {
+  content: '›'; position: absolute; right: 3px; top: 50%;
+  transform: translateY(-50%); font-size: 12px; opacity: 0.85;
+}
 
 /* ── Week / Day Views ───────────────────────────────────── */
 .week-view, .day-view { display: flex; flex-direction: column; flex: 1; min-height: 0; overflow-y: scroll; }

frontend/js/version.js

@@ -1,2 +1,2 @@
 // Increment APP_VERSION with every code change
-export const APP_VERSION = 'v49';
+export const APP_VERSION = 'v50';

frontend/js/views/month.js

@@ -277,16 +277,40 @@ function showOverflowPopup(anchor, date, events, onEventClick) {
   popup.appendChild(header);
 
   events.forEach(ev => {
+    const evStart = new Date(ev.start); evStart.setHours(0, 0, 0, 0);
+    const evEnd   = new Date(ev.end);   evEnd.setHours(0, 0, 0, 0);
+    // allDay end from API is exclusive → actual last day = evEnd - 1d
+    const lastDay      = ev.allDay ? new Date(evEnd.getTime() - 86400000) : evEnd;
+    const continuesLeft  = evStart < date;
+    const continuesRight = lastDay > date;
+    const color = ev.color || ev.calendarColor || '#4285f4';
+
+    if (ev.allDay) {
+      // All-day events → colored bar with continuation arrows
+      const bar = document.createElement('div');
+      bar.className = 'mop-bar'
+        + (continuesLeft  ? ' continues-left'  : '')
+        + (continuesRight ? ' continues-right' : '');
+      bar.style.background = color;
+      bar.textContent = ev.title;
+      bar.addEventListener('click', e => {
+        e.stopPropagation();
+        popup.remove();
+        onEventClick(ev, bar);
+      });
+      popup.appendChild(bar);
+    } else {
+      // Timed events → dot + time + title
       const row = document.createElement('div');
       row.className = 'mop-row';
 
       const dot = document.createElement('span');
       dot.className = 'mop-dot';
-    dot.style.background = ev.color || ev.calendarColor || '#4285f4';
+      dot.style.background = color;
 
       const time = document.createElement('span');
       time.className = 'mop-time';
-    time.textContent = ev.allDay ? t('allday_cap') : fmtTime(new Date(ev.start));
+      time.textContent = fmtTime(new Date(ev.start));
 
       const title = document.createElement('span');
       title.className = 'mop-title';
@@ -299,6 +323,7 @@ function showOverflowPopup(anchor, date, events, onEventClick) {
         onEventClick(ev, row);
       });
       popup.appendChild(row);
+    }
   });
 
   document.body.appendChild(popup);