From 786d890372aeff91d06829e95ff7cd74753ccfdb Mon Sep 17 00:00:00 2001
From: Lucas 'Paperboy' Rose-Winters <lucas@sanguinehost.com>
Date: Mon, 3 Nov 2025 18:30:23 +1100
Subject: [PATCH] fix(dashboard): make Recent Events widget fill allocated grid
 space
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Fixed CSS flexbox issue where Recent Events widget only used ~20-30% of its
allocated 2×2 grid space. Content was cramped at bottom with large empty space above.

**Root Cause:**
- `.rpg-events-widget` missing height and flex properties
- `.rpg-notebook-lines` (event container) not expanding to fill available space
- Widget only expanded to fit content, not allocated grid cell

**Changes (style.css):**

1. `.rpg-events-widget` (lines 2516-2517):
   - Added `height: 100%` to fill parent container
   - Added `flex: 1` to participate in flex layout properly

2. `.rpg-notebook-lines` (lines 2588-2589):
   - Added `flex: 1` to expand and fill remaining vertical space
   - Added `min-height: 0` to prevent flex item overflow

**Result:**
- Widget now properly fills full 2×2 grid allocation
- Events have proper breathing room and spacing
- Notebook aesthetic preserved with better proportions
- Works correctly at any size (2×1, 2×2, 3×3, etc.)

**Before:** ~134px content in ~300-400px space = 30-40% utilization
**After:** Content fills full allocated space with proper distribution
---
 style.css | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/style.css b/style.css
index 397741f..55a0b64 100644
--- a/style.css
+++ b/style.css
@@ -2513,6 +2513,8 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
     min-height: 0;
     overflow: visible;
     position: relative;
+    height: 100%;  /* Fill parent container */
+    flex: 1;       /* Participate in flex layout */
 }
 
 /* Notebook paper lines effect */
@@ -2583,6 +2585,8 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
     padding: 0.25em 0.75em 0.5em 0.75em;
     position: relative;
     z-index: 1;
+    flex: 1;         /* Expand to fill remaining vertical space */
+    min-height: 0;   /* Prevent flex overflow */
 }
 
 .rpg-notebook-line {