Remove global display block to img

[rezrah]

Summary

Towards #1426

Our long-standing global reset for img and picture is now causing downstream issues in Dotcom. While this is a downstream issue, the reality is that style shouldn't be applied through a reset, but instead through each component.

This is likely to break things downstream of us, as users may be unknowingly relying on this rule. Marked this change as a minor (breaking change)

Also cleans up smooth scrolling rules, fixing a bug where auto wasn't applying correctly for users with smooth scroll.

List of notable changes:

• removes the global display: block to img and picture elements.
• adds display: block to component img and picture elements

What should reviewers focus on?

Steps to test:

1. Check images in our stories still apply display block

Contributor checklist:

• All new and existing CI checks pass
• Tests prove that the feature works and covers both happy and unhappy paths
• Any drop in coverage, breaking changes or regressions have been documented above
• UI Changes contain new visual snapshots (generated by adding update snapshots label to the PR)
• All developer debugging and non-functional logging has been removed
• Related issues have been referenced in the PR description

Reviewer checklist:

• Check that pull request and proposed changes adhere to our contribution guidelines and code of conduct
• Check that tests prove the feature works and covers both happy and unhappy paths
• Check that there aren't other open Pull Requests for the same update/change

Screenshots:

N/A

[changeset-bot]

🦋 Changeset detected

Latest commit: 9ebd1ee

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 9 packages

Name	Type
@primer/react-brand	Minor
@primer/brand-docs	Minor
@primer/brand-css	Minor
@primer/brand-primitives	Minor
@primer/brand-e2e	Minor
@primer/brand-fonts	Minor
@primer/brand-mcp	Minor
@primer/brand-config	Minor
@primer/brand-storybook	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[github-actions]

🟢 No design token changes found

[rezrah]

The main change ☝️

[github-actions]

🟢 Unit test coverage changes found

Unit test coverage has been updated through this PR.

Changes: 0 new tests, 0 removed tests, 1 improved, 0 decreased

Component/Hook	Statements	Functions	Branches	Change
PricingOptions	99.2%	97.1%	93.7% 95.1%	+1.4%

[github-actions]

🟢 Bundle size report

Check	Main	Branch	Change
UMD — full bundle (JS)	101.73 kB	101.76 kB	⬆️ +25 B (+0.0%)
UMD — full bundle (CSS)	67.49 kB	67.55 kB	⬆️ +57 B (+0.1%)
ESM — full bundle (JS + CSS)	1.59 MB	1.59 MB	⬆️ +869 B (+0.1%)
ESM — tree-shaken simple (Button)	70.71 kB	70.78 kB	⬆️ +74 B (+0.1%)
ESM — tree-shaken complex (ActionMenu)	79.67 kB	79.74 kB	⬆️ +74 B (+0.1%)

[Copilot]

Pull request overview

Removes the global display: block reset on img/picture in @primer/react-brand to prevent unintended downstream overrides (notably in GitHub README rendering), and reintroduces display: block where needed within specific components.

Changes:

• Removed display: block from the shared reset.css img, picture rule.
• Added component-scoped display: block rules for images/pictures across several React Brand components.
• Added a changeset documenting the breaking/minor release impact.

Show a summary per file

File	Description
packages/react/src/css/reset.css	Removes global display: block from img, picture while keeping max-width: 100%.
packages/react/src/Avatar/Avatar.module.css	Ensures avatar <img> renders as display: block at the component level.
packages/react/src/EyebrowBanner/EyebrowBanner.module.css	Sets display: block for leading visual img/picture to preserve layout.
packages/react/src/LogoSuite/LogoSuite.module.css	Forces img inside the logobar to be block-level to avoid inline baseline gaps.
packages/react/src/MinimalFooter/MinimalFooter.module.css	Makes social icon element block-level to preserve sizing/layout after reset change.
packages/react/src/river/river-shared.module.css	Applies display: block to img/picture within .River__visual to keep media layout consistent.
packages/react/src/river/RiverStoryScroll/RiverStoryScroll.module.css	Makes RiverStoryScroll media block-level for consistent centering/layout.
packages/react/src/Testimonial/Testimonial.module.css	Adds a new .Testimonial-logo-image { display: block; } rule for testimonial logo images.
packages/react/src/Testimonial/Testimonial.module.css.d.ts	Updates generated CSS module typings for the new testimonial logo image class.
.changeset/fresh-images-flow.md	Documents the breaking/minor change and migration guidance for consumers.

Review details

• Files reviewed: 10/11 changed files
• Comments generated: 2
• Review effort level: Low

[github-actions]

🟢 No visual differences found

Our visual comparison tests did not find any differences in the UI.

[danielguillan]

Looks good. I believe the main scenarios are covered.

We may still need to apply the rule to some component slots intended to support media, such as BreakoutBanner.leadingVisual or the leading and trailing escape hatches for Statistic.