fix(dashboard): make Recent Events widget fill allocated grid space

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
This commit is contained in:
Lucas 'Paperboy' Rose-Winters
2025-11-03 18:30:23 +11:00
parent 5572d03762
commit 786d890372
+4
View File
@@ -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 {