From 0684f4719e6a7dd28f52fb70e80a06d6b5c62ce6 Mon Sep 17 00:00:00 2001
From: bbassie <17990055+bbassie@users.noreply.github.com>
Date: Sun, 4 Oct 2026 23:49:37 +0000
Subject: [PATCH] Hide the permission group list on narrow screens and let it
 scroll

Below the lg breakpoint the list is not rendered and the permission
groups take the full width. At md the site sider already takes 250px,
so a 200px list next to it left too little room for the permissions.

The list keeps its sticky position but is capped at the viewport height
minus its top offset and scrolls on its own when there are more groups
than fit.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 packages/web_ui/src/components/RoleViewPage.tsx | 15 +++++++++++----
 1 file changed, 11 insertions(+), 4 deletions(-)

diff --git a/packages/web_ui/src/components/RoleViewPage.tsx b/packages/web_ui/src/components/RoleViewPage.tsx
index ce6fa2f1..9ff44c34 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, useMemo } from "react";
 import { useNavigate, useParams } from "react-router-dom";
-import { Button, Checkbox, Col, Input, Popconfirm, Row, Space, Spin, Tooltip } from "antd";
+import { Button, Checkbox, Col, Grid, Input, Popconfirm, Row, Space, Spin, Tooltip } from "antd";
 import { ExclamationCircleOutlined, StarOutlined, DeleteOutlined} from "@ant-design/icons";
 
 import * as lib from "@clusterio/lib";
@@ -175,6 +175,9 @@ export default function RoleViewPage() {
 	const [permissionState, setPermissionState] = useState<Record<string, boolean>>({});
 	const [baselineState, setBaselineState] = useState<Record<string, boolean>>({});
 	const [search, setSearch] = useState("");
+	// Hidden below lg, where the site sider leaves too little room; undefined until measured
+	const screens = Grid.useBreakpoint();
+	const showGroupList = screens.lg !== false;
 
 	const allPermissions = useMemo(() => [...lib.permissions.values()], []);
 	const canUpdate = Boolean(account.hasPermission("core.role.update"));
@@ -332,9 +335,13 @@ export default function RoleViewPage() {
 				onChange={e => setSearch(e.target.value)} style={{ marginBottom: 16 }} />
 
 			<Row gutter={16} wrap={false}>
-				<Col flex="200px">
+				{showGroupList && <Col flex="200px">
 					{/* Clear of the fixed page header */}
-					<div style={{ position: "sticky", top: 80 }}>
+					<div style={{
+						position: "sticky", top: 80, maxHeight: "calc(100vh - 96px)", overflowY: "auto",
+						// Keep the last groups reachable above the unsaved changes bar
+						paddingBottom: edited ? 76 : 0,
+					}}>
 						{sortedGroups.map(([groupName]) => (
 							<PermissionGroupNav
 								key={groupName}
@@ -343,7 +350,7 @@ export default function RoleViewPage() {
 							/>
 						))}
 					</div>
-				</Col>
+				</Col>}
 				<Col flex="auto" style={{ minWidth: 0 }}>
 					<Space direction="vertical" style={{ width: "100%" }}>
 						{sortedGroups.map(([groupName, permissions]) => (