From cc98299a720244d5d2c8875c6b09c14c98518270 Mon Sep 17 00:00:00 2001
From: henrygd <hank@henrygd.me>
Date: Sat, 17 Oct 2026 10:07:44 -0400
Subject: [PATCH] refactor(ui): match token mask length and place copy buttons
 beside values

---
 .../routes/settings/tokens-fingerprints.tsx   |  4 +-
 internal/site/src/components/token-value.tsx  | 62 +++++++++----------
 2 files changed, 33 insertions(+), 33 deletions(-)

diff --git a/internal/site/src/components/routes/settings/tokens-fingerprints.tsx b/internal/site/src/components/routes/settings/tokens-fingerprints.tsx
index 7f3b1b22e..5483cfbe0 100644
--- a/internal/site/src/components/routes/settings/tokens-fingerprints.tsx
+++ b/internal/site/src/components/routes/settings/tokens-fingerprints.tsx
@@ -191,7 +191,7 @@ const SectionUniversalToken = memo(() => {
 								<span className="text-sm text-muted-foreground whitespace-nowrap">
 									<Trans>Public key</Trans>
 								</span>
-								<div className="min-w-0 flex-1 truncate">
+								<div className="min-w-0 truncate">
 									<span className="text-sm text-primary font-mono">{publicKey}</span>
 								</div>
 								<Button
@@ -200,7 +200,7 @@ const SectionUniversalToken = memo(() => {
 									onClick={() => copyToClipboard(publicKey)}
 									title={t`Copy public key`}
 								>
-									<CopyIcon className="w-4" />
+									<CopyIcon className="size-4" />
 								</Button>
 							</div>
 						)}
diff --git a/internal/site/src/components/token-value.tsx b/internal/site/src/components/token-value.tsx
index b7648244f..f8e980372 100644
--- a/internal/site/src/components/token-value.tsx
+++ b/internal/site/src/components/token-value.tsx
@@ -12,39 +12,39 @@ export function TokenValue({ token, label, disabled = false }: { token: string;
 	return (
 		<fieldset className="flex items-center gap-2 min-w-0">
 			<legend className="sr-only">{label}</legend>
-			<span className="font-mono text-sm min-w-0 flex-1 overflow-x-auto whitespace-nowrap" aria-hidden={!revealed}>
-				{revealed ? token : "••••••••••••"}
+			<span className="font-mono text-sm min-w-0 overflow-x-auto whitespace-nowrap" aria-hidden={!revealed}>
+				{revealed ? token : "•".repeat(token.length)}
 			</span>
 			{!revealed && <span className="sr-only">{t`Token hidden`}</span>}
-			<Button
-				type="button"
-				variant="ghost"
-				size="icon"
-				className="shrink-0"
-				disabled={disabled}
-				aria-label={revealed ? t`Hide token` : t`Reveal token`}
-				title={revealed ? t`Hide token` : t`Reveal token`}
-				aria-pressed={revealed}
-				onClick={() => setRevealedToken(revealed ? null : token)}
-			>
-				{revealed ? (
-					<EyeOffIcon className="size-4" aria-hidden="true" />
-				) : (
-					<EyeIcon className="size-4" aria-hidden="true" />
-				)}
-			</Button>
-			<Button
-				type="button"
-				variant="ghost"
-				size="icon"
-				className="shrink-0"
-				disabled={disabled}
-				aria-label={t`Copy token`}
-				title={t`Copy token`}
-				onClick={() => copyToClipboard(token)}
-			>
-				<CopyIcon className="size-4" aria-hidden="true" />
-			</Button>
+			<div className="flex shrink-0">
+				<Button
+					type="button"
+					variant="ghost"
+					size="icon"
+					disabled={disabled}
+					aria-label={revealed ? t`Hide token` : t`Reveal token`}
+					title={revealed ? t`Hide token` : t`Reveal token`}
+					aria-pressed={revealed}
+					onClick={() => setRevealedToken(revealed ? null : token)}
+				>
+					{revealed ? (
+						<EyeOffIcon className="size-4" aria-hidden="true" />
+					) : (
+						<EyeIcon className="size-4" aria-hidden="true" />
+					)}
+				</Button>
+				<Button
+					type="button"
+					variant="ghost"
+					size="icon"
+					disabled={disabled}
+					aria-label={t`Copy token`}
+					title={t`Copy token`}
+					onClick={() => copyToClipboard(token)}
+				>
+					<CopyIcon className="size-4" aria-hidden="true" />
+				</Button>
+			</div>
 		</fieldset>
 	)
 }