fixed: fix orderbook not being properly rendered in smaller moniters

Author: junhocode

src/components/OrderBook/OrderBook.styles.ts

@@ -1,17 +1,17 @@
-export const container = 
-  "flex w-full flex-col bg-card font-mono text-xs mt-10 rounded-md";
+export const container =
+  "flex w-full h-full flex-col bg-card font-mono text-xs rounded-md overflow-hidden";
 
 export const loadingContainer = 
   "flex h-full items-center justify-center text-xs text-muted-foreground font-mono";
 
 export const errorContainer = 
   "flex h-full items-center justify-center text-xs text-destructive font-mono";
 
-export const asksWrapper = 
-  "flex flex-1 flex-col justify-end min-h-0 pb-1";
+export const asksWrapper =
+  "flex flex-1 flex-col justify-end min-h-0 pb-1 overflow-hidden";
 
-export const bidsWrapper = 
-  "flex flex-1 flex-col pt-1 min-h-0";
+export const bidsWrapper =
+  "flex flex-1 flex-col pt-1 min-h-0 overflow-hidden";
 
 export const headerRow = 
   "flex w-full px-3 text-[#848E9C] text-xs font-semibold items-center";

src/components/OrderBook/OrderBook.tsx

@@ -46,13 +46,12 @@ export const OrderBook = ({ symbol }: OrderBookProps) => {
 
   return (
     <div className={S.container}>
-      <div className={S.asksWrapper}>
-        <div className={S.headerRow}>
+      <div className={S.headerRow}>
           <span className={S.colPrice}>Price(USDT)</span>
           <span className={S.colAmount}>Amount</span>
           <span className={S.colTotal}>Total</span>
         </div>
-
+      <div className={S.asksWrapper}>
         {asks.map((ask) => (
           <OrderBookRow
             key={ask[0]}