fix letter spacing handling for safari

comet-ml · Sep 3, 2024 · a696c1b · a696c1b
1 parent fd0330c
commit a696c1b
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 7 deletions.
diff --git a/...opik-frontend/src/components/shared/TraceDetailsPanel/TraceTreeViewer/TraceTreeViewer.tsx b/...opik-frontend/src/components/shared/TraceDetailsPanel/TraceTreeViewer/TraceTreeViewer.tsx
@@ -203,7 +203,7 @@ const TraceTreeViewer: React.FunctionComponent<TraceTreeViewerProps> = ({
 
     const widthArray = getTextWidth(
       items.map((i) => i.name),
-      { font: "14px Inter", letterSpacing: "0.16px" },
+      { font: "14px Inter" },
     );
 
     const OTHER_SPACE = 52;
@@ -213,7 +213,9 @@ const TraceTreeViewer: React.FunctionComponent<TraceTreeViewerProps> = ({
       Math.max(
         ...items.map(
           (i, index) =>
-            OTHER_SPACE + (i.level || 1) * LEVEL_WIDTH + widthArray[index],
+            OTHER_SPACE +
+            (i.level || 1) * LEVEL_WIDTH +
+            widthArray[index] * 1.03, //where 1.03 Letter spacing compensation
         ),
       ),
     );

diff --git a/apps/opik-frontend/src/lib/utils.ts b/apps/opik-frontend/src/lib/utils.ts
@@ -40,7 +40,6 @@ export const getTextWidth = (
   text: string[],
   properties: {
     font?: string;
-    letterSpacing?: string;
   } = {},
 ) => {
   const canvas = document.createElement("canvas");
@@ -50,9 +49,5 @@ export const getTextWidth = (
     context.font = properties.font;
   }
 
-  if (properties.letterSpacing) {
-    context.letterSpacing = properties.letterSpacing;
-  }
-
   return text.map((v) => context.measureText(v).width);
 };