Skip to content

Prevent banner vertical scrollbar by removing height constraint and adding proper margin#15605

Merged
juabara merged 2 commits intomainfrom
fix/jm-banner-scroll-bug
Mar 27, 2026
Merged

Prevent banner vertical scrollbar by removing height constraint and adding proper margin#15605
juabara merged 2 commits intomainfrom
fix/jm-banner-scroll-bug

Conversation

@juabara
Copy link
Copy Markdown
Contributor

@juabara juabara commented Mar 27, 2026

This commit fixes a vertical scrollbar issue in banner components caused by large images exceeding the container height.

Problem solved:

  • Large banner images were causing vertical scrollbars to appear
  • The height: 100% constraint at tablet breakpoint was forcing content to overflow

Changes made:

  • Removed height: 100% constraint from tablet breakpoint to allow natural content height
  • Added margin: ${space[6]}px 0 at desktop breakpoint for proper vertical spacing
  • Applied changes consistently across all banner components:
    • DesignableBanner component
    • v2/Banner component
    • v2/BannerVisual component

This ensures banner visuals display properly without causing unwanted vertical scrollbars when images are larger than the container.

…ner components

Remove inconsistent margin and padding values, implement consistent flexbox centering, and consolidate tablet breakpoint styles. Apply identical styling to DesignableBanner, v2/Banner, and v2/BannerVisual components for visual consistency.
@juabara juabara requested a review from a team as a code owner March 27, 2026 11:41
@juabara juabara added run_chromatic Runs chromatic when label is applied maintenance Departmental tracking: maintenance work, not a fix or a feature labels Mar 27, 2026
@github-actions
Copy link
Copy Markdown

github-actions bot commented Mar 27, 2026

@github-actions github-actions bot removed the run_chromatic Runs chromatic when label is applied label Mar 27, 2026
…l containers at desktop breakpoint

Remove `height: 100%` from tablet breakpoint and add `margin: ${space[6]}px 0` at desktop breakpoint for visual container styling. Apply changes consistently across DesignableBanner, v2/Banner, and v2/BannerVisual components.
@juabara juabara changed the title Standardize banner visual container styles across designable banner components Remove height constraint and add vertical margin to banner visual containers at desktop breakpoint Mar 27, 2026
@juabara juabara changed the title Remove height constraint and add vertical margin to banner visual containers at desktop breakpoint Prevent banner vertical scrollbar by removing height constraint and adding proper margin Mar 27, 2026
@juabara juabara added the run_chromatic Runs chromatic when label is applied label Mar 27, 2026
@github-actions github-actions bot removed the run_chromatic Runs chromatic when label is applied label Mar 27, 2026
@juabara juabara merged commit 354f127 into main Mar 27, 2026
31 checks passed
@juabara juabara deleted the fix/jm-banner-scroll-bug branch March 27, 2026 13:16
@gu-prout
Copy link
Copy Markdown

gu-prout bot commented Mar 27, 2026

Seen on PROD (merged by @juabara 6 minutes and 48 seconds ago) Please check your changes!

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

Labels

maintenance Departmental tracking: maintenance work, not a fix or a feature Seen-on-PROD

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants