Merge pull request #16 from deriv-com/shafin/ChampionTrader/feat-responsive-height-adjustment-real-device

chore: responsive height adjustment in real device

Author: shafin-deriv

src/layouts/MainLayout/MainLayout.tsx

@@ -12,11 +12,11 @@ export const MainLayout: React.FC<MainLayoutProps> = ({ children }) => {
   const { isLoggedIn } = useClientStore();
 
   return (
-    <div className="flex min-h-screen">
+    <div className="flex min-h-[100dvh] h-[100dvh]">
       <SideNav />
-      <div className="flex flex-col flex-1 relative">
+      <div className="flex flex-col flex-1 relative overflow-hidden">
         <Header className="sticky top-0 z-50" />
-        <main className="flex-1 flex flex-col overflow-y-auto">
+        <main className="flex-1 flex flex-col overflow-y-auto overflow-x-hidden">
           {children}
         </main>
         {isLoggedIn && <Footer className="sticky bottom-0 z-50" />}

src/layouts/MainLayout/__tests__/MainLayout.test.tsx

@@ -36,7 +36,6 @@ describe('MainLayout', () => {
     );
     // Check for base layout classes.
     expect(container.firstChild).toHaveClass('flex');
-    expect(container.firstChild).toHaveClass('min-h-screen');
   });
 
   it('does not render footer when user is logged out', () => {

src/screens/TradePage/TradePage.tsx

@@ -36,7 +36,7 @@ export const TradePage: React.FC = () => {
   };
 
   return (
-    <div className="flex flex-col flex-1 landscape:flex-row landscape:h-[100dvh] landscape:relative">
+    <div className="flex flex-col flex-1 landscape:flex-row landscape:h-[100dvh] h-[100dvh] landscape:relative">
       <div
         className="hidden landscape:block landscape:absolute landscape:top-0 landscape:left-0 landscape:right-0 landscape:bg-white landscape:z-10 border-b border-opacity-10"
         id="instrument-tab-bar"
@@ -65,7 +65,7 @@ export const TradePage: React.FC = () => {
           </div>
         </div>
 
-        <div className="flex flex-col flex-1 landscape:mt-[72px] h-[calc(100vh-200px)] landscape:h-[calc(100vh-72px)]">
+        <div className="flex flex-col flex-1 landscape:mt-[72px] h-[calc(100dvh-200px)] landscape:h-[calc(100dvh-72px)]">
           <Suspense fallback={<div>Loading...</div>}>
             <Chart className="flex-1" />
           </Suspense>