Implement dynamic 15-minute time grid density and remove final boundary

- Scale time grid height dynamically based on time increment (1530px/2970px)
- Add quarter-mode CSS classes for 15-minute blocks (30px each, same as 30-min blocks)
- Update pixel-to-time conversion functions with 2px:1min scaling in 15-min mode
- Generate correct number of time slots (4 per hour in 15-min mode)
- Remove unnecessary final boundary time label and related CSS
- Fix CSS grid layout by removing malformed CSS syntax
- All time-related containers scale properly between 30-minute and 15-minute modes

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

Co-Authored-By: Claude <noreply@anthropic.com>

frontend/styles.css

@@ -733,7 +733,11 @@ body {
 .time-grid {
     display: grid;
     grid-template-columns: 80px 1fr;
-    min-height: 1530px;
+    min-height: 1530px; /* 30-minute mode */
+}
+
+.time-grid.quarter-mode {
+    min-height: 2970px; /* 15-minute mode */
 }
 
 /* Time Labels */
@@ -743,9 +747,15 @@ body {
     position: sticky;
     left: 0;
     z-index: 5;
-    min-height: 1440px; /* Match the time slots height */
+    min-height: 1530px; /* 30-minute mode */
 }
 
+/* Scale time labels container for 15-minute mode */
+.time-labels.quarter-mode {
+    min-height: 2970px; /* 15-minute mode */
+}
+
+/* Default time label height for 30-minute mode */
 .time-label {
     height: 60px;
     display: flex;
@@ -758,24 +768,31 @@ body {
     font-weight: 500;
 }
 
-.time-label.final-boundary {
-    height: 60px; /* Keep same height but this marks the end boundary */
-    border-bottom: 2px solid #e9ecef; /* Stronger border to show day end */
-    color: #999; /* Lighter color to indicate it's the boundary */
-    font-size: 0.7rem;
+/* Time label height for 15-minute mode - double height */
+.time-label.quarter-mode {
+    height: 120px;
 }
 
+
 /* Week Days Grid */
 .week-days-grid {
     display: grid;
     grid-template-columns: repeat(7, 1fr);
-    min-height: 1440px; /* Ensure grid is tall enough for 24 time slots */
+    min-height: 1530px; /* 30-minute mode */
+}
+
+.week-days-grid.quarter-mode {
+    min-height: 2970px; /* 15-minute mode */
 }
 
 .week-day-column {
     position: relative;
     border-right: 1px solid var(--time-label-border, #e9ecef);
-    min-height: 1440px; /* 24 time slots × 60px = 1440px total */
+    min-height: 1530px; /* 30-minute mode */
+}
+
+.week-day-column.quarter-mode {
+    min-height: 2970px; /* 15-minute mode */
 }
 
 .week-day-column:last-child {
@@ -788,12 +805,16 @@ body {
 
 /* Time Slots */
 .time-slot {
-    height: 60px;
+    height: 60px; /* 30-minute mode: 2 slots × 30px = 60px */
     border-bottom: 1px solid var(--calendar-border, #f0f0f0);
     position: relative;
     pointer-events: none; /* Don't capture mouse events */
 }
 
+.time-slot.quarter-mode {
+    height: 120px; /* 15-minute mode: 4 slots × 30px = 120px */
+}
+
 .time-slot-half {
     height: 30px;
     border-bottom: 1px dotted var(--calendar-border, #f5f5f5);
@@ -804,13 +825,17 @@ body {
     border-bottom: none;
 }
 
-.time-slot.boundary-slot {
-    height: 60px; /* Match the final time label height */
-    border-bottom: 2px solid #e9ecef; /* Strong border to match final boundary */
-    background: rgba(0,0,0,0.02); /* Slightly different background to indicate boundary */
+.time-slot-quarter {
+    height: 30px;
+    border-bottom: 1px dotted var(--calendar-border-light, #f8f8f8);
     pointer-events: none; /* Don't capture mouse events */
 }
 
+.time-slot-quarter:last-child {
+    border-bottom: none;
+}
+
+
 /* Events Container */
 .events-container {
     position: absolute;