openclaw/oikos
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
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
1 changed files with 36 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/styles/calendar.css
+36 -5
View File
@@ -47,6 +47,10 @@
gap: var(--space-1); gap: var(--space-1);
} }
.cal-toolbar__nav .btn {
color: var(--color-text-secondary);
}
.cal-toolbar__label { .cal-toolbar__label {
font-size: var(--text-base); font-size: var(--text-base);
font-weight: var(--font-weight-semibold); font-weight: var(--font-weight-semibold);
@@ -217,6 +221,7 @@
cursor: pointer; cursor: pointer;
color: var(--color-text-on-accent); color: var(--color-text-on-accent);
line-height: 1.6; line-height: 1.6;
filter: saturate(0.4);
} }
.month-day__more { .month-day__more {
@@ -367,11 +372,12 @@
cursor: pointer; cursor: pointer;
z-index: 1; z-index: 1;
line-height: 1.4; line-height: 1.4;
filter: saturate(0.4);
transition: filter var(--transition-fast); transition: filter var(--transition-fast);
} }
.week-event:hover { .week-event:hover {
filter: brightness(0.9); filter: saturate(0.4) brightness(0.9);
} }
.week-event__title { .week-event__title {
@@ -474,7 +480,7 @@
.agenda-event { .agenda-event {
display: flex; display: flex;
align-items: flex-start; align-items: stretch;
gap: var(--space-3); gap: var(--space-3);
padding: var(--space-2) var(--space-3); padding: var(--space-2) var(--space-3);
border-radius: var(--radius-sm); border-radius: var(--radius-sm);
@@ -488,11 +494,10 @@
} }
.agenda-event__color { .agenda-event__color {
width: 10px; width: 3px;
height: 10px;
border-radius: var(--radius-full); border-radius: var(--radius-full);
flex-shrink: 0; flex-shrink: 0;
margin-top: var(--space-1); filter: saturate(0.4);
} }
.agenda-event__body { .agenda-event__body {
@@ -599,6 +604,7 @@
height: 4px; height: 4px;
border-radius: var(--radius-full); border-radius: var(--radius-full);
margin-bottom: var(--space-3); margin-bottom: var(--space-3);
filter: saturate(0.4);
} }
.event-popup__title { .event-popup__title {
@@ -636,6 +642,8 @@
.allday-cell { .allday-cell {
border-left: 1px solid var(--color-border-subtle); border-left: 1px solid var(--color-border-subtle);
padding: 2px; padding: 2px;
min-width: 0;
overflow: hidden;
} }
.allday-event { .allday-event {
@@ -649,4 +657,27 @@
text-overflow: ellipsis; text-overflow: ellipsis;
margin-bottom: var(--space-0h); margin-bottom: var(--space-0h);
cursor: pointer; 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);
} }