opensource/coder
3
0
Fork 0
mirror of https://github.com/coder/coder.git synced 2026-09-22 05:05:20 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix: resolve clipping on <AppearanceForm /> (#21989)

Browse Source 
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"
/> |
This commit is contained in:
Jake Howell
2026-02-09 13:29:52 +11:00
committed by GitHub
parent 58e335594a
commit 5007fa4d5f
1 changed files with 5 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
site/src/pages/UserSettingsPage/AppearancePage/AppearanceForm.tsx
+5 -1
View File
@@ -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" />