From 56c8dff0abedc252bdfd52101e49a08135a6ec96 Mon Sep 17 00:00:00 2001
From: Siddharth Kshetrapal <siddharthkp@github.com>
Date: Tue, 23 Jul 2024 17:20:49 +0200
Subject: [PATCH 1/2] add overflow to Header

---
 .../src/Header/Header.features.stories.tsx    | 27 +++++++++++++++++++
 packages/react/src/Header/Header.tsx          |  1 +
 2 files changed, 28 insertions(+)

diff --git a/packages/react/src/Header/Header.features.stories.tsx b/packages/react/src/Header/Header.features.stories.tsx
index d35af807c57..d08d151fbd6 100644
--- a/packages/react/src/Header/Header.features.stories.tsx
+++ b/packages/react/src/Header/Header.features.stories.tsx
@@ -2,6 +2,9 @@ import React from 'react'
 import type {Meta} from '@storybook/react'
 
 import Header from './Header'
+import Avatar from '../Avatar'
+import Octicon from '../Octicon'
+import {MarkGithubIcon} from '@primer/octicons-react'
 
 export default {
   title: 'Components/Header/Features',
@@ -29,3 +32,27 @@ export const WithLinks = () => (
     </Header.Item>
   </Header>
 )
+
+export const WithManyItems = () => (
+  <Header>
+    <Header.Item>
+      <Header.Link href="#" sx={{fontSize: 2}}>
+        <Octicon icon={MarkGithubIcon} size={32} sx={{mr: 2}} />
+        <span>GitHub</span>
+      </Header.Link>
+    </Header.Item>
+    <Header.Item>Item</Header.Item>
+    <Header.Item>Item</Header.Item>
+    <Header.Item>Item</Header.Item>
+    <Header.Item>Item</Header.Item>
+    <Header.Item>Item</Header.Item>
+    <Header.Item>Item</Header.Item>
+    <Header.Item>Item</Header.Item>
+    <Header.Item>Item</Header.Item>
+    <Header.Item>Item</Header.Item>
+    <Header.Item>Item</Header.Item>
+    <Header.Item sx={{mr: 0}}>
+      <Avatar src="https://github.com/octocat.png" size={20} square alt="@octocat" />
+    </Header.Item>
+  </Header>
+)
diff --git a/packages/react/src/Header/Header.tsx b/packages/react/src/Header/Header.tsx
index 73c70958b89..c676ccd2d4c 100644
--- a/packages/react/src/Header/Header.tsx
+++ b/packages/react/src/Header/Header.tsx
@@ -19,6 +19,7 @@ const Header = styled.header<StyledHeaderProps>`
   background-color: ${get('colors.header.bg')};
   align-items: center;
   flex-wrap: nowrap;
+  overflow: auto;
 
   ${sx};
 `

From 1dcfabbf192c2ced3309642e9cd5abc0f92d20c9 Mon Sep 17 00:00:00 2001
From: Siddharth Kshetrapal <siddharthkp@github.com>
Date: Wed, 24 Jul 2024 10:35:52 +0200
Subject: [PATCH 2/2] Create moody-rivers-impress.md

---
 .changeset/moody-rivers-impress.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/moody-rivers-impress.md

diff --git a/.changeset/moody-rivers-impress.md b/.changeset/moody-rivers-impress.md
new file mode 100644
index 00000000000..24e4e650504
--- /dev/null
+++ b/.changeset/moody-rivers-impress.md
@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+Header: Add overflow when there are a lot of items