Skip to content

Comments

fix(unity-bootstrap-theme): improve hero small button positioning#1625

Open
juanmitriatti wants to merge 2 commits intodevfrom
UDS-2124
Open

fix(unity-bootstrap-theme): improve hero small button positioning#1625
juanmitriatti wants to merge 2 commits intodevfrom
UDS-2124

Conversation

@juanmitriatti
Copy link
Contributor

@juanmitriatti juanmitriatti commented Feb 5, 2026

Description

Problem:
The uds-hero-sm component uses absolute positioning for buttons, which causes overlap issues with
header content when text is long or on small screens. The fixed top: 14.5rem value doesn't adapt
to different content sizes.
This issue is reported at : https://asudev.jira.com/browse/WS2-2385
Solution:

  • Changed button positioning from position: absolute to position: relative
  • Updated grid layout from grid-template-rows: 1fr auto auto $uds-size-spacing-7 to
    grid-template-rows: 0px 1fr 0px auto
  • Set buttons to use grid-row: 4 for proper grid placement
  • Added margin-top: 1rem to .has-btn-row .btn-row for better spacing
  • Buttons now flow naturally within the grid instead of using fixed positioning

Testing Steps:

  1. Build the package: cd packages/unity-bootstrap-theme && yarn build
  2. Start Storybook: yarn storybook
  3. Navigate to "Molecules/Heroes/Examples" → "Hero Small With Buttons"
  4. Verify buttons are positioned correctly without overlapping content (Also, try zooming in until 200%)
  5. Test with long headings (2-3 lines) to ensure no overlap occurs
  6. Test responsive behavior on mobile, tablet, and desktop viewports
  7. Verify both single button and button row scenarios work correctly

Checklist

  • Tests pass for relevant code changes

Important Reminders

Links

@juanmitriatti juanmitriatti requested a review from a team as a code owner February 5, 2026 15:22
@asu-jenkins-devops
Copy link
Collaborator

Copy link
Contributor

@davidornelas11 davidornelas11 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks like there are some styling issues with the changes and the header

Image

- Change grid-template-rows from '0px 1fr 0px auto' to '0px 1fr auto auto'
- Improves content spacing in hero small component
@juanmitriatti
Copy link
Contributor Author

Looks like there are some styling issues with the changes and the header

Image

This is ready to review again. Thanks @davidornelas11

@davidornelas11
Copy link
Contributor

Looks like there are some styling issues with the changes and the header
Image

This is ready to review again. Thanks @davidornelas11

Nice! Im gonna test it in webspark just to double check

Copy link
Contributor

@davidornelas11 davidornelas11 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good in storybook now!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants