From 98111f73831b52a04601f0a67a4e0f3d27fc3f1c Mon Sep 17 00:00:00 2001
From: Evan Simkowitz <esimkowitz@users.noreply.github.com>
Date: Thu, 18 Jul 2024 18:46:04 -0700
Subject: [PATCH] Round transform pixel values to avoid blurry text (#124)

---
 frontend/faraday/lib/utils.ts | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/frontend/faraday/lib/utils.ts b/frontend/faraday/lib/utils.ts
index 6c0ea235e..b903d1134 100644
--- a/frontend/faraday/lib/utils.ts
+++ b/frontend/faraday/lib/utils.ts
@@ -83,7 +83,11 @@ export function determineDropDirection(dimensions?: Dimensions, offset?: XYCoord
 
 export function setTransform({ top, left, width, height }: Dimensions, setSize: boolean = true): CSSProperties {
     // Replace unitless items with px
-    const translate = `translate3d(${left}px,${top}px, 0)`;
+    const topRounded = Math.round(top);
+    const leftRounded = Math.round(left);
+    const widthRounded = Math.round(width);
+    const heightRounded = Math.round(height);
+    const translate = `translate3d(${leftRounded}px,${topRounded}px, 0)`;
     return {
         top: 0,
         left: 0,
@@ -92,8 +96,8 @@ export function setTransform({ top, left, width, height }: Dimensions, setSize:
         MozTransform: translate,
         msTransform: translate,
         OTransform: translate,
-        width: setSize ? `${width}px` : undefined,
-        height: setSize ? `${height}px` : undefined,
+        width: setSize ? `${widthRounded}px` : undefined,
+        height: setSize ? `${heightRounded}px` : undefined,
         position: "absolute",
     };
 }