[ui] Slightly increase firefox text measuring tolerance (#18240)

## Summary & Motivation I've noticed that in one of my test DAGs, these are always unnecessarily truncated in the sidebar in Firefox: ![image](https://github.com/dagster-io/dagster/assets/1037212/616737ac-18be-4aa0-9d0d-65eaeead016d) We already have a permitted measurement variance because the canvas API and the DOM API return slightly different string widths, and this just bumps that constant up a bit, to the minimum value that renders these example strings correctly. ## How I Tested These Changes ![image](https://github.com/dagster-io/dagster/assets/1037212/72d37bf1-7256-4960-95b3-e663b985f622) Also put these in our existing stories as new test cases --------- Co-authored-by: bengotow <[email protected]>
dagster-io · Nov 27, 2023 · 95f77ed · 95f77ed · github-actions · Nov 27, 2023
1 parent 5ac3faf
commit 95f77ed
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 2 deletions.
diff --git a/...s/dagster-ui/packages/ui-components/src/components/__stories__/MiddleTruncate.stories.tsx b/...s/dagster-ui/packages/ui-components/src/components/__stories__/MiddleTruncate.stories.tsx
@@ -69,6 +69,9 @@ export const FlexboxContainerUsage = () => {
         'yoyo_multidim_other_order',
         'activity_daily_stats',
         'asset_that_supports_partition_ranges',
+        'asset_downstream',
+        'asset_weekly_root',
+        'asset_weekly',
       ].map((text) => (
         <Box key={text} style={{maxWidth: '100%'}} flex={{direction: 'row', gap: 8}}>
           <Box>

diff --git a/js_modules/dagster-ui/packages/ui-components/src/components/calculateMiddleTruncation.tsx b/js_modules/dagster-ui/packages/ui-components/src/components/calculateMiddleTruncation.tsx
@@ -1,7 +1,7 @@
 // We've observed that Firefox's DOM APIs and Canvas APIs do not return
 // identical values given the same rendered text, in particular when the DOM
-// element is inside a flexbox. They're floating point numbers off by ~0.05.
-const FIREFOX_WIDTH_VARIANCE = 0.33;
+// element is inside a flexbox. They're floating point numbers off by ~0.5.
+const FIREFOX_WIDTH_VARIANCE = 0.5;
 
 /**
  * Binary search to find the maximum middle-truncated text that will fit within the specified target width.