trade page order scrolling

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"

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}

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,8 +74,10 @@ const TradeInfoTabs = () => {
           size={isTablet ? 'large' : 'small'}
         />
       </div>
+      <div className="thin-scroll overflow-y-auto md:h-[calc(100%-48px)] lg:relative lg:top-12">
         <TabContent selectedTab={selectedTab} />
       </div>
+    </div>
   )
 }