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

@@ -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")

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} />

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}/>

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}

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")) {