From c3e64ef1e7b780dfc6a6cecabf9ca3c1f4914a3f Mon Sep 17 00:00:00 2001 From: Daniel Guillan Date: Tue, 7 Jul 2026 10:52:33 +0200 Subject: [PATCH 1/4] Update compact Tiles density --- packages/react/src/Tiles/Tiles.module.css | 15 +++++++++++++-- 1 file changed, 13 insertions(+), 2 deletions(-) diff --git a/packages/react/src/Tiles/Tiles.module.css b/packages/react/src/Tiles/Tiles.module.css index d7b084d72..cdbfc0497 100644 --- a/packages/react/src/Tiles/Tiles.module.css +++ b/packages/react/src/Tiles/Tiles.module.css @@ -13,6 +13,10 @@ padding: 0; } +.Tiles--layout-compact .Tiles-grid { + --tiles-columns: 4; +} + @media screen and (min-width: 48rem) { .Tiles--layout-default .Tiles-grid { --tiles-columns: 4; @@ -33,7 +37,7 @@ @media screen and (min-width: 48rem) { .Tiles--layout-compact .Tiles-grid { - --tiles-columns: 4; + --tiles-columns: 6; } } @@ -137,7 +141,14 @@ .Tiles--layout-compact .Tiles-item-media svg, .Tiles--layout-compact .Tiles-item-media img { - height: var(--base-size-32); + height: var(--base-size-28); +} + +@media screen and (min-width: 48rem) { + .Tiles--layout-compact .Tiles-item-media svg, + .Tiles--layout-compact .Tiles-item-media img { + height: var(--base-size-32); + } } .Tiles-item-label { From e64ab5c0bfb2b1d4432c008485ed2261e9266dcb Mon Sep 17 00:00:00 2001 From: Daniel Guillan Date: Tue, 7 Jul 2026 10:53:45 +0200 Subject: [PATCH 2/4] Add changeset --- .changeset/fresh-tiles-sparkle.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/fresh-tiles-sparkle.md diff --git a/.changeset/fresh-tiles-sparkle.md b/.changeset/fresh-tiles-sparkle.md new file mode 100644 index 000000000..c292facbf --- /dev/null +++ b/.changeset/fresh-tiles-sparkle.md @@ -0,0 +1,5 @@ +--- +'@primer/react-brand': patch +--- + +Updates compact Tiles density so mobile shows four items per row with smaller icons, while tablet shows six items per row. From 7f12aa925a6266b8b8f1eb0f1494521e549b5e3c Mon Sep 17 00:00:00 2001 From: Daniel Guillan Date: Tue, 7 Jul 2026 11:20:53 +0200 Subject: [PATCH 3/4] Update changeset --- .changeset/fresh-tiles-sparkle.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/fresh-tiles-sparkle.md b/.changeset/fresh-tiles-sparkle.md index c292facbf..c3818e7d7 100644 --- a/.changeset/fresh-tiles-sparkle.md +++ b/.changeset/fresh-tiles-sparkle.md @@ -2,4 +2,4 @@ '@primer/react-brand': patch --- -Updates compact Tiles density so mobile shows four items per row with smaller icons, while tablet shows six items per row. +Updates compact `Tiles` density so mobile shows four items per row with smaller icons, while tablet shows six items per row. From 8aa0f4abdd5c886188cb9cbe68c2dcf831e1cd4d Mon Sep 17 00:00:00 2001 From: Daniel Guillan Date: Thu, 9 Jul 2026 11:04:36 +0200 Subject: [PATCH 4/4] Update .changeset/fresh-tiles-sparkle.md Co-authored-by: Rez <13340707+rezrah@users.noreply.github.com> --- .changeset/fresh-tiles-sparkle.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/fresh-tiles-sparkle.md b/.changeset/fresh-tiles-sparkle.md index c3818e7d7..db71d72a5 100644 --- a/.changeset/fresh-tiles-sparkle.md +++ b/.changeset/fresh-tiles-sparkle.md @@ -2,4 +2,4 @@ '@primer/react-brand': patch --- -Updates compact `Tiles` density so mobile shows four items per row with smaller icons, while tablet shows six items per row. +Updates compact `Tiles` density so narrow viewports shows four items per row with smaller icons, while medium (tablet) show six items per row.