Setting a min-height is a smart way to:
Prevent layout collapse when content is limited (e.g., only one performance listed).
Maintain a visually consistent space, even when the widget doesn't fully populate.
Improve responsiveness across screen sizes by letting the widget grow as needed—but never shrink too small.
🎓 Recap
The min-height CSS property defines the minimum vertical space an element can occupy, regardless of its content. On The Stage’s widget uses a default of 80vh (80% of the viewport height) to ensure the full calendar or list is always visible. If this feels too tall—such as when only one performance is listed—you can override it in your custom CSS for better visual balance.
🛠️ Sample CSS Snippet
cssCopyEdit.ots-widget-min-height { min-height: var(--onstage-widget-min-height, 20vh); }This sets a custom minimum height of 20vh, but still respects any higher value passed in via --onstage-widget-min-height.
🔗 Learn More
Want to dig deeper? Read the official W3Schools guide on min-height.