Farabi/fix contract details page desktop

src/components/ContractDetailsChart/ContractDetailsChart.tsx

@@ -3,14 +3,14 @@ import { SmartChart } from "@/components/Chart/SmartChart";
 import { useChartData } from "@/hooks/useChartData";
 import { generateHistoricalTicks } from "@/utils/generateHistoricalData";
 import { transformTickData } from "@/utils/transformChartData";
-import { useDeviceDetection } from "@/hooks/useDeviceDetection";
+import { useOrientationStore } from "@/stores/orientationStore";
 
 export const ContractDetailsChart: React.FC = () => {
   const ref = useRef<{
     hasPredictionIndicators(): void;
     triggerPopup(arg: () => void): void;
   }>(null);
-  const { isDesktop } = useDeviceDetection();
+  const { isLandscape } = useOrientationStore();
 
   const historicalData = useMemo(() => {
     const data = generateHistoricalTicks("1HZ100V", 100);
@@ -25,7 +25,7 @@ export const ContractDetailsChart: React.FC = () => {
   });
 
   return (
-    <div className={`relative bg-white shadow-md rounded-lg ${isDesktop ? 'h-full' : 'h-[400px]'}`}>
+    <div className={`relative bg-white shadow-md rounded-lg ${isLandscape ? 'h-full' : 'h-[400px]'}`}>
       <div className="absolute inset-0">
         <SmartChart
           ref={ref}

src/layouts/MainLayout/MainLayout.tsx

@@ -15,7 +15,7 @@ interface MainLayoutProps {
 }
 
 export const MainLayout: React.FC<MainLayoutProps> = ({ children }) => {
-  const { isMobile, isDesktop } = useDeviceDetection()
+  const { isMobile } = useDeviceDetection()
   const { isLandscape, setIsLandscape } = useOrientationStore()
   const { isSidebarOpen, setSidebarOpen } = useMainLayoutStore()
   const [isMenuOpen, setMenuOpen] = React.useState(false)
@@ -44,7 +44,7 @@ export const MainLayout: React.FC<MainLayoutProps> = ({ children }) => {
     <div className="min-h-[100dvh] h-[100dvh] flex flex-col">
       {isHeaderVisible && <Header className="sticky top-0 z-50 w-full" />}
       <div
-        className={`flex flex-1 relative ${isDesktop ? "overflow-hidden" : ""}`}
+        className={`flex flex-1 relative ${isLandscape ? "overflow-hidden" : ""}`}
       >
         {isLandscape && (
           <SideNav

src/screens/ContractDetailsPage/ContractDetailsPage.tsx

@@ -10,7 +10,7 @@ import {
   OrderDetails,
   EntryExitDetails,
 } from "./components";
-import { useDeviceDetection } from "@/hooks/useDeviceDetection";
+import { useOrientationStore } from "@/stores/orientationStore";
 
 const MobileContractDetailsPage: React.FC = () => {
   const navigate = useNavigate();
@@ -56,8 +56,8 @@ const MobileContractDetailsPage: React.FC = () => {
 };
 
 const ContractDetailsPage: React.FC = () => {
-  const { isMobile } = useDeviceDetection();
-  return isMobile ? (
+  const { isLandscape } = useOrientationStore();
+  return !isLandscape ? (
     <MobileContractDetailsPage />
   ) : (
     <DesktopContractDetailsPage />

src/screens/ContractDetailsPage/DesktopContractDetailsPage.tsx

@@ -12,22 +12,22 @@ const DesktopContractDetailsPage: React.FC = () => {
   const navigate = useNavigate()
 
   return (
-    <div className="flex flex-col h-screen bg-gray-50 w-full" data-testid="desktop-contract-details">
+    <div className="flex flex-col bg-gray-50 w-full" data-testid="desktop-contract-details">
       <div className="flex justify-between items-center p-4 bg-white">
         <h1 className="text-xl font-bold mx-auto">Contract details</h1>
         <button onClick={() => navigate(-1)} className="text-gray-600">
           <X className="w-6 h-6" />
         </button>
       </div>
 
-      <div className="flex flex-1 overflow-hidden relative">
+      <div className="flex flex-1 overflow-hidden relative m-4">
         <div className="w-[320px] border-r bg-white flex flex-col" data-testid="left-panel">
-          <div className="flex-1 overflow-y-auto p-4 pb-40" data-testid="content-area">
+          <div className="flex-1 overflow-y-auto pb-20 space-y-4 bg-gray-50" data-testid="content-area">
             <ContractSummary />
             <OrderDetails />
             <EntryExitDetails />
           </div>
-          <div className="absolute bottom-16 left-0 right-0 m-4 w-[290px] b-[55px]" data-testid="close-button-container">
+          <div className="absolute bottom-0 left-0 right-0 m-4 w-[290px] b-[55px]" data-testid="close-button-container">
             <div className="max-w-[1200px] mx-auto">
               <button
                 onClick={() => navigate(-1)}
@@ -39,7 +39,7 @@ const DesktopContractDetailsPage: React.FC = () => {
           </div>
         </div>
         <div className="flex-1 flex flex-col">
-          <div className="m-4 mb-20 bg-white rounded-lg border h-full text-gray-500 ">
+          <div className="ml-4 bg-white rounded-lg border h-full text-gray-500">
             <ContractDetailsChart />
           </div>
         </div>

src/screens/ContractDetailsPage/__tests__/DesktopContractDetailsPage.test.tsx

@@ -72,19 +72,19 @@ describe("DesktopContractDetailsPage", () => {
 
     // Check main container
     const mainContainer = screen.getByTestId("desktop-contract-details");
-    expect(mainContainer).toHaveClass("flex flex-col h-screen bg-gray-50 w-full");
+    expect(mainContainer).toHaveClass("flex flex-col bg-gray-50 w-full");
 
     // Check left panel
     const leftPanel = screen.getByTestId("left-panel");
     expect(leftPanel).toHaveClass("w-[320px] border-r bg-white flex flex-col");
 
     // Check content area
     const contentArea = screen.getByTestId("content-area");
-    expect(contentArea).toHaveClass("flex-1 overflow-y-auto p-4 pb-40");
+    expect(contentArea).toHaveClass("flex-1 overflow-y-auto pb-20 space-y-4 bg-gray-50");
 
     // Check close button container
     const closeButtonContainer = screen.getByTestId("close-button-container");
-    expect(closeButtonContainer).toHaveClass("absolute bottom-16 left-0 right-0 m-4 w-[290px] b-[55px]");
+    expect(closeButtonContainer).toHaveClass("absolute bottom-0 left-0 right-0 m-4 w-[290px] b-[55px]");
   });
 
   it("renders in correct order", () => {