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
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:
parent
5229433ea8
commit
a364dfcf58
@ -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 {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user