Scarriffle/Calendarr
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: modal scrollbar clips rounded corners + sidebar hover jump (v56)

Browse Source 
- 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>
This commit is contained in:
Scarriffle
2026-06-15 20:58:44 +02:00
parent 6365f99ac0
commit c1fdfe72d0
2 changed files with 13 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
frontend/css/app.css
View File

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

2
frontend/js/version.js
View File

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