From 69e2565b871e002c28c6c1da1298584c5ceb6488 Mon Sep 17 00:00:00 2001
From: shafin-deriv <shafin@regentmarkets.com>
Date: Wed, 5 Feb 2025 09:36:20 +0800
Subject: [PATCH] chore: responsive height adjustment

---
 src/components/Chart/Chart.tsx        | 2 +-
 src/layouts/MainLayout/Footer.tsx     | 8 ++++++--
 src/layouts/MainLayout/Header.tsx     | 8 ++++++--
 src/layouts/MainLayout/MainLayout.tsx | 8 ++++----
 src/screens/TradePage/TradePage.tsx   | 4 ++--
 5 files changed, 19 insertions(+), 11 deletions(-)

diff --git a/src/components/Chart/Chart.tsx b/src/components/Chart/Chart.tsx
index e985553..c55a6d9 100644
--- a/src/components/Chart/Chart.tsx
+++ b/src/components/Chart/Chart.tsx
@@ -136,7 +136,7 @@ export const Chart: React.FC<ChartProps> = ({ className }) => {
 
   return (
     <div className={cn("flex flex-col flex-1", className)}>
-      <div className="flex-1 bg-white w-full rounded-lg relative min-h-[400px]">
+      <div className="flex-1 bg-white w-full rounded-lg relative h-full">
         {currentPrice && currentTime && (
           <div className="absolute top-4 left-4 bg-gray-100 p-2 rounded shadow-sm z-10">
             <div className="text-sm font-medium">VOLATILITY 100 (1S) INDEX</div>
diff --git a/src/layouts/MainLayout/Footer.tsx b/src/layouts/MainLayout/Footer.tsx
index a359f43..1dfb215 100644
--- a/src/layouts/MainLayout/Footer.tsx
+++ b/src/layouts/MainLayout/Footer.tsx
@@ -1,9 +1,13 @@
 import React from "react";
 import { BottomNav } from "@/components/BottomNav";
 
-export const Footer: React.FC = () => {
+interface FooterProps {
+  className?: string;
+}
+
+export const Footer: React.FC<FooterProps> = ({ className = '' }) => {
   return (
-    <footer className="border-t landscape:hidden">
+    <footer className={`border-t landscape:hidden ${className}`}>
       <BottomNav />
     </footer>
   );
diff --git a/src/layouts/MainLayout/Header.tsx b/src/layouts/MainLayout/Header.tsx
index 8fe1fc5..10b1c37 100644
--- a/src/layouts/MainLayout/Header.tsx
+++ b/src/layouts/MainLayout/Header.tsx
@@ -3,7 +3,11 @@ import { Menu } from 'lucide-react';
 import { useNavigate, useLocation } from 'react-router-dom';
 import { BalanceDisplay } from '@/components/BalanceDisplay';
 
-export const Header: React.FC = () => {
+interface HeaderProps {
+  className?: string;
+}
+
+export const Header: React.FC<HeaderProps> = ({ className = '' }) => {
   const navigate = useNavigate();
   const location = useLocation();
 
@@ -12,7 +16,7 @@ export const Header: React.FC = () => {
   };
 
   return (
-    <header className="flex items-center gap-4 px-4 py-2 landscape:hidden border-b border-opacity-10" id="header">
+    <header className={`flex items-center gap-4 px-4 py-2 landscape:hidden border-b border-opacity-10 bg-white ${className}`} id="header">
       <button 
         onClick={handleMenuClick}
         className={`flex flex-col items-center ${
diff --git a/src/layouts/MainLayout/MainLayout.tsx b/src/layouts/MainLayout/MainLayout.tsx
index 9e0ffaf..e7c3eb6 100644
--- a/src/layouts/MainLayout/MainLayout.tsx
+++ b/src/layouts/MainLayout/MainLayout.tsx
@@ -14,12 +14,12 @@ export const MainLayout: React.FC<MainLayoutProps> = ({ children }) => {
   return (
     <div className="flex min-h-screen">
       <SideNav />
-      <div className="flex flex-col flex-1">
-        <Header />
-        <main className="flex-1 flex flex-col">
+      <div className="flex flex-col flex-1 relative">
+        <Header className="sticky top-0 z-50" />
+        <main className="flex-1 flex flex-col overflow-y-auto">
           {children}
         </main>
-        {isLoggedIn && <Footer />}
+        {isLoggedIn && <Footer className="sticky bottom-0 z-50" />}
       </div>
     </div>
   );
diff --git a/src/screens/TradePage/TradePage.tsx b/src/screens/TradePage/TradePage.tsx
index 6319f23..026cd03 100644
--- a/src/screens/TradePage/TradePage.tsx
+++ b/src/screens/TradePage/TradePage.tsx
@@ -65,9 +65,9 @@ export const TradePage: React.FC = () => {
           </div>
         </div>
 
-        <div className="flex flex-col flex-1 landscape:mt-[72px]">
+        <div className="flex flex-col flex-1 landscape:mt-[72px] h-[calc(100vh-200px)] landscape:h-[calc(100vh-72px)]">
           <Suspense fallback={<div>Loading...</div>}>
-            <Chart className="flex-1 min-h-0" />
+            <Chart className="flex-1" />
           </Suspense>
         </div>