From e6bc7eab9dabcc42dec8f4c6cf14c4b51f017cd1 Mon Sep 17 00:00:00 2001
From: Scarriffle <admin@scarriffle.com>
Date: Thu, 11 Jun 2026 20:32:29 +0200
Subject: [PATCH] Web: replace chevron chars with clip-path pointed bar ends in
 overflow popup

All-day continuation bars now use CSS clip-path polygon for the tapered
arrow shape; bars stay inset within the popup (no edge bleed). Version v51.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 frontend/css/app.css   | 22 +++++++++++-----------
 frontend/js/version.js |  2 +-
 2 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/frontend/css/app.css b/frontend/css/app.css
index af0369f..fa535f4 100644
--- a/frontend/css/app.css
+++ b/frontend/css/app.css
@@ -770,9 +770,9 @@ 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 */
+/* All-day event bars in overflow popup — pointed ends via clip-path */
 .mop-bar {
-  position: relative; display: block;
+  display: block;
   margin: 2px 8px; padding: 3px 8px;
   border-radius: 4px;
   font-size: 11px; font-weight: 500; color: #fff;
@@ -780,16 +780,16 @@ a { color: var(--primary); text-decoration: none; }
   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-left {
+  clip-path: polygon(10px 0, 100% 0, 100% 100%, 10px 100%, 0 50%);
+  border-radius: 0; padding-left: 16px;
 }
-.mop-bar.continues-right::after {
-  content: '›'; position: absolute; right: 3px; top: 50%;
-  transform: translateY(-50%); font-size: 12px; opacity: 0.85;
+.mop-bar.continues-right {
+  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%);
+  border-radius: 0; padding-right: 16px;
+}
+.mop-bar.continues-left.continues-right {
+  clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 10px 100%, 0 50%);
 }
 
 /* ── Week / Day Views ───────────────────────────────────── */
diff --git a/frontend/js/version.js b/frontend/js/version.js
index 08fcc70..8a83bf5 100644
--- a/frontend/js/version.js
+++ b/frontend/js/version.js
@@ -1,2 +1,2 @@
 // Increment APP_VERSION with every code change
-export const APP_VERSION = 'v50';
+export const APP_VERSION = 'v51';