Seemingly extraneous min-height CSS rule causes excessive whitespace on mobile.

In your frontend/v2/dist/css/style.css stylesheet, this rule is present:

.calc-container.vertical .calc-list {
	min-height: 500px;
	width: 100%;
}

I don’t know what the min-height is supposed to do (or if it’s even intentional), but it causes a bunch of extra whitespace at certain viewports for calculators with sections shorter than 500px.

From my testing, simply removing the min-height makes everything work as expected. Could this fix be included in a future update?

This appears to be a new issue introduced in 3.0, but I’m not entirely certain.

In case anyone else is running into this issue, here’s a CSS workaround you can use for now to fix the issue:

/**
 * Fix Cost Calculator styles causing large gap between bottom of calculator and next item due to seemingly pointless min-height rule.
 */
.calc-container.vertical .calc-list {
	min-height: unset !important;
}