From f202a0975ab2f5e14b0fb4998a9766558b8146d5 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Thu, 20 Nov 2025 10:55:42 +0000
Subject: [PATCH] Add wrap to more Space components and fix table scroll on
 narrow screens

Co-authored-by: Danielv123 <6792749+Danielv123@users.noreply.github.com>
---
 packages/web_ui/src/components/HostViewPage.tsx     | 2 +-
 packages/web_ui/src/components/InstanceViewPage.tsx | 2 +-
 packages/web_ui/src/components/RoleViewPage.tsx     | 6 +++---
 packages/web_ui/src/components/UserViewPage.tsx     | 4 ++--
 packages/web_ui/src/components/UsersTable.tsx       | 1 +
 5 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/packages/web_ui/src/components/HostViewPage.tsx b/packages/web_ui/src/components/HostViewPage.tsx
index 78450966..f7eddcf8 100644
--- a/packages/web_ui/src/components/HostViewPage.tsx
+++ b/packages/web_ui/src/components/HostViewPage.tsx
@@ -106,7 +106,7 @@ export default function HostViewPage() {
 		</PageLayout>;
 	}
 
-	let hostButtons = <Space>
+	let hostButtons = <Space wrap>
 		<HostControlButton hostId={hostId} canRestart={system?.canRestart} restartRequired={system?.restartRequired}/>
 		{
 			account.hasPermission("core.host.revoke_token")
diff --git a/packages/web_ui/src/components/InstanceViewPage.tsx b/packages/web_ui/src/components/InstanceViewPage.tsx
index ec1b28d6..69b5055c 100644
--- a/packages/web_ui/src/components/InstanceViewPage.tsx
+++ b/packages/web_ui/src/components/InstanceViewPage.tsx
@@ -141,7 +141,7 @@ function InstanceButtons(props: { instance: lib.InstanceDetails }) {
 			}
 		},
 	};
-	return <Space>
+	return <Space wrap>
 		{
 			account.hasAnyPermission(...InstanceControlButtonPermissions)
 			&& <InstanceControlButton instance={instance} />
diff --git a/packages/web_ui/src/components/RoleViewPage.tsx b/packages/web_ui/src/components/RoleViewPage.tsx
index e94bad85..29c9526d 100644
--- a/packages/web_ui/src/components/RoleViewPage.tsx
+++ b/packages/web_ui/src/components/RoleViewPage.tsx
@@ -1,6 +1,6 @@
 import React, { useEffect, useContext, useState } from "react";
 import { useNavigate, useParams } from "react-router-dom";
-import { Button, Checkbox, Form, Input, Popconfirm, Spin } from "antd";
+import { Button, Checkbox, Form, Input, Popconfirm, Space, Spin } from "antd";
 import DeleteOutlined from "@ant-design/icons/DeleteOutlined";
 
 import * as lib from "@clusterio/lib";
@@ -71,7 +71,7 @@ export default function RoleViewPage() {
 		>
 			<PageHeader
 				title={role.name}
-				extra={<>
+				extra={<Space wrap>
 					{canUpdate && <Button type={edited ? "primary" : "default"} htmlType="submit">Apply</Button>}
 					{account.hasPermission("core.role.delete") && <Popconfirm
 						title="Delete role?"
@@ -90,7 +90,7 @@ export default function RoleViewPage() {
 							<DeleteOutlined />
 						</Button>
 					</Popconfirm>}
-				</>}
+				</Space>}
 			/>
 			<Form.Item name="name" label="Name">
 				<Input disabled={!canUpdate}/>
diff --git a/packages/web_ui/src/components/UserViewPage.tsx b/packages/web_ui/src/components/UserViewPage.tsx
index 878d309c..694f1bf8 100644
--- a/packages/web_ui/src/components/UserViewPage.tsx
+++ b/packages/web_ui/src/components/UserViewPage.tsx
@@ -106,7 +106,7 @@ export default function UserViewPage() {
 					{user.isBanned && <Tag color="red">Banned</Tag>}
 				</span>
 			</Space>}
-			extra={<>
+			extra={<Space wrap>
 				{account.hasPermission("core.user.revoke_token") && (
 					account.name === userName || account.hasPermission("core.user.revoke_other_token")
 				) && <Button
@@ -146,7 +146,7 @@ export default function UserViewPage() {
 						<DeleteOutlined />
 					</Button>
 				</Popconfirm>}
-			</>}
+			</Space>}
 		/>
 		<Form
 			form={form}
diff --git a/packages/web_ui/src/components/UsersTable.tsx b/packages/web_ui/src/components/UsersTable.tsx
index 502afc61..1db84900 100644
--- a/packages/web_ui/src/components/UsersTable.tsx
+++ b/packages/web_ui/src/components/UsersTable.tsx
@@ -249,6 +249,7 @@ export default function UsersTable({ instanceId, onlyOnline = false, pagination,
 			rowKey={(user) => user.name}
 			pagination={defaultPagination}
 			size={size}
+			scroll={{ x: "max-content" }}
 			onRow={(user) => ({
 				onClick: (event) => {
 					if ((event.target as HTMLElement).closest("a")) {