allow positions and trade history tables to scroll horizontally

components/trade/PerpPositions.tsx

@@ -72,7 +72,8 @@ const PerpPositions = () => {
   )
 
   return mangoAccountAddress && openPerpPositions.length ? (
-    <div>
+    <>
+      <div className="thin-scroll overflow-x-auto">
         <Table>
           <thead>
             <TrHead>
@@ -105,10 +106,8 @@ const PerpPositions = () => {
               if (!basePosition) return null
 
               const unsettledPnl = position.getUnsettledPnlUi(group, market)
-            const cummulativePnl = position.cumulativePnlOverPositionLifetimeUi(
-              group,
-              market
-            )
+              const cummulativePnl =
+                position.cumulativePnlOverPositionLifetimeUi(group, market)
 
               return (
                 <TrBody key={`${position.marketIndex}`} className="my-1 p-2">
@@ -180,6 +179,7 @@ const PerpPositions = () => {
             })}
           </tbody>
         </Table>
+      </div>
       {showMarketCloseModal && positionToClose ? (
         <MarketCloseModal
           isOpen={showMarketCloseModal}
@@ -187,7 +187,7 @@ const PerpPositions = () => {
           position={positionToClose}
         />
       ) : null}
-    </div>
+    </>
   ) : mangoAccountAddress || connected ? (
     <div className="flex flex-col items-center p-8">
       <NoSymbolIcon className="mb-2 h-6 w-6 text-th-fgd-4" />

components/trade/TradeHistory.tsx

@@ -240,6 +240,7 @@ const TradeHistory = () => {
     (combinedTradeHistory.length || loadingTradeHistory) ? (
     <>
       {showTableView ? (
+        <div className="thin-scroll overflow-x-auto">
           <Table>
             <thead>
               <TrHead>
@@ -322,6 +323,7 @@ const TradeHistory = () => {
               })}
             </tbody>
           </Table>
+        </div>
       ) : (
         <div>
           {combinedTradeHistory.map((trade: any, index: number) => {