From 368c2920b40049aaab4b33e42632736e0e8eaae1 Mon Sep 17 00:00:00 2001
From: shaan <skhoslajr@gmail.com>
Date: Mon, 6 Nov 2023 18:32:50 +0000
Subject: [PATCH] conditionally use container

---
 .../components/reports/graphs/SankeyGraph.tsx | 42 ++++++++++++-------
 1 file changed, 26 insertions(+), 16 deletions(-)

diff --git a/packages/desktop-client/src/components/reports/graphs/SankeyGraph.tsx b/packages/desktop-client/src/components/reports/graphs/SankeyGraph.tsx
index b246cf00b2c..182b0fc7d43 100644
--- a/packages/desktop-client/src/components/reports/graphs/SankeyGraph.tsx
+++ b/packages/desktop-client/src/components/reports/graphs/SankeyGraph.tsx
@@ -89,7 +89,31 @@ function SankeyGraph({ style, data, compact }: SankeyProps) {
   let sankeyData = compact ? convertToCondensed(data) : data;
 
   if (!data.links || data.links.length === 0) return null;
-  return (
+  const margin = {
+    left: 0,
+    right: 0,
+    top: compact ? 0 : 10,
+    bottom: compact ? 0 : 25,
+  };
+
+  return compact ? (
+    <ResponsiveContainer>
+      <Sankey
+        data={sankeyData}
+        node={props => <SankeyNode {...props} />}
+        sort={true}
+        iterations={1000}
+        nodePadding={23}
+        margin={margin}
+      >
+        <Tooltip
+          formatter={numberFormatterTooltip}
+          isAnimationActive={false}
+          separator=": "
+        />
+      </Sankey>
+    </ResponsiveContainer>
+  ) : (
     <Container
       style={{
         ...style,
@@ -104,21 +128,7 @@ function SankeyGraph({ style, data, compact }: SankeyProps) {
             sort={true}
             iterations={1000}
             nodePadding={23}
-            margin={
-              compact
-                ? {
-                    left: 0,
-                    right: 0,
-                    top: 0,
-                    bottom: 0,
-                  }
-                : {
-                    left: 0,
-                    right: 0,
-                    top: 10,
-                    bottom: 25,
-                  }
-            }
+            margin={margin}
           >
             <Tooltip
               formatter={numberFormatterTooltip}