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.