From 448eb9223dbd090475d4ce154bbf6a81078afcba Mon Sep 17 00:00:00 2001
From: bbassie <17990055+bbassie@users.noreply.github.com>
Date: Thu, 25 Jun 2026 20:55:29 +0000
Subject: [PATCH] Make table link cells fill the cell and fix focus colour

Stretch the navigation link over the whole table cell (a position:relative
cell with an ::after overlay) so the entire name cell - and the Instances
Assigned Host cell - is clickable and right-click "open in new tab"-able,
not just the text. Also force color:inherit on the sidebar and account links
so the focus left behind by a middle-click no longer shows them blue.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 packages/web_ui/src/components/HostsPage.tsx    |  1 +
 packages/web_ui/src/components/InstanceList.tsx |  2 ++
 packages/web_ui/src/components/ModsPage.tsx     |  1 +
 packages/web_ui/src/components/PluginsPage.tsx  |  1 +
 packages/web_ui/src/components/RolesPage.tsx    |  1 +
 packages/web_ui/src/components/SiteLayout.tsx   |  7 +++++--
 packages/web_ui/src/components/UserViewPage.tsx |  1 +
 packages/web_ui/src/components/UsersTable.tsx   |  1 +
 packages/web_ui/src/style.css                   | 11 +++++++++++
 9 files changed, 24 insertions(+), 2 deletions(-)

diff --git a/packages/web_ui/src/components/HostsPage.tsx b/packages/web_ui/src/components/HostsPage.tsx
index 5a9d9986..9ead51fe 100644
--- a/packages/web_ui/src/components/HostsPage.tsx
+++ b/packages/web_ui/src/components/HostsPage.tsx
@@ -220,6 +220,7 @@ export default function HostsPage() {
 					dataIndex: "name",
 					defaultSortOrder: "ascend",
 					sorter: (a, b) => strcmp(a.name, b.name),
+					className: "table-link-cell",
 					render: (_, host) => <Link to={`/hosts/${host.id}/view`} style={{ color: "inherit" }}>
 						{host.name}
 					</Link>,
diff --git a/packages/web_ui/src/components/InstanceList.tsx b/packages/web_ui/src/components/InstanceList.tsx
index 3d9041e9..45919f64 100644
--- a/packages/web_ui/src/components/InstanceList.tsx
+++ b/packages/web_ui/src/components/InstanceList.tsx
@@ -49,6 +49,7 @@ export default function InstanceList(props: InstanceListProps) {
 			dataIndex: "name",
 			defaultSortOrder: "ascend",
 			sorter: (a, b) => strcmp(a["name"], b["name"]),
+			className: "table-link-cell",
 			render: (_, instance) => <Link to={`/instances/${instance.id}/view`} style={{ color: "inherit" }}>
 				{instance.name}
 			</Link>,
@@ -56,6 +57,7 @@ export default function InstanceList(props: InstanceListProps) {
 		{
 			title: "Assigned Host",
 			key: "assignedHost",
+			className: "table-link-cell",
 			render: (_, instance) => <Space>
 				<Link
 					to={`/hosts/${instance.assignedHost}/view`}
diff --git a/packages/web_ui/src/components/ModsPage.tsx b/packages/web_ui/src/components/ModsPage.tsx
index 8cbfe1a2..e32bb3c0 100644
--- a/packages/web_ui/src/components/ModsPage.tsx
+++ b/packages/web_ui/src/components/ModsPage.tsx
@@ -579,6 +579,7 @@ export default function ModsPage() {
 					dataIndex: "name",
 					defaultSortOrder: "ascend",
 					sorter: (a, b) => strcmp(a.name, b.name),
+					className: "table-link-cell",
 					render: (_, modPack) => <Link
 						to={`/mods/mod-packs/${modPack.id}/view`}
 						style={{ color: "inherit" }}
diff --git a/packages/web_ui/src/components/PluginsPage.tsx b/packages/web_ui/src/components/PluginsPage.tsx
index 38eed49f..3aa2a810 100644
--- a/packages/web_ui/src/components/PluginsPage.tsx
+++ b/packages/web_ui/src/components/PluginsPage.tsx
@@ -55,6 +55,7 @@ export default function PluginsPage() {
 				{
 					title: "Name",
 					key: "name",
+					className: "table-link-cell",
 					render: (_, plugin) => <Link
 						to={`/plugins/${plugin.meta.name}/view`}
 						style={{ color: "inherit" }}
diff --git a/packages/web_ui/src/components/RolesPage.tsx b/packages/web_ui/src/components/RolesPage.tsx
index f1b62fb0..a44bd2e1 100644
--- a/packages/web_ui/src/components/RolesPage.tsx
+++ b/packages/web_ui/src/components/RolesPage.tsx
@@ -77,6 +77,7 @@ export default function RolesPage() {
 					title: "Name",
 					dataIndex: "name",
 					sorter: (a, b) => strcmp(a.name, b.name),
+					className: "table-link-cell",
 					render: (_, role) => <Link to={`/roles/${role.id}/view`} style={{ color: "inherit" }}>
 						{role.name}
 					</Link>,
diff --git a/packages/web_ui/src/components/SiteLayout.tsx b/packages/web_ui/src/components/SiteLayout.tsx
index 7d2a77c4..35bcc2c2 100644
--- a/packages/web_ui/src/components/SiteLayout.tsx
+++ b/packages/web_ui/src/components/SiteLayout.tsx
@@ -25,7 +25,9 @@ const { Header, Sider } = Layout;
 // Render a sidebar menu label as a real link so right-click/middle-click can
 // open it in a new tab; stopPropagation keeps the Menu onClick from also firing.
 function navLink(path: string, label: string) {
-	return <Link to={path} onClick={e => e.stopPropagation()}>{label}</Link>;
+	// color: inherit keeps the menu colour in every state (incl. the focus left
+	// behind by a middle-click, which would otherwise show the link blue).
+	return <Link to={path} style={{ color: "inherit" }} onClick={e => e.stopPropagation()}>{label}</Link>;
 }
 
 function isActiveDropzone(element: HTMLElement | null): boolean {
@@ -82,7 +84,8 @@ export default function SiteLayout() {
 		},
 		items: [
 			{
-				label: <Link to={`/users/${account.name}/view`} onClick={e => e.stopPropagation()}>
+				label: <Link to={`/users/${account.name}/view`} style={{ color: "inherit" }}
+					onClick={e => e.stopPropagation()}>
 					{account.name}
 				</Link>,
 				key: "user",
diff --git a/packages/web_ui/src/components/UserViewPage.tsx b/packages/web_ui/src/components/UserViewPage.tsx
index 4aed4b05..4eb0c206 100644
--- a/packages/web_ui/src/components/UserViewPage.tsx
+++ b/packages/web_ui/src/components/UserViewPage.tsx
@@ -301,6 +301,7 @@ export default function UserViewPage() {
 				{
 					title: "Instance",
 					key: "instance",
+					className: "table-link-cell",
 					render: (_, [id]) => <Link to={`/instances/${id}/view`} style={{ color: "inherit" }}>
 						{instanceName(id)}
 					</Link>,
diff --git a/packages/web_ui/src/components/UsersTable.tsx b/packages/web_ui/src/components/UsersTable.tsx
index 48f26c03..ba5f3c70 100644
--- a/packages/web_ui/src/components/UsersTable.tsx
+++ b/packages/web_ui/src/components/UsersTable.tsx
@@ -84,6 +84,7 @@ export default function UsersTable({ instanceId, onlyOnline = false, pagination,
 		{
 			title: "Name",
 			key: "name",
+			className: "table-link-cell",
 			render: (_: any, user: lib.UserDetails) => (
 				<Link to={`/users/${user.name}/view`} style={{ color: "inherit" }}>
 					<Username user={user} withStatus />
diff --git a/packages/web_ui/src/style.css b/packages/web_ui/src/style.css
index b1f53739..f574c1b1 100644
--- a/packages/web_ui/src/style.css
+++ b/packages/web_ui/src/style.css
@@ -10,6 +10,17 @@ body {
 	cursor: pointer;
 }
 
+/* Make a table name-cell link fill the whole cell, so the entire cell is
+   clickable and right-click "open in new tab"-able, not just the text. */
+.table-link-cell {
+	position: relative;
+}
+.table-link-cell a::after {
+	content: "";
+	position: absolute;
+	inset: 0;
+}
+
 .login-container {
 	min-height: 100vh;
 	display: flex;