From 5007fa4d5fd720e82ff66481cab6faccf60768f9 Mon Sep 17 00:00:00 2001
From: Jake Howell <jacob@coder.com>
Date: Mon, 9 Feb 2026 13:29:52 +1100
Subject: [PATCH] fix: resolve clipping on `<AppearanceForm />` (#21989)

This pull-request resolves a really tiny issue on the `<AppearanceForm
/>` where the content would be showing a few too many pixels of the
light theme with the dark theme over top. This was due to [Subpixel
Rendering](https://en.wikipedia.org/wiki/Subpixel_rendering) within
Chrome (assumedly other browsers too).

Furthermore, we no longer use `bg-surface-secondary` in the header. So I
went ahead and downgraded this to `bg-surface-primary` to match the
current application.

<img width="1082" height="664" alt="CleanShot 2026-02-08 at 02 55 06@2x"
src="https://github.com/user-attachments/assets/e01093b9-b90b-4bf9-a279-d44332634031"
/>

| Old | New |
| --- | --- |
| <img width="725" height="241" alt="SUBPIXEL_ISSUE"
src="https://github.com/user-attachments/assets/2707eb80-add1-46fa-bd3d-62143abc9de2"
/> | <img width="725" height="241" alt="SUBPIXEL_NO_ISSUE"
src="https://github.com/user-attachments/assets/3f647c2d-6df8-4e46-aa1e-e73929ae39a0"
/> |
---
 .../UserSettingsPage/AppearancePage/AppearanceForm.tsx      | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/site/src/pages/UserSettingsPage/AppearancePage/AppearanceForm.tsx b/site/src/pages/UserSettingsPage/AppearancePage/AppearanceForm.tsx
index 0b86d8fdf7..d072c129e2 100644
--- a/site/src/pages/UserSettingsPage/AppearancePage/AppearanceForm.tsx
+++ b/site/src/pages/UserSettingsPage/AppearancePage/AppearanceForm.tsx
@@ -179,6 +179,10 @@ const AutoThemePreviewButton: FC<AutoThemePreviewButtonProps> = ({
 					preview={preview}
 					displayName={displayName}
 					theme={rightTheme}
+					style={{
+						// Slightly past the bounding box to avoid cutting off the outline
+						clipPath: "polygon(50% -5%, 105% -5%, 105% 105%, 50% 105%)",
+					}}
 				/>
 			</label>
 		</>
@@ -248,7 +252,7 @@ const ThemePreview: FC<ThemePreviewProps> = ({
 				style={style}
 			>
 				<div className="bg-surface-primary text-content-primary">
-					<div className="bg-surface-secondary flex items-center justify-between px-2.5 py-1.5 mb-2 border-0 border-b border-border border-solid">
+					<div className="bg-surface-primary flex items-center justify-between px-2.5 py-1.5 mb-2 border-0 border-b border-border border-solid">
 						<div className="flex items-center gap-1.5">
 							<div className="bg-content-primary h-1.5 w-5 rounded" />
 							<div className="bg-content-secondary h-1.5 w-5 rounded" />