diff --git a/components/account/AccountTabs.tsx b/components/account/AccountTabs.tsx
index 48bca7ae..3304350c 100644
--- a/components/account/AccountTabs.tsx
+++ b/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}
/>
diff --git a/components/swap/SwapInfoTabs.tsx b/components/swap/SwapInfoTabs.tsx
index be225155..fe416974 100644
--- a/components/swap/SwapInfoTabs.tsx
+++ b/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 (
-
setSelectedTab(tab)}
- values={tabsWithCount}
- showBorders
- />
+
+ setSelectedTab(tab)}
+ values={tabsWithCount}
+ showBorders
+ />
+
diff --git a/components/trade/AdvancedMarketHeader.tsx b/components/trade/AdvancedMarketHeader.tsx
index 9c02adee..d87a4cec 100644
--- a/components/trade/AdvancedMarketHeader.tsx
+++ b/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 = ({
)}
-
setShowMarketDetails(true)}
diff --git a/components/trade/TradeInfoTabs.tsx b/components/trade/TradeInfoTabs.tsx
index 41168ea8..2d1fb633 100644
--- a/components/trade/TradeInfoTabs.tsx
+++ b/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 (
-
-
setSelectedTab(tab)}
- values={tabsWithCount}
- showBorders
- fillWidth={isMobile}
+
+
+ setSelectedTab(tab)}
+ values={tabsWithCount}
+ showBorders
+ fillWidth={fillTabWidth}
+ />
+
+
{selectedTab === 'balances' ? : null}
diff --git a/pages/trade.tsx b/pages/trade.tsx
index 5fba68df..c6f48989 100644
--- a/pages/trade.tsx
+++ b/pages/trade.tsx
@@ -88,7 +88,7 @@ const Trade: NextPage = () => {
}, [marketName])
return (
-