Fix calendar grid view on mobile — events as colored dots
Some checks are pending
NordaBiz Tests / Unit & Integration Tests (push) Waiting to run
NordaBiz Tests / E2E Tests (Playwright) (push) Blocked by required conditions
NordaBiz Tests / Smoke Tests (Production) (push) Blocked by required conditions
NordaBiz Tests / Send Failure Notification (push) Blocked by required conditions

On narrow screens (≤768px), calendar grid events become small colored
dots (8x8px circles) instead of text labels that overflow cells.
Day cells reduced to min-height 60px, day headers to 9px font.
Grid stays 7-column but compact enough for mobile screens.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Maciej Pienczyn 2026-03-25 15:55:42 +01:00
parent 5229433ea8
commit a364dfcf58

View File

@ -397,8 +397,34 @@
}
.day-header {
font-size: var(--font-size-xs);
padding: var(--spacing-xs);
font-size: 9px;
padding: 2px;
letter-spacing: -0.5px;
}
.calendar-day {
min-height: 60px;
padding: 1px;
}
.day-number {
font-size: 11px;
margin-bottom: 1px;
}
.calendar-event {
font-size: 0;
padding: 3px;
margin-bottom: 1px;
white-space: normal;
border-radius: 50%;
width: 8px;
height: 8px;
display: inline-block;
}
.calendar-grid {
table-layout: fixed;
}
.event-card {