fix(frontend): resolve remaining font blur in node and forward cards (#188)

## Summary
- apply the same anti-blur drag transform strategy used in tunnel cards
to node cards
- update forward card and table-row sortable transforms to round x/y
pixels and reduce subpixel text blur
- limit `willChange` usage to active dragging so text does not remain on
a promoted layer while idle

## Verification
- npm run build (vite-frontend)

vite-frontend/src/pages/forward.tsx

@@ -1188,13 +1188,16 @@ export default function ForwardPage() {
     } = useSortable({ id: forward.id });
 
     const style: React.CSSProperties = {
-      transform: transform ? CSS.Transform.toString(transform) : undefined,
+      transform: transform
+        ? CSS.Transform.toString({
+            ...transform,
+            x: Math.round(transform.x),
+            y: Math.round(transform.y),
+          })
+        : undefined,
       transition: isDragging ? undefined : transition || undefined,
       opacity: isDragging ? 0.5 : 1,
-      willChange: "transform",
+      willChange: isDragging ? "transform" : undefined,
-      backfaceVisibility: "hidden",
-      WebkitFontSmoothing: "antialiased",
-      MozOsxFontSmoothing: "grayscale",
     };
 
     return (
@@ -1246,7 +1249,13 @@ export default function ForwardPage() {
     } = useSortable({ id: forward.id });
 
     const style = {
-      transform: transform ? CSS.Transform.toString(transform) : undefined,
+      transform: transform
+        ? CSS.Transform.toString({
+            ...transform,
+            x: Math.round(transform.x),
+            y: Math.round(transform.y),
+          })
+        : undefined,
       transition: isDragging ? undefined : transition || undefined,
       opacity: isDragging ? 0.5 : 1,
       backgroundColor: isDragging ? "var(--nextui-default-100)" : undefined,

vite-frontend/src/pages/node.tsx

@@ -130,13 +130,16 @@ const SortableItem = ({
   } = useSortable({ id });
 
   const style: React.CSSProperties = {
-    transform: transform ? CSS.Transform.toString(transform) : undefined,
+    transform: transform
+      ? CSS.Transform.toString({
+          ...transform,
+          x: Math.round(transform.x),
+          y: Math.round(transform.y),
+        })
+      : undefined,
     transition: isDragging ? undefined : transition || undefined,
     opacity: isDragging ? 0.5 : 1,
-    willChange: "transform",
+    willChange: isDragging ? "transform" : undefined,
-    backfaceVisibility: "hidden",
-    WebkitFontSmoothing: "antialiased",
-    MozOsxFontSmoothing: "grayscale",
   };
 
   return (