full width account tabs on mobile

components/account/AccountTabs.tsx

@@ -7,6 +7,8 @@ import ActivityFeed from './ActivityFeed'
 import UnsettledTrades from '@components/trade/UnsettledTrades'
 import { useUnsettledSpotBalances } from 'hooks/useUnsettledSpotBalances'
 import useMangoAccount from 'hooks/useMangoAccount'
+import { useViewport } from 'hooks/useViewport'
+import { breakpoints } from 'utils/theme'
 
 const TABS = [
   'balances',
@@ -19,6 +21,8 @@ const AccountTabs = () => {
   const [activeTab, setActiveTab] = useState('balances')
   const actions = mangoStore((s) => s.actions)
   const { mangoAccount } = useMangoAccount()
+  const { width } = useViewport()
+  const isMobile = width ? width < breakpoints.md : false
 
   const tabsWithCount: [string, number][] = useMemo(() => {
     return TABS.map((t) => [t, 0])
@@ -37,6 +41,7 @@ const AccountTabs = () => {
         onChange={(v) => setActiveTab(v)}
         values={tabsWithCount}
         showBorders
+        fillWidth={isMobile}
       />
       <TabContent activeTab={activeTab} />
     </>

components/trade/RecentTrades.tsx

@@ -24,8 +24,8 @@ const RecentTrades = () => {
     SOUND_SETTINGS_KEY,
     INITIAL_SOUND_SETTINGS
   )
-  const currentFillsData = useRef<any>(null)
-  const nextFillsData = useRef<any>(null)
+  const currentFillsData = useRef<any>([])
+  const nextFillsData = useRef<any>([])
 
   const buySound = new Howl({
     src: ['/sounds/trade-buy.mp3'],
@@ -63,10 +63,12 @@ const RecentTrades = () => {
         currentFillsData.current = fills
       }
       if (
-        nextFillsData?.current &&
+        nextFillsData.current.length &&
         !isEqual(currentFillsData.current, nextFillsData.current)
       ) {
-        fills[0].side === 'buy' ? buySound.play() : sellSound.play()
+        nextFillsData.current[0].side === 'buy'
+          ? buySound.play()
+          : sellSound.play()
       }
     }
   }, 1000)