From c1fdfe72d08232f931e0a2b1877a349457de6678 Mon Sep 17 00:00:00 2001
From: Scarriffle <admin@scarriffle.com>
Date: Mon, 15 Jun 2026 20:58:44 +0200
Subject: [PATCH] fix: modal scrollbar clips rounded corners + sidebar hover
 jump (v56)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- modal-card: overflow:hidden + flex column; modal-body scrolls instead,
  so native scrollbar never overlaps the 20px border-radius corners
- cal-item-remove / cal-item-bell: display:none→flex replaced with
  opacity:0/pointer-events:none→1/auto, eliminating reflow on hover

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

diff --git a/frontend/css/app.css b/frontend/css/app.css
index 2fac119..1b021af 100644
--- a/frontend/css/app.css
+++ b/frontend/css/app.css
@@ -598,15 +598,14 @@ a { color: var(--primary); text-decoration: none; }
   outline: none;
 }
 .cal-account-name { font-size: 11px; color: var(--text-3); padding: 4px 16px 2px; font-weight: 500; }
-/* Hide the remove/eye button until hover so the calendar name uses the full
-   width and only truncates while the button is visible. */
-.cal-item-remove { display: none; }
-.cal-item:hover .cal-item-remove { display: inline-flex; }
-/* Reminder bell: only shown on hover when enabled, but always shown (dimmed)
-   when disabled so the muted state is visible at a glance. */
-.cal-item-bell { display: none; flex-shrink: 0; }
-.cal-item:hover .cal-item-bell { display: inline-flex; }
-.cal-item-bell.off { display: inline-flex; color: var(--text-3); opacity: .75; }
+/* Hide the remove/eye button until hover — use opacity so no layout shift. */
+.cal-item-remove { opacity: 0; pointer-events: none; flex-shrink: 0; transition: opacity .12s; }
+.cal-item:hover .cal-item-remove { opacity: 1; pointer-events: auto; }
+/* Reminder bell: invisible (but present) when enabled; always visible (dimmed)
+   when disabled so the muted state is clear at a glance. */
+.cal-item-bell { opacity: 0; pointer-events: none; flex-shrink: 0; transition: opacity .12s; }
+.cal-item:hover .cal-item-bell { opacity: 1; pointer-events: auto; }
+.cal-item-bell.off { opacity: .55; pointer-events: auto; color: var(--text-3); }
 
 /* ── Month View ─────────────────────────────────────────── */
 .month-view { display: flex; flex-direction: column; flex: 1; min-height: 0; }
@@ -1056,7 +1055,9 @@ a { color: var(--primary); text-decoration: none; }
   border: 1px solid var(--border);
   border-radius: 20px;
   width: 100%;
-  max-height: 90vh; overflow-y: auto;
+  max-height: 90vh;
+  overflow: hidden;
+  display: flex; flex-direction: column;
   box-shadow: var(--shadow-lg);
 }
 .modal-header {
@@ -1066,7 +1067,7 @@ a { color: var(--primary); text-decoration: none; }
 }
 .modal-header h3 { font-size: 18px; font-weight: 500; flex: 1; }
 .modal-close { font-size: 24px; }
-.modal-body { padding: 20px; }
+.modal-body { padding: 20px; overflow-y: auto; flex: 1; }
 .modal-body p { margin: 0 0 14px; font-size: 14px; color: var(--text-1); }
 .modal-body p:last-child { margin-bottom: 0; }
 .modal-body a { color: var(--primary); text-decoration: none; }
diff --git a/frontend/js/version.js b/frontend/js/version.js
index b48ea2e..7bfec00 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 = 'v55';
+export const APP_VERSION = 'v56';