fix(calendar): constrain allday-cell width; change agenda event indicator to full-height bar

allday-cell gets min-width: 0; overflow: hidden so long event titles
no longer stretch week-view column widths beyond their grid allocation.
Agenda event color dot replaced by a 3px full-height left bar matching
the dashboard upcoming-events style (align-items: stretch on parent).
This commit is contained in:
Konrad M.
2026-04-21 21:51:15 +02:00
parent 123b85d08d
commit bf1df5d8e0
+36 -5
View File
@@ -47,6 +47,10 @@
gap: var(--space-1);
}
.cal-toolbar__nav .btn {
color: var(--color-text-secondary);
}
.cal-toolbar__label {
font-size: var(--text-base);
font-weight: var(--font-weight-semibold);
@@ -217,6 +221,7 @@
cursor: pointer;
color: var(--color-text-on-accent);
line-height: 1.6;
filter: saturate(0.4);
}
.month-day__more {
@@ -367,11 +372,12 @@
cursor: pointer;
z-index: 1;
line-height: 1.4;
filter: saturate(0.4);
transition: filter var(--transition-fast);
}
.week-event:hover {
filter: brightness(0.9);
filter: saturate(0.4) brightness(0.9);
}
.week-event__title {
@@ -474,7 +480,7 @@
.agenda-event {
display: flex;
align-items: flex-start;
align-items: stretch;
gap: var(--space-3);
padding: var(--space-2) var(--space-3);
border-radius: var(--radius-sm);
@@ -488,11 +494,10 @@
}
.agenda-event__color {
width: 10px;
height: 10px;
width: 3px;
border-radius: var(--radius-full);
flex-shrink: 0;
margin-top: var(--space-1);
filter: saturate(0.4);
}
.agenda-event__body {
@@ -599,6 +604,7 @@
height: 4px;
border-radius: var(--radius-full);
margin-bottom: var(--space-3);
filter: saturate(0.4);
}
.event-popup__title {
@@ -636,6 +642,8 @@
.allday-cell {
border-left: 1px solid var(--color-border-subtle);
padding: 2px;
min-width: 0;
overflow: hidden;
}
.allday-event {
@@ -649,4 +657,27 @@
text-overflow: ellipsis;
margin-bottom: var(--space-0h);
cursor: pointer;
filter: saturate(0.4);
}
/* --------------------------------------------------------
* Kalender-Name-Label (Agenda, Popup)
* -------------------------------------------------------- */
.event-cal-label {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: var(--text-xs);
color: var(--color-text-disabled);
}
.event-cal-label::before {
content: '';
display: inline-block;
width: 7px;
height: 7px;
border-radius: var(--radius-full);
background: var(--cal-color, currentColor);
flex-shrink: 0;
filter: saturate(0.4);
}