give open orders more horizontal space on mobile

components/shared/SideBadge.tsx

@@ -13,10 +13,10 @@ const SideBadge: FunctionComponent<SideBadgeProps> = ({ side }) => {
     <div
       className={`inline-block rounded uppercase ${
         side === 'buy' || side === 'long' || side === PerpOrderSide.bid
-          ? 'border border-th-up text-th-up'
-          : 'border border-th-down text-th-down'
+          ? 'text-th-up md:border md:border-th-up'
+          : 'text-th-down md:border md:border-th-down'
       }
-       -my-0.5 px-1 text-xs uppercase md:px-1.5 md:py-0.5`}
+       uppercase md:-my-0.5 md:px-1.5 md:py-0.5 md:text-xs`}
     >
       {typeof side === 'string'
         ? t(side)

components/trade/OpenOrders.tsx

@@ -415,13 +415,11 @@ const OpenOrders = () => {
                   className="flex items-center justify-between border-b border-th-bkg-3 p-4"
                   key={`${o.side}${o.size}${o.price}`}
                 >
-                  <div className="flex items-center space-x-2">
+                  <div>
                     <TableMarketName market={market} />
+                    <div className="mt-1 flex items-center space-x-1">
                       <SideBadge side={o.side} />
-                  </div>
-                  <div className="flex items-center space-x-3 pl-8">
-                    <div className="text-right">
-                      <p className="mb-0.5 text-th-fgd-4">
+                      <p className="text-th-fgd-4">
                         <span className="font-mono text-th-fgd-3">
                           {o.size.toLocaleString(undefined, {
                             maximumFractionDigits:
@@ -429,8 +427,7 @@ const OpenOrders = () => {
                           })}
                         </span>{' '}
                         {baseSymbol}
-                      </p>
-                      <p className="text-xs text-th-fgd-4">
+                        {' for '}
                         <span className="font-mono text-th-fgd-3">
                           {o.price.toLocaleString(undefined, {
                             minimumFractionDigits: getDecimalCount(tickSize),
@@ -440,6 +437,8 @@ const OpenOrders = () => {
                         {quoteSymbol}
                       </p>
                     </div>
+                  </div>
+                  <div className="flex items-center space-x-3 pl-8">
                     <div className="flex items-center space-x-2">
                       {modifyOrderId !== o.orderId.toString() ? (
                         <>