From 6c4edfcd3ca39f198ce6fd685f70ed857ac2590c Mon Sep 17 00:00:00 2001
From: Jake Wagoner <jakewagoneredu@gmail.com>
Date: Mon, 3 Feb 2025 09:59:57 -0700
Subject: [PATCH] Fix attribute plot layout issue in Safari by adjusting
 VegaLite component's CSS position

---
 .../Attribute/AttributePlots/MemoizedDensityVega.tsx        | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/packages/upset/src/components/Columns/Attribute/AttributePlots/MemoizedDensityVega.tsx b/packages/upset/src/components/Columns/Attribute/AttributePlots/MemoizedDensityVega.tsx
index 8985fa0c..7678e9c1 100644
--- a/packages/upset/src/components/Columns/Attribute/AttributePlots/MemoizedDensityVega.tsx
+++ b/packages/upset/src/components/Columns/Attribute/AttributePlots/MemoizedDensityVega.tsx
@@ -39,7 +39,11 @@ export const MemoizedDensityVega: FC<Props> = memo(
     );
 
     return (
-      <VegaLite renderer="svg" spec={spec} actions={false} height={height} />
+      // @ts-expect-error: VegaLite plots render with position: relative, which breaks the layout in webkit (safari).
+      // This fix does NOT affect the layout in other browsers, and is necessary to prevent the layout from breaking in safari.
+      // Part of the reason this is necessary is because we are required to use !important to override the position property set by react-vega;
+      // However, react does NOT support !important in inline styles, so we have to use the css prop to apply the style.
+      <VegaLite renderer="svg" spec={spec} actions={false} height={height} css={{ position: 'initial !important' }} />
     );
   },
   // Instead of checking all values, we assume that equal length & equal first & last elements are sufficient