@orderly.network/trading 3.0.4-alpha.2 → 3.0.4-alpha.3

package/dist/index.mjs

@@ -8488,7 +8488,8 @@ var DesktopLayout4 = (props) => {
     SideMarketsWidget,
     {
       symbol: props.symbol,
-      onSymbolChange: props.onSymbolChange
+      onSymbolChange: props.onSymbolChange,
+      panelSize
     }
   );
   const toggleButtoncls = cn(
@@ -8530,13 +8531,13 @@ var DesktopLayout4 = (props) => {
       height: "100%",
       width: marketsWidth,
       style: { minWidth: marketsWidth },
-      className: "oui-trading-markets-container oui-transition-all oui-duration-150",
+      className: "oui-trading-markets-container oui-min-h-0 oui-min-w-0 oui-max-w-full oui-transition-all oui-duration-150",
       onTransitionEnd: () => setAnimating(false),
       children: /* @__PURE__ */ jsxs(
         Flex,
         {
           id: "oui-side-markets",
-          className: "oui-relative oui-font-semibold",
+          className: "oui-relative oui-min-h-0 oui-min-w-0 oui-font-semibold",
           direction: "column",
           gapY: 5,
           height: "100%",
@@ -8547,10 +8548,7 @@ var DesktopLayout4 = (props) => {
               Box,
               {
                 width: "100%",
-                className: cn(
-                  panelSize === "large" && "oui-h-[calc(100%_-_56px)]",
-                  panelSize === "middle" && "oui-h-full"
-                ),
+                className: "oui-min-h-0 oui-min-w-0 oui-max-w-full oui-flex-1 oui-overflow-hidden oui-rounded-b-2xl",
                 children: marketsWidget
               }
             )
@@ -8594,10 +8592,10 @@ var DesktopLayout4 = (props) => {
     {
       classNames: {
         root: cn(
-          tradingViewFullScreen ? "!oui-absolute oui-top-0 oui-left-0 oui-right-0 oui-bottom-0 oui-z-[40] oui-bg-base-10" : "oui-z-1"
+          tradingViewFullScreen ? "!oui-absolute oui-inset-0 oui-z-40 oui-bg-base-10" : "oui-z-1"
         ),
         content: cn(
-          tradingViewFullScreen ? "oui-top-3 oui-bottom-3 oui-left-3 oui-right-3 oui-bg-base-9 oui-rounded-[16px] oui-overflow-hidden" : ""
+          tradingViewFullScreen ? "oui-inset-3 oui-overflow-hidden oui-rounded-[16px] oui-bg-base-9" : ""
         )
       },
       symbol: props.symbol,
@@ -8729,7 +8727,8 @@ var DesktopLayout4 = (props) => {
         Flex,
         {
           gap: 2,
-          className: "oui-flex-1 oui-overflow-hidden",
+          itemAlign: "stretch",
+          className: "oui-min-h-0 oui-flex-1 oui-overflow-hidden",
           style: { minWidth: marketsWidth + tradingViewMinWidth + space },
           children: [
             marketLayout === "left" && marketsView,
@@ -8759,10 +8758,20 @@ var DesktopLayout4 = (props) => {
   );
   const renderTradingViewAndOrderbookView = () => {
     if (max4XL && layout === "left") {
-      return /* @__PURE__ */ jsxs(Flex, { gapX: 2, style: { minHeight: orderbookMinHeight }, height: "100%", children: [
-        tradingViewAndOrderbookView,
-        marketLayout === "left" && marketsView
-      ] });
+      return /* @__PURE__ */ jsxs(
+        Flex,
+        {
+          gapX: 2,
+          itemAlign: "stretch",
+          className: "oui-min-h-0",
+          style: { minHeight: orderbookMinHeight },
+          height: "100%",
+          children: [
+            tradingViewAndOrderbookView,
+            marketLayout === "left" && marketsView
+          ]
+        }
+      );
     }
     return tradingViewAndOrderbookView;
   };
@@ -8891,6 +8900,7 @@ var DesktopLayout4 = (props) => {
                                             pt: 3,
                                             r: "2xl",
                                             width: marketsWidth,
+                                            className: "oui-overflow-hidden",
                                             style: {
                                               minHeight: tradindviewMinHeight + orderbookMinHeight + space,
                                               maxHeight: tradindviewMaxHeight + orderbookMaxHeight + space
@@ -9068,8 +9078,9 @@ var DesktopLayout4 = (props) => {
                   /* @__PURE__ */ jsxs(
                     Flex,
                     {
+                      itemAlign: "stretch",
                       className: cn(
-                        "oui-flex-1 oui-overflow-hidden",
+                        "oui-min-h-0 oui-flex-1 oui-overflow-hidden",
                         layout === "left" && "oui-flex-row-reverse"
                       ),
                       gap: 2,