Merge pull request #15 from deriv-com/shafin/ChampionTrader/feat-resp…

…onsive-height-adjustment chore: responsive height adjustment
deriv-com · Feb 5, 2025 · 5338480 · 5338480
2 parents 5ee6b42 + 69e2565
commit 5338480
Show file tree

Hide file tree

Showing 5 changed files with 19 additions and 11 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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>