From 0427e1189de75746d4c5d9226c66e586a3cfd619 Mon Sep 17 00:00:00 2001
From: Scarriffle <admin@scarriffle.com>
Date: Mon, 15 Jun 2026 21:18:04 +0200
Subject: [PATCH] fix(sidebar): absolute-position action buttons to prevent
 name truncation
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Buttons (.cal-item-remove, .cal-item-bell) are now position:absolute so
they never participate in flex layout — names get full available width at
all times. Buttons fade in over the right edge of the item on hover with
no layout shift and no row-height change.

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

diff --git a/frontend/css/app.css b/frontend/css/app.css
index 1b021af..8fd5706 100644
--- a/frontend/css/app.css
+++ b/frontend/css/app.css
@@ -598,14 +598,19 @@ 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 — 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; }
+/* Action buttons sit absolutely so they never push the name or shift row height. */
+.cal-item { position: relative; }
+.cal-item-remove,
+.cal-item-bell {
+  position: absolute; top: 50%; transform: translateY(-50%);
+  opacity: 0; pointer-events: none; transition: opacity .12s;
+}
+.cal-item-remove { right: 4px; }
+.cal-item-bell  { right: 28px; }
+.cal-item:hover .cal-item-remove,
+.cal-item:hover .cal-item-bell  { opacity: 1; pointer-events: auto; }
 .cal-item-bell.off { opacity: .55; pointer-events: auto; color: var(--text-3); }
+.cal-item:hover .cal-item-bell.off { opacity: 1; }
 
 /* ── Month View ─────────────────────────────────────────── */
 .month-view { display: flex; flex-direction: column; flex: 1; min-height: 0; }
diff --git a/frontend/js/version.js b/frontend/js/version.js
index 7bfec00..f08175d 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 = 'v56';
+export const APP_VERSION = 'v57';