From 850885c91100194800bf9d6f8c32ec35643be08e Mon Sep 17 00:00:00 2001
From: cproudlock <cproudlock@localhost>
Date: Fri, 24 Oct 2025 10:14:15 -0400
Subject: [PATCH] Feature: Implement 2-column grid layout for current events
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Removed display limits on current events to show all active notifications
- Implemented responsive 2-column grid layout (single column for 1 event, 2 columns for 2+)
- Added min-height to event-header for consistent spacing with/without ticket badges
- Fixed padding inconsistency between events with and without ticket numbers
- Maintained 2-event limit for upcoming events to preserve screen space
- Scaled proportionally for 4K displays (90px min-height, 24px margin)

This allows the dashboard to display all current events efficiently without
vertical overflow, addressing user feedback about event count limitations.

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

Co-Authored-By: Claude <noreply@anthropic.com>
---
 public/index.html | 50 +++++++++++++++++++++++++++++++++++------------
 1 file changed, 37 insertions(+), 13 deletions(-)

diff --git a/public/index.html b/public/index.html
index 115b087..9ac6929 100644
--- a/public/index.html
+++ b/public/index.html
@@ -123,6 +123,22 @@
             margin-bottom: 20px;
         }
 
+        .events-grid {
+            display: grid;
+            grid-template-columns: repeat(2, 1fr);
+            gap: 15px;
+        }
+
+        /* Single event - full width */
+        .events-grid.single {
+            grid-template-columns: 1fr;
+        }
+
+        /* 3 or more events - use 2 columns */
+        .events-grid.multi {
+            grid-template-columns: repeat(2, 1fr);
+        }
+
         .section-title {
             font-size: 36px;
             font-weight: 800;
@@ -199,6 +215,7 @@
             align-items: center;
             margin-bottom: 12px;
             gap: 20px;
+            min-height: 45px;
         }
 
         .event-title {
@@ -338,12 +355,21 @@
                 padding: 24px 50px;
             }
 
+            .events-grid {
+                gap: 30px;
+            }
+
             .event-card {
                 padding: 60px 80px;
-                margin-bottom: 30px;
+                margin-bottom: 0;
                 border-left: 100px solid;
             }
 
+            .event-header {
+                min-height: 90px;
+                margin-bottom: 24px;
+            }
+
             .event-title {
                 font-size: 64px;
             }
@@ -463,12 +489,11 @@
             let html = '';
 
             // Limit display to fit on TV screen without scrolling
-            // 1080p: 2+2 = 4 events max
-            // 4K: Will scale up automatically via CSS
-            const MAX_CURRENT = 2;
+            // Current events: no limit, use grid layout for space efficiency
+            // Upcoming events: limit to 2 to save space
             const MAX_UPCOMING = 2;
 
-            // Current Events (limit to MAX_CURRENT)
+            // Current Events - show all in grid layout
             if (data.current && data.current.length > 0) {
                 // Determine badge color based on highest severity
                 const severity = getHighestSeverity(data.current);
@@ -476,8 +501,11 @@
                 html += '<div class="events-section">';
                 html += `<div class="section-title current severity-${severity}">CURRENT EVENTS</div>`;
 
-                const currentToShow = data.current.slice(0, MAX_CURRENT);
-                currentToShow.forEach(event => {
+                // Determine grid class based on number of events
+                const gridClass = data.current.length === 1 ? 'single' : 'multi';
+                html += `<div class="events-grid ${gridClass}">`;
+
+                data.current.forEach(event => {
                     const borderColor = getColorFromType(event.typecolor);
                     html += `
                         <div class="event-card current" style="border-left-color: ${borderColor};">
@@ -493,12 +521,8 @@
                     `;
                 });
 
-                // Show indicator if there are more events
-                if (data.current.length > MAX_CURRENT) {
-                    html += `<div class="more-events">+ ${data.current.length - MAX_CURRENT} more current event(s)</div>`;
-                }
-
-                html += '</div>';
+                html += '</div>'; // Close grid
+                html += '</div>'; // Close section
             }
 
             // Upcoming Events (limit to MAX_UPCOMING)