From 234434dc1e75410c4bde0ec5ca3879cdc3e912ed Mon Sep 17 00:00:00 2001 From: Liu Liu Date: Wed, 4 Mar 2026 13:27:11 -0800 Subject: [PATCH 1/3] column-reverse on narrow --- .changeset/gold-rooms-bake.md | 5 +++++ packages/react/src/Banner/Banner.module.css | 3 +++ 2 files changed, 8 insertions(+) create mode 100644 .changeset/gold-rooms-bake.md diff --git a/.changeset/gold-rooms-bake.md b/.changeset/gold-rooms-bake.md new file mode 100644 index 00000000000..1bc2ffe73d6 --- /dev/null +++ b/.changeset/gold-rooms-bake.md @@ -0,0 +1,5 @@ +--- +'@primer/react': patch +--- + +Banner: stack inline actions vertically on narrow viewports. diff --git a/packages/react/src/Banner/Banner.module.css b/packages/react/src/Banner/Banner.module.css index 07b04346567..9b073352f64 100644 --- a/packages/react/src/Banner/Banner.module.css +++ b/packages/react/src/Banner/Banner.module.css @@ -40,6 +40,9 @@ & .BannerActions :where([data-primary-action='trailing']) { display: flex; + @media screen and (--viewportRange-narrow) { + flex-direction: column-reverse; + } } & .BannerActions :where([data-primary-action='leading']) { From 047bfd6f3ab92fb34346a90414d742047c9aafaa Mon Sep 17 00:00:00 2001 From: liuliu-dev <6688812+liuliu-dev@users.noreply.github.com> Date: Wed, 4 Mar 2026 21:45:45 +0000 Subject: [PATCH 2/3] chore: auto-fix lint and formatting issues --- packages/react/src/Banner/Banner.module.css | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/react/src/Banner/Banner.module.css b/packages/react/src/Banner/Banner.module.css index 9b073352f64..efe500f4528 100644 --- a/packages/react/src/Banner/Banner.module.css +++ b/packages/react/src/Banner/Banner.module.css @@ -40,6 +40,7 @@ & .BannerActions :where([data-primary-action='trailing']) { display: flex; + @media screen and (--viewportRange-narrow) { flex-direction: column-reverse; } From cc204e5164c8d36e0ee653f547dbf3784ed9846a Mon Sep 17 00:00:00 2001 From: Liu Liu Date: Thu, 5 Mar 2026 13:15:52 -0800 Subject: [PATCH 3/3] column --- packages/react/src/Banner/Banner.module.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react/src/Banner/Banner.module.css b/packages/react/src/Banner/Banner.module.css index efe500f4528..ce747ade8bc 100644 --- a/packages/react/src/Banner/Banner.module.css +++ b/packages/react/src/Banner/Banner.module.css @@ -42,7 +42,7 @@ display: flex; @media screen and (--viewportRange-narrow) { - flex-direction: column-reverse; + flex-direction: column; } }