From 79c28103d575cacd8d45f358a2bc5b566d30a5a0 Mon Sep 17 00:00:00 2001
From: sagit <36596628+Sagit-chu@users.noreply.github.com>
Date: Sun, 22 Feb 2026 15:11:47 +0800
Subject: [PATCH] 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>
---
 vite-frontend/src/pages/forward.tsx | 5 ++++-
 vite-frontend/src/pages/node.tsx    | 5 ++++-
 vite-frontend/src/pages/tunnel.tsx  | 5 ++++-
 3 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/vite-frontend/src/pages/forward.tsx b/vite-frontend/src/pages/forward.tsx
index a1cd0aa..6bea80b 100644
--- a/vite-frontend/src/pages/forward.tsx
+++ b/vite-frontend/src/pages/forward.tsx
@@ -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 (
diff --git a/vite-frontend/src/pages/node.tsx b/vite-frontend/src/pages/node.tsx
index 2ff5562..431a928 100644
--- a/vite-frontend/src/pages/node.tsx
+++ b/vite-frontend/src/pages/node.tsx
@@ -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 (
diff --git a/vite-frontend/src/pages/tunnel.tsx b/vite-frontend/src/pages/tunnel.tsx
index accb43a..b7eb4fa 100644
--- a/vite-frontend/src/pages/tunnel.tsx
+++ b/vite-frontend/src/pages/tunnel.tsx
@@ -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 (