From a7ae97439b01a58eb035c218b78ad7b7ba31bd24 Mon Sep 17 00:00:00 2001
From: "Jose F. Romaniello" <jose@okta.com>
Date: Tue, 8 Oct 2024 17:27:46 -0300
Subject: [PATCH] Fix issue with Safari

Apparently Safari fails when using Resize Observer and box: "device-pixel-content-box".
---
 llm/components/stock-skeleton.tsx |  2 +-
 llm/components/stock.tsx          | 20 +++++++++++++++-----
 2 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/llm/components/stock-skeleton.tsx b/llm/components/stock-skeleton.tsx
index 184dead..0de63b1 100644
--- a/llm/components/stock-skeleton.tsx
+++ b/llm/components/stock-skeleton.tsx
@@ -23,7 +23,7 @@ export const StockSkeleton = () => {
           </div>
         </div>
 
-        <div className="-mx-4 relative cursor-col-resize">
+        <div className="mx-4 relative cursor-col-resize">
           <div style={{ height: 50 }}></div>
         </div>
       </div>
diff --git a/llm/components/stock.tsx b/llm/components/stock.tsx
index 23275a6..5989e4c 100644
--- a/llm/components/stock.tsx
+++ b/llm/components/stock.tsx
@@ -32,10 +32,20 @@ export function Stock({
   });
 
   const chartRef = useRef<HTMLDivElement>(null);
-  const { width = 0 } = useResizeObserver({
-    ref: chartRef,
-    box: "device-pixel-content-box",
-  });
+
+  let width = 0;
+  const resizeObserverResult =
+    useResizeObserver({
+      ref: chartRef,
+      box: "content-box",
+      //TODO: This fails on safari 17. Need to investigate
+      //      returns twice the value of content-box.
+      // box: "device-pixel-content-box",
+    });
+
+  //TODO remove this when the issue is fixed
+  // width = resizeObserverResult?.width ? resizeObserverResult?.width : 0;
+  width = resizeObserverResult?.width ? resizeObserverResult?.width * 2 : 0;
 
   const xToValue = scaleLinear([0, width], [price - price / 2, price]);
 
@@ -87,7 +97,7 @@ export function Stock({
         </div>
 
         <div
-          className="relative -mx-4 cursor-default mt-5"
+          className="relative mx-4 cursor-default mt-5"
           onPointerMove={(event) => {
             if (chartRef.current) {
               const { clientX } = event;