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

@@ -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>,

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

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

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

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>,

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",

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>,

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

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;