move manual refresh on trade page

components/account/AccountTabs.tsx

@@ -24,7 +24,7 @@ const AccountTabs = () => {
   const unsettledPerpPositions = useUnsettledPerpPositions()
   const openPerpPositions = useOpenPerpPositions()
   const openOrders = mangoStore((s) => s.mangoAccount.openOrders)
-  const isMobile = width ? width < breakpoints.lg : false
+  const isMobile = width ? width < breakpoints.md : false
   const { data: isWhiteListed } = useIsWhiteListed()
 
   const tabsWithCount: [string, number][] = useMemo(() => {
@@ -66,7 +66,7 @@ const AccountTabs = () => {
           fillWidth={isMobile}
         />
         <ManualRefresh
-          classNames="fixed bottom-16 right-4 lg:relative lg:bottom-0 md:bottom-6 md:right-6 z-10 shadow-lg lg:shadow-none bg-th-bkg-3 lg:bg-transparent"
+          classNames="fixed bottom-16 right-4 md:relative md:px-2 lg:px-0 lg:pr-6 md:bottom-0 md:right-0 z-10 shadow-lg md:shadow-none bg-th-bkg-3 md:bg-transparent"
           hideBg={isMobile}
           size={isMobile ? 'large' : 'small'}
         />

components/swap/SwapInfoTabs.tsx

@@ -14,7 +14,7 @@ const SwapInfoTabs = () => {
   const { mangoAccount } = useMangoAccount()
   const { width } = useViewport()
   const { data: isWhiteListed } = useIsWhiteListed()
-  const isMobile = width ? width < breakpoints.lg : false
+  const isMobile = width ? width < breakpoints.md : false
 
   const tabsWithCount: [string, number][] = useMemo(() => {
     const tabs: [string, number][] = [
@@ -33,14 +33,16 @@ const SwapInfoTabs = () => {
   return (
     <div className="hide-scroll h-full overflow-y-scroll">
       <div className="flex items-center border-b border-th-bkg-3">
+        <div className="w-full md:border-r md:border-th-bkg-3">
           <TabButtons
             activeValue={selectedTab}
             onChange={(tab: string) => setSelectedTab(tab)}
             values={tabsWithCount}
             showBorders
           />
+        </div>
         <ManualRefresh
-          classNames="fixed bottom-16 right-4 lg:relative lg:bottom-0 md:bottom-6 md:right-6 z-10 shadow-lg lg:shadow-none bg-th-bkg-3 lg:bg-transparent"
+          classNames="fixed bottom-16 right-4 md:relative md:px-2 md:bottom-0 md:right-0 z-10 shadow-lg md:shadow-none bg-th-bkg-3 md:bg-transparent"
           hideBg={isMobile}
           size={isMobile ? 'large' : 'small'}
         />

components/trade/AdvancedMarketHeader.tsx

@@ -13,9 +13,6 @@ import PerpMarketDetailsModal from '@components/modals/PerpMarketDetailsModal'
 import OraclePrice from './OraclePrice'
 import SpotMarketDetailsModal from '@components/modals/SpotMarketDetailsModal'
 import { MarketData } from 'types'
-import ManualRefresh from '@components/shared/ManualRefresh'
-import { useViewport } from 'hooks/useViewport'
-import { breakpoints } from 'utils/theme'
 import MarketChange from '@components/shared/MarketChange'
 import useMarketsData from 'hooks/useMarketsData'
 
@@ -30,8 +27,6 @@ const AdvancedMarketHeader = ({
   const { serumOrPerpMarket, selectedMarket } = useSelectedMarket()
   const selectedMarketName = mangoStore((s) => s.selectedMarket.name)
   const [showMarketDetails, setShowMarketDetails] = useState(false)
-  const { width } = useViewport()
-  const isMobile = width ? width < breakpoints.md : false
   const { data: marketsData, isLoading, isFetching } = useMarketsData()
 
   const volume = useMemo(() => {
@@ -142,10 +137,6 @@ const AdvancedMarketHeader = ({
             )}
           </div>
           <div className="ml-6 flex items-center space-x-4">
-            <ManualRefresh
-              hideBg={isMobile}
-              size={isMobile ? undefined : 'small'}
-            />
             <LinkButton
               className="flex items-center whitespace-nowrap text-th-fgd-3"
               onClick={() => setShowMarketDetails(true)}

components/trade/TradeInfoTabs.tsx

@@ -11,6 +11,7 @@ import { breakpoints } from 'utils/theme'
 import useUnsettledPerpPositions from 'hooks/useUnsettledPerpPositions'
 import TradeHistory from './TradeHistory'
 import useOpenPerpPositions from 'hooks/useOpenPerpPositions'
+import ManualRefresh from '@components/shared/ManualRefresh'
 
 const TradeInfoTabs = () => {
   const [selectedTab, setSelectedTab] = useState('balances')
@@ -20,7 +21,8 @@ const TradeInfoTabs = () => {
   const unsettledPerpPositions = useUnsettledPerpPositions()
   const openPerpPositions = useOpenPerpPositions()
   const { width } = useViewport()
-  const isMobile = width ? width < breakpoints['2xl'] : false
+  const isMobile = width ? width < breakpoints.md : false
+  const fillTabWidth = width ? width < breakpoints['2xl'] : false
 
   useEffect(() => {
     if (selectedMarketName && selectedMarketName.includes('PERP')) {
@@ -48,13 +50,20 @@ const TradeInfoTabs = () => {
 
   return (
     <div className="hide-scroll h-full overflow-y-scroll">
-      <div className="hide-scroll overflow-x-auto border-b border-th-bkg-3">
+      <div className="hide-scroll flex items-center overflow-x-auto border-b border-th-bkg-3">
+        <div className="md:border-r md:border-th-bkg-3 lg:w-full">
           <TabButtons
             activeValue={selectedTab}
             onChange={(tab: string) => setSelectedTab(tab)}
             values={tabsWithCount}
             showBorders
-          fillWidth={isMobile}
+            fillWidth={fillTabWidth}
+          />
+        </div>
+        <ManualRefresh
+          classNames="fixed bottom-16 right-4 md:relative md:px-2 md:bottom-0 md:right-0 z-10 shadow-lg md:shadow-none bg-th-bkg-3 md:bg-transparent"
+          hideBg={isMobile}
+          size={isMobile ? 'large' : 'small'}
         />
       </div>
       {selectedTab === 'balances' ? <SwapTradeBalances /> : null}

pages/trade.tsx

@@ -88,7 +88,7 @@ const Trade: NextPage = () => {
   }, [marketName])
 
   return (
-    <div className="pb-16 md:pb-0">
+    <div className="pb-32 md:pb-0">
       <TradeAdvancedPage />
     </div>
   )