Implement fixed-height month view rows with event overflow handling

- Change calendar grid to use equal row heights instead of min-height on cells
- Add "+n more" indicator for days with too many events to display
- Limit visible events to fit available space (default 3 events per day)
- Add window resize handler to recalculate event limits dynamically
- Remove gaps between calendar rows for cleaner appearance

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Connor Johnstone
2025-08-29 12:27:24 -04:00
parent edd209238f
commit e23278d71e
2 changed files with 96 additions and 6 deletions

View File

@@ -484,8 +484,10 @@ body {
.calendar-grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
grid-template-rows: auto repeat(6, 1fr);
flex: 1;
background: white;
gap: 0;
}
/* Week View Container */
@@ -743,12 +745,12 @@ body {
.calendar-day {
border: 1px solid #f0f0f0;
padding: 0.75rem;
min-height: 100px;
display: flex;
flex-direction: column;
cursor: pointer;
transition: background-color 0.2s;
position: relative;
overflow: hidden;
}
.calendar-day:hover {
@@ -808,6 +810,14 @@ body {
color: #1976d2;
}
.day-events {
flex: 1;
display: flex;
flex-direction: column;
gap: 2px;
overflow: hidden;
}
.event-indicators {
flex: 1;
display: flex;
@@ -815,6 +825,22 @@ body {
gap: 2px;
}
.more-events-indicator {
font-size: 0.7rem;
color: #666;
font-weight: 500;
padding: 2px 4px;
text-align: center;
background: #f5f5f5;
border-radius: 3px;
cursor: pointer;
transition: background-color 0.2s;
}
.more-events-indicator:hover {
background: #e0e0e0;
}
.event-box {
/* Background color will be set inline via style attribute */
color: white;