From 7d91d9e28b26d770c4747503abd991fa5c5afc7d Mon Sep 17 00:00:00 2001
From: gorkem-bwl <gorkem.cetin@bluewavelabs.ca>
Date: Sat, 25 Apr 2026 23:27:50 -0400
Subject: [PATCH] fix(client): job queue table layout + theme-aware running-row
 tint
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

TableJobs:
- Cut from 11 to 7 columns, dropping active / runCount / failCount /
  lastFinishedAt (covered by Failed jobs table or by lastRun + lastRunTook).
- All cells get whiteSpace:nowrap + textOverflow:ellipsis + maxWidth so
  long timestamps and IDs no longer wrap and inflate row height; full
  value visible via title tooltip.
- Running-row tint: was theme.palette.success.light (too saturated in
  light, drowns white text in dark). Now #ECF7F2 in light, an 18%-alpha
  green in dark — readable in both modes.

TabQueue:
- One-line explainer above the Job queue heading, with the words
  "Highlighted rows" wrapped in the same green tint so the meaning
  is immediately associated.
- One-line explainer above Failed jobs heading too.
---
 .../src/Pages/Logs/components/TableJobs.tsx   | 85 +++++++++++--------
 1 file changed, 50 insertions(+), 35 deletions(-)

diff --git a/client/src/Pages/Logs/components/TableJobs.tsx b/client/src/Pages/Logs/components/TableJobs.tsx
index 660a5df4f..0a1ff3098 100644
--- a/client/src/Pages/Logs/components/TableJobs.tsx
+++ b/client/src/Pages/Logs/components/TableJobs.tsx
@@ -22,77 +22,92 @@ export const TableJobs = ({ jobs }: TableJobsProps) => {
 		id: job.monitorId,
 	}));
 
+	const cellSx = {
+		whiteSpace: "nowrap" as const,
+		overflow: "hidden",
+		textOverflow: "ellipsis",
+		maxWidth: 220,
+	};
+
 	const headers: Header<QueueJobWithId>[] = [
 		{
 			id: "id",
 			content: t("common.table.headers.monitorId"),
-			render: (row) => <Typography fontFamily={"monospace"}>{row.monitorId}</Typography>,
+			render: (row) => (
+				<Typography
+					fontFamily="monospace"
+					title={String(row.monitorId)}
+					sx={cellSx}
+				>
+					{row.monitorId}
+				</Typography>
+			),
 		},
 		{
 			id: "url",
 			content: t("common.table.headers.url"),
-			render: (row) => <Typography>{row.monitorUrl}</Typography>,
-		},
-		{
-			id: "interval",
-			content: t("common.table.headers.interval"),
 			render: (row) => (
-				<Typography>{prettyMilliseconds(row.monitorInterval ?? 0)}</Typography>
+				<Typography title={row.monitorUrl ?? ""} sx={cellSx}>
+					{row.monitorUrl}
+				</Typography>
 			),
 		},
 		{
 			id: "type",
 			content: t("common.table.headers.type"),
-			render: (row) => <Typography>{row.monitorType}</Typography>,
+			render: (row) => <Typography sx={cellSx}>{row.monitorType}</Typography>,
 		},
 		{
-			id: "active",
-			content: t("common.table.headers.active"),
-			render: (row) => <Typography>{row.active.toString()}</Typography>,
-		},
-		{
-			id: "runCount",
-			content: t("pages.logs.table.headers.runCount"),
-			render: (row) => <Typography>{row.runCount}</Typography>,
-		},
-		{
-			id: "failCount",
-			content: t("pages.logs.table.headers.failCount"),
-			render: (row) => <Typography>{row.failCount}</Typography>,
+			id: "interval",
+			content: t("common.table.headers.interval"),
+			render: (row) => (
+				<Typography sx={cellSx}>{prettyMilliseconds(row.monitorInterval ?? 0)}</Typography>
+			),
 		},
 		{
 			id: "lastRun",
 			content: t("pages.logs.table.headers.lastRunAt"),
-			render: (row) => <Typography>{formatTimestamp(row.lastRunAt)}</Typography>,
-		},
-		{
-			id: "lockedAt",
-			content: t("pages.logs.table.headers.lockedAt"),
-			render: (row) => <Typography>{formatTimestamp(row.lockedAt)}</Typography>,
-		},
-
-		{
-			id: "lastFinish",
-			content: t("pages.logs.table.headers.lastFinishedAt"),
-			render: (row) => <Typography>{formatTimestamp(row.lastFinishedAt)}</Typography>,
+			render: (row) => {
+				const v = formatTimestamp(row.lastRunAt) ?? "-";
+				return (
+					<Typography title={v} sx={cellSx}>
+						{v}
+					</Typography>
+				);
+			},
 		},
 		{
 			id: "lastRunTook",
 			content: t("pages.logs.table.headers.lastRunTook"),
 			render: (row) => {
 				const value = row.lastRunTook ? prettyMilliseconds(row.lastRunTook) : "-";
-				return <Typography>{value}</Typography>;
+				return <Typography sx={cellSx}>{value}</Typography>;
+			},
+		},
+		{
+			id: "lockedAt",
+			content: t("pages.logs.table.headers.lockedAt"),
+			render: (row) => {
+				const v = formatTimestamp(row.lockedAt) ?? "-";
+				return (
+					<Typography title={v} sx={cellSx}>
+						{v}
+					</Typography>
+				);
 			},
 		},
 	];
 
+	const isDark = theme.palette.mode === "dark";
+	const runningBg = isDark ? "rgba(19, 113, 91, 0.18)" : "#ECF7F2";
+
 	return (
 		<Table
 			headers={headers}
 			data={jobsWithId}
 			getRowSx={(row) => ({
 				...(row.lockedAt && {
-					"& td": { backgroundColor: theme.palette.success.light },
+					"& td": { backgroundColor: runningBg },
 				}),
 			})}
 		/>