chore(orderbook): update orderbook to not be scrollable (#846)

dydxprotocol · Aug 5, 2024 · fa41976 · fa41976
1 parent e0bacfb
commit fa41976
Show file tree

Hide file tree

Showing 7 changed files with 338 additions and 237 deletions.
diff --git a/src/components/Tabs.tsx b/src/components/Tabs.tsx
@@ -1,4 +1,4 @@
-import { type ReactNode } from 'react';
+import { type ReactNode, type Ref } from 'react';
 
 import { Content, List, Root, Trigger } from '@radix-ui/react-tabs';
 import styled, { css, keyframes } from 'styled-components';
@@ -25,6 +25,7 @@ export type TabItem<TabItemsValue> = {
   subitems?: TabItem<TabItemsValue>[];
   customTrigger?: ReactNode;
   asChild?: boolean;
+  ref?: Ref<HTMLDivElement>;
 };
 
 type ElementProps<TabItemsValue> = {
@@ -126,8 +127,9 @@ export const Tabs = <TabItemsValue extends string>({
 
       {sharedContent ?? (
         <$Stack>
-          {items.map(({ asChild, value: childValue, content, forceMount }) => (
+          {items.map(({ asChild, value: childValue, content, forceMount, ref }) => (
             <$Content
+              ref={ref}
               key={childValue}
               asChild={asChild}
               value={childValue}

diff --git a/src/constants/orderbook.ts b/src/constants/orderbook.ts
@@ -13,3 +13,4 @@ export const ORDERBOOK_HEIGHT = 756;
 export const ORDERBOOK_WIDTH = 300;
 export const ORDERBOOK_ROW_HEIGHT = 21;
 export const ORDERBOOK_ROW_PADDING_RIGHT = 8;
+export const ORDERBOOK_HEADER_HEIGHT = 70;