1# Event Panel Height Customization
2
3The `{{eventpanel}}` tag now supports custom height values, allowing you to control how much vertical space the event list takes before it starts scrolling.
4
5## Syntax
6
7```
8{{eventpanel height=VALUE}}
9```
10
11## Supported Units
12
13You can use any standard CSS unit:
14
15- **Pixels:** `300px`, `500px`, `800px`
16- **Viewport Height:** `50vh`, `75vh`, `90vh`
17- **Em/Rem:** `20em`, `30rem`
18- **Percentage:** `50%`, `100%`
19
20## Examples
21
22### Small Panel (300px)
23```
24{{eventpanel height=300px}}
25```
26Good for sidebars or compact displays.
27
28### Medium Panel (500px)
29```
30{{eventpanel height=500px}}
31```
32Balanced size for most use cases.
33
34### Large Panel (800px)
35```
36{{eventpanel height=800px}}
37```
38Shows many events before scrolling.
39
40### Viewport-Based (50vh)
41```
42{{eventpanel height=50vh}}
43```
44Takes 50% of viewport height (responsive to screen size).
45
46### With Namespace
47```
48{{eventpanel height=400px namespace=team:projects}}
49```
50
51## Default Behavior
52
53If no height is specified, the default is **400px**:
54```
55{{eventpanel}}
56```
57Same as:
58```
59{{eventpanel height=400px}}
60```
61
62## How It Works
63
64The height parameter controls the **maximum height** of the scrollable event list area. The header and "Add Event" button remain fixed at the top, while the event list scrolls when content exceeds the specified height.
65
66### Visual Structure:
67```
68┌─────────────────────────────┐
69│  ‹  January 2026 Events  › │ ← Fixed header
70├─────────────────────────────┤
71│      [+ Add Event]          │ ← Fixed button
72├─────────────────────────────┤
73│  Event 1                    │ ↕
74│  Event 2                    │ ↕ Scrollable area
75│  Event 3                    │ ↕ (height=VALUE)
76│  Event 4                    │ ↕
77│  ...                        │ ↕
78└─────────────────────────────┘
79```
80
81## Validation
82
83The height value is validated to ensure it's a valid CSS unit:
84- Must include a number
85- Must include a unit (px, em, rem, vh, %)
86- Invalid values fall back to 400px
87
88**Valid:**
89- `300px` ✓
90- `50vh` ✓
91- `25em` ✓
92- `100%` ✓
93
94**Invalid:**
95- `300` ✗ (no unit)
96- `large` ✗ (not a number)
97- `300px 500px` ✗ (multiple values)
98
99## Use Cases
100
101### Sidebar Event Panel
102```
103{{eventpanel height=600px namespace=team}}
104```
105Perfect for a sidebar showing team events.
106
107### Dashboard Widget
108```
109{{eventpanel height=300px}}
110```
111Compact widget for a dashboard overview.
112
113### Full-Page Event List
114```
115{{eventpanel height=90vh}}
116```
117Uses most of the screen for maximum events visible.
118
119### Mobile-Friendly
120```
121{{eventpanel height=50vh}}
122```
123Adapts to different screen sizes automatically.
124
125## Tips
126
1271. **Use vh for responsive designs:** `height=60vh` adapts to screen size
1282. **Use px for fixed layouts:** `height=400px` stays consistent
1293. **Consider content:** Shorter heights for fewer events, taller for more
1304. **Test on mobile:** Make sure the panel is usable on small screens
131
132## Responsive Behavior
133
134The event panel is fully responsive and works with custom heights:
135- **Desktop:** Full height as specified
136- **Tablet:** Adjusts based on available space
137- **Mobile:** May override very large heights for usability
138
139---
140
141**Version:** 3.2
142**Feature:** Customizable Event Panel Height
143**Last Updated:** January 24, 2026
144