From b17c859498cfa65b54dde31a1b8f9f2d03c6b168 Mon Sep 17 00:00:00 2001
From: Nicholas Kissel <Nicholas.kissel@icloud.com>
Date: Sun, 31 May 2026 14:17:34 -0700
Subject: [PATCH] fix(frontend): polish actors list ui (header, button colors,
 copy targets, timestamp size)

---
 frontend/src/components/actors/actors-list-row.tsx | 8 ++++----
 frontend/src/components/actors/actors-list.tsx     | 2 +-
 frontend/src/components/ui/filters.tsx             | 2 +-
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/frontend/src/components/actors/actors-list-row.tsx b/frontend/src/components/actors/actors-list-row.tsx
index bbd08dca0b..4b5ad08ae0 100644
--- a/frontend/src/components/actors/actors-list-row.tsx
+++ b/frontend/src/components/actors/actors-list-row.tsx
@@ -107,7 +107,7 @@ function Id({ actorId }: { actorId: ActorId }) {
 		: actorId.substring(0, 8);
 	return (
 		<CopyTrigger value={actorId}>
-			<span className="group/id inline-flex items-center gap-1 min-w-0 max-w-full cursor-pointer text-muted-foreground hover:text-foreground tabular-nums font-mono-console transition-colors">
+			<span className="group/id inline-flex items-center gap-1 min-w-0 max-w-full justify-self-start cursor-pointer text-muted-foreground hover:text-foreground tabular-nums font-mono-console transition-colors">
 				<span className="truncate min-w-0">{shortId}</span>
 				<Icon
 					icon={faCopy}
@@ -159,7 +159,7 @@ function Tags({ actorId }: { actorId: ActorId }) {
 
 	return (
 		<CopyTrigger value={data}>
-			<span className="group/key inline-flex items-center gap-1 min-w-0 max-w-full cursor-pointer text-foreground transition-colors">
+			<span className="group/key inline-flex items-center gap-1 min-w-0 max-w-full justify-self-start cursor-pointer text-foreground transition-colors">
 				<span className="truncate min-w-0">{data}</span>
 				<Icon
 					icon={faCopy}
@@ -180,7 +180,7 @@ function Timestamp({ actorId }: { actorId: ActorId }) {
 	const timestamp = ts ? new Date(ts) : null;
 
 	return (
-		<SmallText className="text-right text-muted-foreground justify-end inline-flex tabular-nums">
+		<SmallText className="text-right text-xs text-muted-foreground justify-end inline-flex tabular-nums">
 			{isLoading ? (
 				<Skeleton className="h-5 w-10" />
 			) : timestamp ? (
@@ -205,7 +205,7 @@ export function ActorsListHeader() {
 				className="bg-foreground/[0.04] grid items-center gap-3 px-3 h-8 text-[10px] font-medium uppercase tracking-wide text-muted-foreground"
 				style={{ gridTemplateColumns: template }}
 			>
-				<div>Status</div>
+				<div />
 				{showIds ? <div>ID</div> : null}
 				{showDatacenter ? <div>Region</div> : null}
 				<div>Key</div>
diff --git a/frontend/src/components/actors/actors-list.tsx b/frontend/src/components/actors/actors-list.tsx
index 158dc6ce8d..59975f95fa 100644
--- a/frontend/src/components/actors/actors-list.tsx
+++ b/frontend/src/components/actors/actors-list.tsx
@@ -174,7 +174,7 @@ function InstanceSearchTrigger() {
 			<WithTooltip
 				trigger={
 					<Button
-						variant="outline"
+						variant="ghost"
 						size="icon-sm"
 						onClick={() => setOpen(true)}
 						aria-label="Open Actor by ID"
diff --git a/frontend/src/components/ui/filters.tsx b/frontend/src/components/ui/filters.tsx
index f70912b395..c840a10180 100644
--- a/frontend/src/components/ui/filters.tsx
+++ b/frontend/src/components/ui/filters.tsx
@@ -1407,7 +1407,7 @@ export function FiltersDisplay({
 		<Popover>
 			<PopoverTrigger asChild>
 				<Button
-					variant="outline"
+					variant="ghost"
 					size="sm"
 					startIcon={<Icon icon={faSliders} />}
 				>