From b1f1d5ca77fbb58d4987ff46eed45f078cfed38b Mon Sep 17 00:00:00 2001
From: Kacper Wojciechowski <39823706+jog1t@users.noreply.github.com>
Date: Tue, 26 May 2026 23:53:49 +0200
Subject: [PATCH] fix(frontend): align log region column and disable selection
 on metadata

---
 frontend/src/components/deployment-logs.tsx   | 34 +++++++++++++++----
 .../projects.$project/ns.$namespace/logs.tsx  |  7 ++++
 2 files changed, 35 insertions(+), 6 deletions(-)

diff --git a/frontend/src/components/deployment-logs.tsx b/frontend/src/components/deployment-logs.tsx
index ab993eac24..a817bf37fa 100644
--- a/frontend/src/components/deployment-logs.tsx
+++ b/frontend/src/components/deployment-logs.tsx
@@ -61,6 +61,7 @@ interface DeploymentLogsProps {
 	region?: string;
 	paused?: boolean;
 	logsRef?: React.MutableRefObject<RivetSse.LogStreamEvent.Log[]>;
+	regionLabelLength?: number;
 }
 
 interface LogRowData {
@@ -68,9 +69,16 @@ interface LogRowData {
 	entry?: RivetSse.LogStreamEvent.Log;
 	isSentinel?: boolean;
 	isLoadingMore?: boolean;
+	regionColumnWidth?: string;
 }
 
-function LogRow({ entry, isSentinel, isLoadingMore, ...props }: LogRowData) {
+function LogRow({
+	entry,
+	isSentinel,
+	isLoadingMore,
+	regionColumnWidth,
+	...props
+}: LogRowData) {
 	if (isSentinel) {
 		return (
 			<div
@@ -96,21 +104,26 @@ function LogRow({ entry, isSentinel, isLoadingMore, ...props }: LogRowData) {
 		>
 			<div
 				className={cn(
-					"grid grid-cols-[max-content,16ch,3fr] gap-3 whitespace-pre-wrap break-words px-4 py-1 border-b",
+					"grid gap-3 whitespace-pre-wrap break-words px-4 py-1 border-b",
 					{
 						"text-red-400": entry.data.severity === "error",
 						"text-muted-foreground": entry.data.severity !== "error",
 					},
 				)}
+				style={{
+					gridTemplateColumns: `max-content ${regionColumnWidth ?? "16ch"} 3fr`,
+				}}
 			>
-				<span className="text-neutral-500 shrink-0">
+				<span className="text-neutral-500 shrink-0 select-none">
 					{entry.data.timestamp}
 				</span>
 				{entry.data.region ? (
-					<span className="text-neutral-600 shrink-0">
+					<span className="text-neutral-600 shrink-0 select-none">
 						[{entry.data.region}]
 					</span>
-				) : null}
+				) : (
+					<span />
+				)}
 				<span className="flex-1">
 					<AnsiText text={entry.data.message} />
 				</span>
@@ -127,7 +140,13 @@ export function DeploymentLogs({
 	region,
 	paused,
 	logsRef,
+	regionLabelLength,
 }: DeploymentLogsProps) {
+	// Region label gets brackets, so column width is name length + 2.
+	const regionColumnWidth =
+		regionLabelLength && regionLabelLength > 0
+			? `${regionLabelLength + 2}ch`
+			: "16ch";
 	const {
 		logs,
 		isLoading,
@@ -304,7 +323,10 @@ export function DeploymentLogs({
 						if (hasMore && index === 0) {
 							return { isSentinel: true, isLoadingMore };
 						}
-						return { entry: displayedLogs[index - sentinelOffset] };
+						return {
+							entry: displayedLogs[index - sentinelOffset],
+							regionColumnWidth,
+						};
 					}}
 					row={LogRow}
 				/>
diff --git a/frontend/src/routes/_context/orgs.$organization/projects.$project/ns.$namespace/logs.tsx b/frontend/src/routes/_context/orgs.$organization/projects.$project/ns.$namespace/logs.tsx
index 3e04de9c9d..c3deb6c358 100644
--- a/frontend/src/routes/_context/orgs.$organization/projects.$project/ns.$namespace/logs.tsx
+++ b/frontend/src/routes/_context/orgs.$organization/projects.$project/ns.$namespace/logs.tsx
@@ -68,6 +68,12 @@ function RouteComponent() {
 		useDataProvider().datacentersQueryOptions(),
 	);
 
+	// Width all region labels to the longest datacenter name so messages line up.
+	const regionLabelLength = datacenters.reduce(
+		(max, dc) => Math.max(max, dc.name.length),
+		0,
+	);
+
 	const { search: initialSearch } = Route.useSearch();
 	const [search, setSearch] = useState(initialSearch ?? "");
 	const [isPaused, setIsPaused] = useState(false);
@@ -196,6 +202,7 @@ function RouteComponent() {
 								region={region === "all" ? undefined : region}
 								paused={isPaused}
 								logsRef={logsRef}
+								regionLabelLength={regionLabelLength}
 							/>
 						</div>
 					) : (