Merge pull request #8 from compolabs/fix/new-layout-fixes

Fixes for new layout

Author: EchoDex

src/screens/TradeScreen/BottomTables/BaseTable.tsx

@@ -119,7 +119,7 @@ const Root = styled(SmartFlex)<{ size: TRADE_TABLE_SIZE }>`
   transition: height 200ms;
 
   ${media.mobile} {
-    height: fit-content;
+    height: 100%;
   }
 `;
 

src/screens/TradeScreen/BottomTables/BottomTables.tsx

@@ -1,19 +1,31 @@
 import React from "react";
+import styled from "@emotion/styled";
 import { observer } from "mobx-react";
 
 import { useStores } from "@src/stores";
+import { media } from "@src/themes/breakpoints";
 
 import PerpTable from "./PerpTable";
 import SpotTable from "./SpotTable";
 
 const BottomTables: React.FC = observer(() => {
   const { tradeStore } = useStores();
 
-  if (tradeStore.isPerp) {
-    return <PerpTable />;
-  }
+  const TableComponent = tradeStore.isPerp ? PerpTable : SpotTable;
 
-  return <SpotTable />;
+  return (
+    <StyledBottomTables>
+      <TableComponent />
+    </StyledBottomTables>
+  );
 });
 
 export default BottomTables;
+
+const StyledBottomTables = styled.div`
+  width: 100%;
+
+  ${media.mobile} {
+    flex-grow: 1;
+  }
+`;

src/screens/TradeScreen/OrderbookAndTradesInterface/SpotOrderBook/SpotOrderBookImpl.tsx

@@ -258,6 +258,8 @@ const SettingsContainer = styled(Row)`
 
   ${media.mobile} {
     order: 3;
+    padding: 0 8px;
+    flex-direction: row-reverse;
   }
 `;
 
@@ -347,6 +349,9 @@ const OrderbookContainer = styled.div`
   flex-direction: column;
   width: 100%;
   height: 100%;
+  ${media.mobile} {
+    height: fit-content;
+  }
 `;
 
 const Container = styled(OrderbookContainer)<{
@@ -359,7 +364,7 @@ const Container = styled(OrderbookContainer)<{
   height: 100%;
 
   ${media.mobile} {
-    justify-content: center;
+    justify-content: flex-start;
   }
 `;
 

src/screens/TradeScreen/RightBlock/CreateOrder/CreateOrder.tsx

@@ -345,6 +345,10 @@ const Root = styled(SmartFlex)`
   min-height: 418px;
   display: flex;
   gap: 16px;
+
+  ${media.mobile} {
+    min-height: fit-content;
+  }
 `;
 
 const LeverageButton = styled(Button)`
@@ -365,6 +369,10 @@ const TpSlContentContainer = styled(SmartFlex)<{ isOpen: boolean }>`
 
 const CreateOrderButton = styled(Button)`
   margin: auto 0 0;
+
+  ${media.mobile} {
+    margin: 0;
+  }
 `;
 
 const ParamsContainer = styled.div`

src/screens/TradeScreen/TradeScreenMobile.tsx

@@ -90,7 +90,7 @@ const MobileContent = styled.div`
   grid-template-columns: 140px 1fr;
   gap: 8px;
   width: 100%;
-  min-height: 404px;
+  height: fit-content;
 `;
 
 const ContentWrapper = styled(SmartFlex)`