fix

src/constants/layout.ts

@@ -2,3 +2,6 @@ export enum TradeLayouts {
   Default = 'Default',
   Reverse = 'Reverse',
 }
+
+export const HORIZONTAL_PANEL_MIN_HEIGHT = 250;
+export const HORIZONTAL_PANEL_MAX_HEIGHT = 700;

src/pages/trade/LaunchableMarket.tsx

@@ -4,7 +4,11 @@ import { useMatch } from 'react-router-dom';
 import styled, { css } from 'styled-components';
 
 import { AnalyticsEvents } from '@/constants/analytics';
-import { TradeLayouts } from '@/constants/layout';
+import {
+  HORIZONTAL_PANEL_MAX_HEIGHT,
+  HORIZONTAL_PANEL_MIN_HEIGHT,
+  TradeLayouts,
+} from '@/constants/layout';
 import { AppRoute } from '@/constants/routes';
 
 import { useBreakpoints } from '@/hooks/useBreakpoints';
@@ -47,11 +51,14 @@ const LaunchableMarket = () => {
     },
     [dispatch]
   );
-  const { handleMouseDown, horizontalPanelHeight, isDragging } = useResizablePanel(
-    horizontalPanelHeightPxBase,
-    setPanelHeight
-  );
-
+  const {
+    handleMouseDown,
+    panelHeight: horizontalPanelHeight,
+    isDragging,
+  } = useResizablePanel(horizontalPanelHeightPxBase, setPanelHeight, {
+    min: HORIZONTAL_PANEL_MIN_HEIGHT,
+    max: HORIZONTAL_PANEL_MAX_HEIGHT,
+  });
   useEffect(() => {
     if (marketId) {
       track(

src/pages/trade/Trade.tsx

@@ -2,7 +2,11 @@ import { useCallback, useRef, useState } from 'react';
 
 import styled, { css } from 'styled-components';
 
-import { TradeLayouts } from '@/constants/layout';
+import {
+  HORIZONTAL_PANEL_MAX_HEIGHT,
+  HORIZONTAL_PANEL_MIN_HEIGHT,
+  TradeLayouts,
+} from '@/constants/layout';
 
 import { useBreakpoints } from '@/hooks/useBreakpoints';
 import { useCurrentMarketId } from '@/hooks/useCurrentMarketId';
@@ -49,10 +53,14 @@ const TradePage = () => {
     },
     [dispatch]
   );
-  const { handleMouseDown, horizontalPanelHeight, isDragging } = useResizablePanel(
-    horizontalPanelHeightPxBase,
-    setPanelHeight
-  );
+  const {
+    handleMouseDown,
+    panelHeight: horizontalPanelHeight,
+    isDragging,
+  } = useResizablePanel(horizontalPanelHeightPxBase, setPanelHeight, {
+    min: HORIZONTAL_PANEL_MIN_HEIGHT,
+    max: HORIZONTAL_PANEL_MAX_HEIGHT,
+  });
   const [isHorizontalPanelOpen, setIsHorizontalPanelOpen] = useState(true);
 
   usePageTitlePriceUpdates();

src/pages/trade/useResizablePanel.ts

@@ -4,11 +4,12 @@ import { clamp, debounce } from 'lodash';
 
 import { timeUnits } from '@/constants/time';
 
-const PANEL_MIN_HEIGHT = 250;
-const PANEL_MAX_HEIGHT = 700;
-
-export function useResizablePanel(startSize: number, syncHeight: (h: number) => void) {
-  const [horizontalPanelHeight, setHorizontalPanelHeight] = useState(startSize);
+export function useResizablePanel(
+  startSize: number,
+  syncHeight: (h: number) => void,
+  bounds: { min: number; max: number }
+) {
+  const [panelHeight, setPanelHeight] = useState(startSize);
   const [isDragging, setIsDragging] = useState(false);
   const startPosRef = useRef(0);
   const startHeightRef = useRef(0);
@@ -17,15 +18,15 @@ export function useResizablePanel(startSize: number, syncHeight: (h: number) =>
 
   const handleMove = (clientY: number) => {
     const dy = startPosRef.current - clientY;
-    const newHeight = clamp(startHeightRef.current + dy, PANEL_MIN_HEIGHT, PANEL_MAX_HEIGHT);
-    setHorizontalPanelHeight(newHeight);
+    const newHeight = clamp(startHeightRef.current + dy, bounds.min, bounds.max);
+    setPanelHeight(newHeight);
     debouncedSync(newHeight);
   };
 
   const handleMouseDown = (e: React.MouseEvent<HTMLElement>) => {
     setIsDragging(true);
     startPosRef.current = e.clientY;
-    startHeightRef.current = horizontalPanelHeight;
+    startHeightRef.current = panelHeight;
     e.preventDefault();
   };
 
@@ -54,5 +55,5 @@ export function useResizablePanel(startSize: number, syncHeight: (h: number) =>
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isDragging]);
 
-  return { handleMouseDown, horizontalPanelHeight, isDragging };
+  return { handleMouseDown, panelHeight, isDragging };
 }