Feature: Enable scrolling and remove event display limits

- Removed overflow: hidden and height: 100vh from body to allow scrolling
- Removed MAX_UPCOMING limit - now displays all upcoming events
- Removed "more events" indicator since all events are shown
- Added grid layout to upcoming events section for consistent display
- Both current and upcoming events now use 2-column grid (single column for 1 event)

This allows users to scroll and interact with the page to view all events
without artificial limits, improving usability for TV displays.

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

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

public/index.html

@@ -18,8 +18,8 @@
             font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
             background: #00003d; /* GE Aerospace Deep Navy */
             color: #fff;
-            overflow: hidden;
-            height: 100vh;
+            margin: 0;
+            padding: 0;
         }
 
         .container {
@@ -488,11 +488,6 @@
             const container = document.getElementById('eventsContainer');
             let html = '';
 
-            // Limit display to fit on TV screen without scrolling
-            // Current events: no limit, use grid layout for space efficiency
-            // Upcoming events: limit to 2 to save space
-            const MAX_UPCOMING = 2;
-
             // Current Events - show all in grid layout
             if (data.current && data.current.length > 0) {
                 // Determine badge color based on highest severity
@@ -525,13 +520,16 @@
                 html += '</div>'; // Close section
             }
 
-            // Upcoming Events (limit to MAX_UPCOMING)
+            // Upcoming Events - show all in grid layout
             if (data.upcoming && data.upcoming.length > 0) {
                 html += '<div class="events-section">';
                 html += '<div class="section-title upcoming">UPCOMING (Next 72 Hours)</div>';
 
-                const upcomingToShow = data.upcoming.slice(0, MAX_UPCOMING);
-                upcomingToShow.forEach(event => {
+                // Determine grid class based on number of events
+                const gridClass = data.upcoming.length === 1 ? 'single' : 'multi';
+                html += `<div class="events-grid ${gridClass}">`;
+
+                data.upcoming.forEach(event => {
                     const borderColor = getColorFromType(event.typecolor);
                     html += `
                         <div class="event-card upcoming" style="border-left-color: ${borderColor};">
@@ -547,12 +545,8 @@
                     `;
                 });
 
-                // Show indicator if there are more events
-                if (data.upcoming.length > MAX_UPCOMING) {
-                    html += `<div class="more-events">+ ${data.upcoming.length - MAX_UPCOMING} more upcoming event(s)</div>`;
-                }
-
-                html += '</div>';
+                html += '</div>'; // Close grid
+                html += '</div>'; // Close section
             }
 
             // No events message