fix resizeable library error

CrocSwap · Sep 18, 2024 · 1c73d3f · 1c73d3f
1 parent abf0fba
commit 1c73d3f
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 22 deletions.
diff --git a/src/pages/platformAmbient/Trade/Trade.tsx b/src/pages/platformAmbient/Trade/Trade.tsx
@@ -372,10 +372,8 @@ function Trade() {
                             showResizeable={
                                 !isCandleDataNull && !isChartFullScreen && !isFuta
                             }
-                            style={{
-                                maxHeight: isFuta ? '100%' : 'calc(100% - 54px)',
-
-                            }}
+                            isFuta={isFuta}
+
                             enable={{
                                 bottom: !isChartFullScreen,
                                 top: false,

diff --git a/src/styled/Components/Trade.ts b/src/styled/Components/Trade.ts
@@ -48,31 +48,32 @@ export const MainSection = styled.section<{
 
 export const ResizableContainer = styled(Resizable)<{
     showResizeable: boolean;
-}>`
+    isFuta?: boolean;
+  }>`
     display: flex;
     justify-content: center;
     align-items: center;
     overflow: hidden;
-
-    // max-height: calc(100% - 54px);
+  
+    max-height: ${({ isFuta }) => (isFuta ? '100%' : 'calc(100% - 54px)')};
     min-height: 0px;
-
+  
     ${({ showResizeable }) =>
-        showResizeable &&
-        `
-    & > div:last-child > * {
-        bottom: 0 !important;
-        height: 5px !important;
-        background-color: var(--dark3);
-        z-index: 8;
-    }
-    
-    & > div:last-child > div:nth-child(2), & > div:last-child > div:nth-child(4) {
-        z-index: -1;
-        display: none;
-    }
+      showResizeable &&
+      `
+      & > div:last-child > * {
+          bottom: 0 !important;
+          height: 5px !important;
+          background-color: var(--dark3);
+          z-index: 8;
+      }
+  
+      & > div:last-child > div:nth-child(2), & > div:last-child > div:nth-child(4) {
+          z-index: -1;
+          display: none;
+      }
     `}
-`;
+  `;
 
 export const ChartContainer = styled.div<{
     fullScreen: boolean;