From 4a0d707bca5e838b852cb6076a492cb3e5796fb5 Mon Sep 17 00:00:00 2001
From: Danielle Maywood <danielle@themaywoods.com>
Date: Wed, 25 Mar 2026 00:39:17 +0000
Subject: [PATCH] fix(site): compact context compaction rows in behavior
 settings (#23543)

---
 ...serCompactionThresholdSettings.stories.tsx |  2 --
 .../UserCompactionThresholdSettings.tsx       | 26 ++++++++++---------
 2 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/site/src/pages/AgentsPage/UserCompactionThresholdSettings.stories.tsx b/site/src/pages/AgentsPage/UserCompactionThresholdSettings.stories.tsx
index 5630302104..3e9f6d37d7 100644
--- a/site/src/pages/AgentsPage/UserCompactionThresholdSettings.stories.tsx
+++ b/site/src/pages/AgentsPage/UserCompactionThresholdSettings.stories.tsx
@@ -88,8 +88,6 @@ export const Default: Story = {
 
 		expect(canvas.getByText("GPT-4o")).toBeInTheDocument();
 		expect(canvas.getByText("Claude Sonnet")).toBeInTheDocument();
-		expect(canvas.getByText("System default: 80%")).toBeInTheDocument();
-		expect(canvas.getByText("System default: 70%")).toBeInTheDocument();
 		expect(canvas.queryByText("GPT-3.5 (Disabled)")).not.toBeInTheDocument();
 
 		await userEvent.type(gpt4oInput, "100");
diff --git a/site/src/pages/AgentsPage/UserCompactionThresholdSettings.tsx b/site/src/pages/AgentsPage/UserCompactionThresholdSettings.tsx
index 4da56abade..3e75de0ea2 100644
--- a/site/src/pages/AgentsPage/UserCompactionThresholdSettings.tsx
+++ b/site/src/pages/AgentsPage/UserCompactionThresholdSettings.tsx
@@ -184,7 +184,7 @@ export const UserCompactionThresholdSettings: FC<
 					models before compaction thresholds can be set.
 				</p>
 			) : (
-				<div className="space-y-3">
+				<div className="space-y-2">
 					{enabledModelConfigs.map((modelConfig) => {
 						const existingOverride = overridesByModelID.get(modelConfig.id);
 						const hasOverride = overridesByModelID.has(modelConfig.id);
@@ -200,27 +200,27 @@ export const UserCompactionThresholdSettings: FC<
 							isThisModelMutating;
 
 						return (
-							<div
-								key={modelConfig.id}
-								className="space-y-2 rounded-lg border border-border bg-surface-secondary/40 p-4"
-							>
-								<div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
-									<div className="flex-1">
-										<span className="text-sm font-medium text-content-primary">
+							<div key={modelConfig.id} className="space-y-1">
+								<div className="flex items-center justify-between gap-3">
+									<div className="flex min-w-0 flex-1 items-baseline gap-2">
+										<span className="text-[13px] font-medium text-content-primary">
 											{modelConfig.display_name || modelConfig.model}
 										</span>
-										<span className="ml-2 text-xs text-content-secondary">
-											System default: {modelConfig.compression_threshold}%
+										<span className="ml-auto text-xs text-content-secondary">
+											System default:{" "}
+											<span className="inline-block w-[4ch] text-right tabular-nums">
+												{modelConfig.compression_threshold}%
+											</span>
 										</span>
 									</div>
-									<div className="flex flex-wrap items-center gap-2 sm:justify-end">
+									<div className="flex items-center gap-1.5">
 										<Input
 											aria-label={`${modelConfig.display_name || modelConfig.model} compaction threshold`}
 											type="number"
 											min={0}
 											max={100}
 											inputMode="numeric"
-											className="h-9 w-20 text-[13px]"
+											className="h-7 w-16 px-2 text-xs"
 											value={draftValue}
 											placeholder={String(modelConfig.compression_threshold)}
 											onChange={(event) => {
@@ -235,6 +235,7 @@ export const UserCompactionThresholdSettings: FC<
 										<span className="text-xs text-content-secondary">%</span>
 										<Button
 											size="sm"
+											className="h-7"
 											type="button"
 											disabled={isSaveDisabled}
 											onClick={() => {
@@ -258,6 +259,7 @@ export const UserCompactionThresholdSettings: FC<
 										{hasOverride && (
 											<Button
 												size="sm"
+												className="h-7"
 												variant="outline"
 												type="button"
 												disabled={isThisModelMutating}