fix: wrong css class (#4053)

libs/market-depth/src/lib/orderbook-manager.tsx

@@ -65,6 +65,7 @@ export const OrderbookManager = ({ marketId }: OrderbookManagerProps) => {
         asks={data?.depth.sell ?? []}
         decimalPlaces={market?.decimalPlaces ?? 0}
         positionDecimalPlaces={market?.positionDecimalPlaces ?? 0}
+        assetSymbol={market?.tradableInstrument.instrument.product.quoteName}
         onClick={(price: string) => {
           if (price) {
             updateOrder(marketId, { price });

libs/market-depth/src/lib/orderbook.spec.tsx

@@ -41,6 +41,7 @@ describe('Orderbook', () => {
         decimalPlaces={decimalPlaces}
         positionDecimalPlaces={0}
         {...generateMockData(params)}
+        assetSymbol="USD"
       />
     );
     await waitFor(() =>
@@ -61,6 +62,7 @@ describe('Orderbook', () => {
         positionDecimalPlaces={0}
         onClick={onClickSpy}
         {...mockedData}
+        assetSymbol="USD"
       />
     );
     expect(

libs/market-depth/src/lib/orderbook.stories.tsx

@@ -18,6 +18,7 @@ const OrderbookMockDataProvider = ({ decimalPlaces, ...props }: Props) => {
           positionDecimalPlaces={0}
           decimalPlaces={decimalPlaces}
           {...generateMockData({ ...props })}
+          assetSymbol="USD"
         />
       </div>
     </div>

libs/market-depth/src/lib/orderbook.tsx

@@ -13,18 +13,10 @@ import classNames from 'classnames';
 import { useState } from 'react';
 import type { PriceLevelFieldsFragment } from './__generated__/MarketDepth';
 
-interface OrderbookProps {
-  decimalPlaces: number;
-  positionDecimalPlaces: number;
-  onClick?: (price: string) => void;
-  midPrice?: string;
-  bids: PriceLevelFieldsFragment[];
-  asks: PriceLevelFieldsFragment[];
-}
-
 // Sets row height, will be used to calculate number of rows that can be
 // displayed each side of the book without overflow
 export const rowHeight = 17;
+const rowGap = 1;
 const midHeight = 30;
 
 const OrderbookTable = ({
@@ -52,7 +44,10 @@ const OrderbookTable = ({
         )
       }
     >
-      <div className={`grid auto-rows-[${rowHeight}px]`}>
+      <div
+        className="grid"
+        style={{ gridAutoRows: rowHeight, gap: rowGap }} // use style as tailwind won't compile the dynamically set height
+      >
         {rows.map((data) => (
           <OrderbookRow
             key={data.price}
@@ -71,6 +66,16 @@ const OrderbookTable = ({
   );
 };
 
+interface OrderbookProps {
+  decimalPlaces: number;
+  positionDecimalPlaces: number;
+  onClick?: (price: string) => void;
+  midPrice?: string;
+  bids: PriceLevelFieldsFragment[];
+  asks: PriceLevelFieldsFragment[];
+  assetSymbol: string | undefined;
+}
+
 export const Orderbook = ({
   decimalPlaces,
   positionDecimalPlaces,
@@ -78,6 +83,7 @@ export const Orderbook = ({
   midPrice,
   asks,
   bids,
+  assetSymbol,
 }: OrderbookProps) => {
   const [resolution, setResolution] = useState(1);
   const resolutions = new Array(
@@ -101,15 +107,18 @@ export const Orderbook = ({
           {({ height }) => {
             const limit = Math.max(
               1,
-              Math.floor((height - midHeight) / 2 / rowHeight)
+              Math.floor((height - midHeight) / 2 / (rowHeight + rowGap))
             );
             const askRows = groupedAsks?.slice(limit * -1) ?? [];
             const bidRows = groupedBids?.slice(0, limit) ?? [];
             return (
               <div
-                className={`overflow-hidden grid grid-rows-[1fr_${midHeight}px_1fr]`}
+                className="overflow-hidden grid"
                 data-testid="orderbook-grid-element"
-                style={{ height: height + 'px' }}
+                style={{
+                  height: height + 'px',
+                  gridTemplateRows: `1fr ${midHeight}px 1fr`, // cannot use tailwind here as tailwind will not parse a class string with interpolation
+                }}
               >
                 {askRows.length || bidRows.length ? (
                   <>
@@ -121,14 +130,17 @@ export const Orderbook = ({
                       positionDecimalPlaces={positionDecimalPlaces}
                       onClick={onClick}
                     />
-                    <div className="flex items-center justify-center text-lg">
+                    <div className="flex items-center justify-center gap-2">
                       {midPrice && (
-                        <span
+                        <>
-                          className="font-mono"
+                          <span
-                          data-testid={`middle-mark-price-${midPrice}`}
+                            className="font-mono text-lg"
-                        >
+                            data-testid={`middle-mark-price-${midPrice}`}
-                          {addDecimalsFormatNumber(midPrice, decimalPlaces)}
+                          >
-                        </span>
+                            {addDecimalsFormatNumber(midPrice, decimalPlaces)}
+                          </span>
+                          <span className="text-base">{assetSymbol}</span>
+                        </>
                       )}
                     </div>
                     <OrderbookTable