From 486151723e4ea9dbce0e87d6c489614c70d67d5d Mon Sep 17 00:00:00 2001
From: Cooldude2606 <25043174+Cooldude2606@users.noreply.github.com>
Date: Thu, 6 Aug 2026 09:55:45 +0100
Subject: [PATCH] Fix game properties UI on small screens

---
 exp_roles/web/components/RoleProperties.tsx | 19 +++++++++++++++----
 1 file changed, 15 insertions(+), 4 deletions(-)

diff --git a/exp_roles/web/components/RoleProperties.tsx b/exp_roles/web/components/RoleProperties.tsx
index 36edc352..b63ae707 100644
--- a/exp_roles/web/components/RoleProperties.tsx
+++ b/exp_roles/web/components/RoleProperties.tsx
@@ -104,19 +104,21 @@ export default function RoleProperties(props: { plugin: WebPlugin, role?: lib.Ro
 		<Form
 			form={form}
 			disabled={!canUpdate}
-			labelAlign="left"
 			labelCol={{ span: 12 }}
 			wrapperCol={{ span: 12 }}
 			labelWrap
 		>
 			<Row gutter={[16, 0]}>
-				<Col xs={24} md={12} xl={8}>
+				<Col xs={24} sm={12} xl={6}>
 					<Form.Item
 						name="order"
 						label={labelled("Order", "A lower value is a more privileged role")}
 					>
 						<InputNumber style={{ width: "100%" }} />
 					</Form.Item>
+				</Col>
+
+				<Col xs={24} sm={12} xl={6}>
 					<Form.Item
 						name="priority"
 						label={labelled(
@@ -129,19 +131,25 @@ export default function RoleProperties(props: { plugin: WebPlugin, role?: lib.Ro
 					</Form.Item>
 				</Col>
 
-				<Col xs={24} md={12} xl={8}>
+				<Col xs={24} sm={12} xl={6}>
 					<Form.Item
 						name="shortHand"
 						label={labelled("Short hand", "Short form of the name, used where space is limited")}
 					>
 						<Input />
 					</Form.Item>
+				</Col>
+
+				<Col xs={24} sm={12} xl={6}>
 					<Form.Item
 						name="tag"
 						label={labelled("Tag", "Shown next to the names of players with this role")}
 					>
 						<Input />
 					</Form.Item>
+				</Col>
+
+				<Col xs={24} sm={12} xl={6}>
 					<Form.Item
 						name="color"
 						label={labelled("Colour", "Used for the role name and tag in game")}
@@ -150,7 +158,7 @@ export default function RoleProperties(props: { plugin: WebPlugin, role?: lib.Ro
 					</Form.Item>
 				</Col>
 
-				<Col xs={24} md={12} xl={8}>
+				<Col xs={24} sm={12} xl={6}>
 					<Form.Item
 						name="autoAssignHours"
 						label={labelled(
@@ -161,6 +169,9 @@ export default function RoleProperties(props: { plugin: WebPlugin, role?: lib.Ro
 					>
 						<InputNumber min={0} placeholder="Never" style={{ width: "100%" }} />
 					</Form.Item>
+				</Col>
+
+				<Col xs={24} sm={12} xl={6}>
 					<Form.Item
 						name="blockAutoAssign"
 						label={labelled(