From ea4280d184ff367b88986d9015f3b7d52ec39072 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Thu, 20 Nov 2025 07:52:22 +0000
Subject: [PATCH] Add wrap prop to Space components in SectionHeader for mobile
 responsiveness

Co-authored-by: Danielv123 <6792749+Danielv123@users.noreply.github.com>
---
 packages/web_ui/src/components/ModPackViewPage.tsx | 2 +-
 packages/web_ui/src/components/ModsPage.tsx        | 4 ++--
 packages/web_ui/src/components/SavesList.tsx       | 2 +-
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/web_ui/src/components/ModPackViewPage.tsx b/packages/web_ui/src/components/ModPackViewPage.tsx
index bc60f4c7..4a185a1c 100644
--- a/packages/web_ui/src/components/ModPackViewPage.tsx
+++ b/packages/web_ui/src/components/ModPackViewPage.tsx
@@ -664,7 +664,7 @@ function ModsTable(props: ModsTableProps) {
 	return <>
 		<SectionHeader
 			title="Mods"
-			extra={<Space>
+			extra={<Space wrap>
 				<Button
 					icon={<ToolOutlined />}
 					disabled={!mods.some(m => m.enabled && m.warning && m.warning !== "wrong_factorio_version")}
diff --git a/packages/web_ui/src/components/ModsPage.tsx b/packages/web_ui/src/components/ModsPage.tsx
index b0c10214..7ab5d5d9 100644
--- a/packages/web_ui/src/components/ModsPage.tsx
+++ b/packages/web_ui/src/components/ModsPage.tsx
@@ -561,7 +561,7 @@ export default function ModsPage() {
 		<PageHeader title="Mods" />
 		<SectionHeader
 			title="Mod Packs"
-			extra={<Space>
+			extra={<Space wrap>
 				{account.hasPermission("core.mod_pack.create") && <ImportModPackButton />}
 				{account.hasPermission("core.mod_pack.create") && <CreateModPackButton />}
 			</Space>}
@@ -594,7 +594,7 @@ export default function ModsPage() {
 				},
 			})}
 		/>
-		<SectionHeader title="Stored Mods" extra={<Space>
+		<SectionHeader title="Stored Mods" extra={<Space wrap>
 			<SearchModsButton />
 			{uploadButton}
 		</Space>} />
diff --git a/packages/web_ui/src/components/SavesList.tsx b/packages/web_ui/src/components/SavesList.tsx
index 0ec02355..9089335a 100644
--- a/packages/web_ui/src/components/SavesList.tsx
+++ b/packages/web_ui/src/components/SavesList.tsx
@@ -345,7 +345,7 @@ export default function SavesList(props: { instance: lib.InstanceDetails }) {
 	};
 
 	return <div>
-		<SectionHeader title="Saves" extra={<Space>
+		<SectionHeader title="Saves" extra={<Space wrap>
 			{account.hasPermission("core.instance.save.upload") && <Upload {...uploadProps} >
 				<UploadButton disabled={hostOffline}>
 					Upload save