From 99dc0f2389d7a84b4adf23203837b485299d884c Mon Sep 17 00:00:00 2001
From: saml33 <slam.uke@gmail.com>
Date: Fri, 9 Feb 2024 11:29:11 +1100
Subject: [PATCH] trade page order scrolling

---
 components/StatusBar.tsx               | 6 ++----
 components/trade/TradeAdvancedPage.tsx | 2 +-
 components/trade/TradeInfoTabs.tsx     | 8 +++++---
 3 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/components/StatusBar.tsx b/components/StatusBar.tsx
index 4908f762..96267cef 100644
--- a/components/StatusBar.tsx
+++ b/components/StatusBar.tsx
@@ -7,7 +7,6 @@ import { useEffect, useMemo, useState } from 'react'
 import { IDL } from '@blockworks-foundation/mango-v4'
 import RpcPing from './RpcPing'
 import Tooltip from './shared/Tooltip'
-import { useRouter } from 'next/router'
 import useOffchainServicesHealth from 'hooks/useOffchainServicesHealth'
 import mangoStore from '@store/mangoStore'
 import { Connection } from '@solana/web3.js'
@@ -94,7 +93,6 @@ const getOverallStatus = (
 const StatusBar = ({ collapsed }: { collapsed: boolean }) => {
   const { t } = useTranslation('common')
   const [latestCommit, setLatestCommit] = useState(DEFAULT_LATEST_COMMIT)
-  const router = useRouter()
   const { offchainHealth, isLoading: loadingOffchainHealth } =
     useOffchainServicesHealth()
   const connection = mangoStore((s) => s.connection)
@@ -210,7 +208,7 @@ const StatusBar = ({ collapsed }: { collapsed: boolean }) => {
         ) : null}
       </div>
       <div className="col-span-1 flex items-center justify-end space-x-4 text-xs">
-        {router.asPath.includes('/trade') ? (
+        {/* {router.asPath.includes('/trade') ? (
           <a
             className="flex items-center text-th-fgd-3 focus:outline-none md:hover:text-th-fgd-2"
             href="https://www.tradingview.com/"
@@ -219,7 +217,7 @@ const StatusBar = ({ collapsed }: { collapsed: boolean }) => {
           >
             <span>Powered by TradingView</span>
           </a>
-        ) : null}
+        ) : null} */}
         <a
           className="flex items-center text-th-fgd-3 focus:outline-none md:hover:text-th-fgd-2"
           href="https://docs.mango.markets"
diff --git a/components/trade/TradeAdvancedPage.tsx b/components/trade/TradeAdvancedPage.tsx
index a406ae4d..b31e03fd 100644
--- a/components/trade/TradeAdvancedPage.tsx
+++ b/components/trade/TradeAdvancedPage.tsx
@@ -288,7 +288,7 @@ const TradeAdvancedPage = () => {
         <MobileTradeAdvancedPage />
       ) : (
         <TradeHotKeys>
-          <div className="border-b border-th-bkg-3">
+          <div>
             <FavoriteMarketsBar />
             <ResponsiveGridLayout
               layouts={layouts}
diff --git a/components/trade/TradeInfoTabs.tsx b/components/trade/TradeInfoTabs.tsx
index 7b81019e..0bc2f3cd 100644
--- a/components/trade/TradeInfoTabs.tsx
+++ b/components/trade/TradeInfoTabs.tsx
@@ -57,8 +57,8 @@ const TradeInfoTabs = () => {
   ])
 
   return (
-    <div className="hide-scroll h-full overflow-y-scroll">
-      <div className="hide-scroll flex items-center overflow-x-auto border-b border-th-bkg-3">
+    <div className="h-full">
+      <div className="hide-scroll flex w-full items-center overflow-x-auto border-b border-th-bkg-3 lg:fixed lg:top-0 lg:z-10">
         <div className="w-full md:w-auto md:border-r md:border-th-bkg-3 lg:w-full">
           <TabButtons
             activeValue={selectedTab}
@@ -74,7 +74,9 @@ const TradeInfoTabs = () => {
           size={isTablet ? 'large' : 'small'}
         />
       </div>
-      <TabContent selectedTab={selectedTab} />
+      <div className="thin-scroll overflow-y-auto md:h-[calc(100%-48px)] lg:relative lg:top-12">
+        <TabContent selectedTab={selectedTab} />
+      </div>
     </div>
   )
 }