fix horizontal overflow on mobile account page

components/account/AccountOverview.tsx

@@ -73,7 +73,7 @@ const AccountOverview = () => {
         <div className="col-span-12 border-b border-th-bkg-3 pt-4 md:col-span-8 md:border-b-0 md:border-r">
           <div className="flex h-full w-full flex-col justify-between">
             {mangoAccount || (connected && initialLoad) ? (
-              <div className="px-4 pb-4 md:px-6">
+              <div className="overflow-x-hidden px-4 pb-4 md:px-6">
                 <DetailedAreaOrBarChart
                   changeAsPercent
                   data={chartData}

components/explore/Explore.tsx

@@ -44,7 +44,7 @@ const Explore = () => {
         </h2>
       </div>
       <RecentGainersLosers />
-      <div className="z-10 w-max px-4 pt-8 md:px-6">
+      <div className="z-10 px-4 pt-8 md:px-6">
         <div
           className={`flex h-10 flex-col items-center justify-end md:items-start ${
             activeTab === 'tokens' ? 'mb-4 lg:mb-0' : ''

components/shared/TabsText.tsx

@@ -13,10 +13,10 @@ const TabsText = ({
 }) => {
   const { t } = useTranslation(['common', 'account', 'trade'])
   return (
-    <div className="flex space-x-6 text-base">
+    <div className="flex space-x-4 text-base sm:space-x-6">
       {tabs.map((tab) => (
         <button
-          className={`flex items-center space-x-2 font-bold focus:outline-none ${
+          className={`flex items-center space-x-2 font-bold leading-tight focus:outline-none ${
             activeTab === tab[0]
               ? 'text-th-active md:hover:text-th-active'
               : 'text-th-fgd-2 md:hover:text-th-fgd-3'