Update Tiles small viewport density

[danielguillan]

Summary

Resolves https://github.com/orgs/github/projects/23995/views/5?pane=issue&itemId=209289621

Updates compact Tiles density so mobile shows four items per row with smaller icons, while tablet shows six items per row.

List of notable changes:

• updated compact Tiles layout density for mobile and tablet viewports.
• updated compact Tiles icon sizing for mobile only.

What should reviewers focus on?

• Verify compact Tiles show four items per row on mobile and six on tablet.
• Verify compact icons are 28px on mobile and 32px at tablet and above.

Steps to test:

1. Open the Compact Layout story in Storybook.
2. Check mobile viewport sizing.
3. Check tablet viewport sizing.

Supporting resources (related issues, external links, etc):

• https://github.com/orgs/github/projects/23995/views/5?pane=issue&itemId=209289621

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:

Please try to provide before and after screenshots or videos

Before	After
Mobile Tablet	Mobile Tablet

[changeset-bot]

🦋 Changeset detected

Latest commit: 8aa0f4a

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	Patch
@primer/brand-docs	Patch
@primer/brand-css	Patch
@primer/brand-primitives	Patch
@primer/brand-e2e	Patch
@primer/brand-fonts	Patch
@primer/brand-mcp	Patch
@primer/brand-config	Patch
@primer/brand-storybook	Patch

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

[Copilot]

Pull request overview

Updates the Tiles component’s compact layout to increase information density on smaller viewports by adjusting the column count and icon sizing, and records the change via a changeset for release.

Changes:

• Set compact Tiles to use 4 columns by default (small viewports), scaling to 6 columns at ≥48rem (and keeping 8 columns at ≥63.25rem).
• Reduce compact tile media (SVG/IMG) height on small viewports to --base-size-28, restoring --base-size-32 at ≥48rem.
• Add a patch changeset describing the behavior change for @primer/react-brand.

Show a summary per file

File	Description
packages/react/src/Tiles/Tiles.module.css	Adjusts compact layout column density and icon sizing across breakpoints.
.changeset/fresh-tiles-sparkle.md	Adds a patch changeset documenting the compact density update.

Review details

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

[github-actions]

🟢 Bundle size report

Check	Main	Branch	Change
UMD — full bundle (JS)	101.33 kB	101.33 kB	🟢 No change
UMD — full bundle (CSS)	66.82 kB	66.86 kB	⬆️ +38 B (+0.1%)
ESM — full bundle (JS + CSS)	1.51 MB	1.51 MB	✅ -69 B (-0.0%)
ESM — tree-shaken simple (Button)	69.70 kB	69.59 kB	✅ -111 B (-0.2%)
ESM — tree-shaken complex (ActionMenu)	78.48 kB	78.37 kB	✅ -111 B (-0.1%)

[github-actions]

🟢 No unit test coverage changes found

All components and hooks with tests maintain the same coverage as the main branch.

[github-actions]

🟢 No visual differences found

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

[rezrah]

🚀