diff --git a/apps/opik-frontend/src/components/shared/TraceDetailsPanel/TraceTreeViewer/TraceTreeViewer.tsx b/apps/opik-frontend/src/components/shared/TraceDetailsPanel/TraceTreeViewer/TraceTreeViewer.tsx index af34c22d31..75d60abff0 100644 --- a/apps/opik-frontend/src/components/shared/TraceDetailsPanel/TraceTreeViewer/TraceTreeViewer.tsx +++ b/apps/opik-frontend/src/components/shared/TraceDetailsPanel/TraceTreeViewer/TraceTreeViewer.tsx @@ -203,7 +203,7 @@ const TraceTreeViewer: React.FunctionComponent = ({ 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 = ({ 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 index 8d042dc926..c9eee4b685 100644 --- 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); };