fix(unity-bootstrap-theme): changed height to min-height on hero-overlay classes

[juanmitriatti]

Changed height to min-height on hero-overlay classes

Test steps :
For some reason, the provided extension twhich allows us to zoom in and out, doesn’t work in Storybook, making it difficult to test this PR.

Additionally, manually zooming in or out isn’t a viable solution since it affects the entire page, whereas the extension is designed to zoom only the text we’re working on. In other words, the extension adjusts the font size.

In conclusion, I believe the best way to test it is by integrating it into an instance in WS2.

URL to test it :
https://unity-uds-staging.s3.us-west-2.amazonaws.com/pr-1466/@asu/unity-bootstrap-theme/iframe.html?id=molecules-heroes-examples--hero-large-with-buttons&viewMode=story

UDS-1765

Description

Links

• JIRA ticket
• Unity reference site
• Unity Design Kit

[asu-jenkins-devops]

Storybook deployed at https://unity-uds-staging.s3.us-west-2.amazonaws.com/pr-1466/index.html

[scott-williams-az]

Updating height to min-height will not have any effect because .hero-overlay has an absolute position is only an empty div used as an overlay. .hero-overlay does not contain any text that it can respond to as the font size changes.

I think you might need to adjust elements that wrap the h1 or header

[juanmitriatti]

Hi @scott-williams-az

Good afternoon! I hope you're doing excellent.
I reviewed the PR feedback, and it appears to be working as expected based on the ticket requirements.

After opening the link and increasing the size to 200%, the text remains inside the box, as shown in the screenshot below:
PR URL : https://unity-uds-staging.s3.us-west-2.amazonaws.com/pr-1466/@asu/unity-bootstrap-theme/iframe.html?args=&id=molecules-heroes-examples--hero-large-with-buttons&viewMode=story

Besides that, I provided another PR URL where the code from this PR hasn't been included. You'll see that it's still broken there.
PR URL : https://asu.github.io/asu-unity-stack/@asu/unity-bootstrap-theme/iframe.html?args=&id=molecules-heroes-examples--hero-large-with-buttons&viewMode=story

In that case, I would appreciate some guidance on the next steps, as the code appears to be working based on my understanding.
Thanks in advance.

[juanmitriatti]

Hi @scott-williams-az
Good morning. I've incorporated your feedback from last week regarding the PR for the small and medium heroes. Could you please take a look at it now? Thank you.
CC @mlsamuelson

[davidornelas11]

I think this is good but I am going to test on webspark to be sure this doesn't create any major changes for heroes since the change from a set height to a min height may make some too large

[davidornelas11]

Screen.Recording.2025-04-16.at.2.29.53.PM.mov

Looks good and doesn't cut off anymore!

Changed made