From 91b7c41b03272ba1827705e09055efcef096ed3b Mon Sep 17 00:00:00 2001 From: Liu Liu Date: Fri, 23 Jan 2026 11:03:25 -0800 Subject: [PATCH 1/3] overflow auto, flex-shrink:0 --- app/components/primer/alpha/tab_nav.pcss | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/app/components/primer/alpha/tab_nav.pcss b/app/components/primer/alpha/tab_nav.pcss index 78a26ae169..059b64cf75 100644 --- a/app/components/primer/alpha/tab_nav.pcss +++ b/app/components/primer/alpha/tab_nav.pcss @@ -12,7 +12,12 @@ display: flex; /* stylelint-disable-next-line primer/spacing */ margin-bottom: calc(var(--borderWidth-thin) * -1); - overflow: hidden; + overflow-x: auto; + + /* Ensure list items behave as flex items and don't overlap */ + & > li { + flex-shrink: 0; + } } .tabnav-tab { From cd36bea0c9a9fd57963c1b50e8c40f6600794194 Mon Sep 17 00:00:00 2001 From: Liu Liu Date: Fri, 23 Jan 2026 11:09:05 -0800 Subject: [PATCH 2/3] changeset, overflow-y --- .changeset/mighty-toys-remain.md | 5 +++++ app/components/primer/alpha/tab_nav.pcss | 1 + 2 files changed, 6 insertions(+) create mode 100644 .changeset/mighty-toys-remain.md diff --git a/.changeset/mighty-toys-remain.md b/.changeset/mighty-toys-remain.md new file mode 100644 index 0000000000..afaee9464b --- /dev/null +++ b/.changeset/mighty-toys-remain.md @@ -0,0 +1,5 @@ +--- +'@primer/view-components': patch +--- + +Fix overlapping issue in TabNav at narrow viewports. diff --git a/app/components/primer/alpha/tab_nav.pcss b/app/components/primer/alpha/tab_nav.pcss index 059b64cf75..ca47565ecf 100644 --- a/app/components/primer/alpha/tab_nav.pcss +++ b/app/components/primer/alpha/tab_nav.pcss @@ -13,6 +13,7 @@ /* stylelint-disable-next-line primer/spacing */ margin-bottom: calc(var(--borderWidth-thin) * -1); overflow-x: auto; + overflow-y: hidden; /* Ensure list items behave as flex items and don't overlap */ & > li { From f1e5efa2d7a7c0316f3c53bf67c0b7dd149c254a Mon Sep 17 00:00:00 2001 From: Liu Liu Date: Fri, 23 Jan 2026 13:09:33 -0800 Subject: [PATCH 3/3] lint --- app/components/primer/alpha/tab_nav.pcss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/components/primer/alpha/tab_nav.pcss b/app/components/primer/alpha/tab_nav.pcss index ca47565ecf..c233fbeef8 100644 --- a/app/components/primer/alpha/tab_nav.pcss +++ b/app/components/primer/alpha/tab_nav.pcss @@ -15,7 +15,7 @@ overflow-x: auto; overflow-y: hidden; - /* Ensure list items behave as flex items and don't overlap */ + /* stylelint-disable-next-line selector-max-type */ & > li { flex-shrink: 0; }