fix(frontend): prevent font blur in sortable card components (#185)

Add backface-visibility: hidden and font-smoothing properties to SortableItem components in tunnel, forward, and node pages to prevent GPU subpixel rendering blur during drag operations.

- tunnel.tsx: SortableItem wrapper anti-blur fix
- forward.tsx: SortableCard wrapper anti-blur fix
- node.tsx: SortableItem component anti-blur fix

Ultraworked with [Sisyphus](https://github.com/code-yeongyu/oh-my-opencode)

Co-authored-by: Sisyphus <clio-agent@sisyphuslabs.ai>
This commit is contained in:
sagit
2026-02-22 15:11:47 +08:00
committed by GitHub
parent f36bf1437c
commit 79c28103d5
3 changed files with 12 additions and 3 deletions
+4 -1
View File
@@ -1175,11 +1175,14 @@ export default function ForwardPage() {
isDragging,
} = useSortable({ id: forward.id });
const style = {
const style: React.CSSProperties = {
transform: transform ? CSS.Transform.toString(transform) : undefined,
transition: isDragging ? undefined : transition || undefined,
opacity: isDragging ? 0.5 : 1,
willChange: "transform",
backfaceVisibility: "hidden",
WebkitFontSmoothing: "antialiased",
MozOsxFontSmoothing: "grayscale",
};
return (
+4 -1
View File
@@ -129,11 +129,14 @@ const SortableItem = ({
isDragging,
} = useSortable({ id });
const style = {
const style: React.CSSProperties = {
transform: transform ? CSS.Transform.toString(transform) : undefined,
transition: isDragging ? undefined : transition || undefined,
opacity: isDragging ? 0.5 : 1,
willChange: "transform",
backfaceVisibility: "hidden",
WebkitFontSmoothing: "antialiased",
MozOsxFontSmoothing: "grayscale",
};
return (
+4 -1
View File
@@ -666,11 +666,14 @@ export default function TunnelPage() {
isDragging,
} = useSortable({ id });
const style = {
const style: React.CSSProperties = {
transform: transform ? CSS.Transform.toString(transform) : undefined,
transition: isDragging ? undefined : transition || undefined,
opacity: isDragging ? 0.5 : 1,
willChange: "transform",
backfaceVisibility: "hidden",
WebkitFontSmoothing: "antialiased",
MozOsxFontSmoothing: "grayscale",
};
return (