feat(trading): mobile responsiveness - market selector (#5582)

apps/trading/components/market-selector/market-selector-item.tsx

@@ -97,9 +97,9 @@ const MarketData = ({
 
   return (
     <>
-      <div className="w-2/5" role="gridcell">
+      <div className="w-2/6" role="gridcell">
         <h3 className="flex items-baseline">
-          <span className="overflow-hidden text-sm lg:text-base text-ellipsis whitespace-nowrap">
+          <span className="overflow-hidden text-xs md:text-sm lg:text-base text-ellipsis whitespace-nowrap">
             {market.tradableInstrument.instrument.code}
           </span>
           {allProducts && productType && (
@@ -113,7 +113,7 @@ const MarketData = ({
         )}
       </div>
       <div
-        className="w-1/5 overflow-hidden text-xs lg:text-sm whitespace-nowrap text-ellipsis"
+        className="w-2/6 overflow-hidden text-xs lg:text-sm whitespace-nowrap text-ellipsis text-right"
         title={symbol}
         data-testid="market-selector-price"
         role="gridcell"
@@ -121,14 +121,14 @@ const MarketData = ({
         {price} {symbol}
       </div>
       <div
-        className="w-1/5 overflow-hidden text-xs text-right lg:text-sm whitespace-nowrap text-ellipsis"
+        className="w-2/6 sm:w-1/6 overflow-hidden text-xs lg:text-sm whitespace-nowrap text-ellipsis text-right"
         title={t('24h vol')}
         data-testid="market-selector-volume"
         role="gridcell"
       >
         {volume}
       </div>
-      <div className="flex justify-end w-1/5" role="gridcell">
+      <div className="hidden sm:w-1/6 sm:flex justify-end" role="gridcell">
         {oneDayCandles && (
           <Sparkline
             width={64}

apps/trading/components/market-selector/market-selector.tsx

@@ -64,7 +64,7 @@ export const MarketSelector = ({
             setFilter((curr) => ({ ...curr, product }));
           }}
         />
-        <div className="text-sm grid grid-cols-[2fr_1fr_1fr] gap-1 ">
+        <div className="text-sm flex sm:grid grid-cols-[2fr_1fr_1fr] gap-1 ">
           <div className="flex-1">
             <TradingInput
               onChange={(e) =>
@@ -182,16 +182,16 @@ const MarketList = ({
           'p-2 mx-2 border-b border-default text-xs text-secondary'
         )}
       >
-        <div className="w-2/5" role="columnheader">
+        <div className="w-2/6" role="columnheader">
           {t('Name')}
         </div>
-        <div className="w-1/5" role="columnheader">
+        <div className="w-2/6 text-right pr-4" role="columnheader">
           {t('Price')}
         </div>
-        <div className="w-1/5 text-right" role="columnheader">
+        <div className="w-2/6 sm:w-1/6 text-right" role="columnheader">
           {t('24h volume')}
         </div>
-        <div className="w-1/5" role="columnheader" />
+        <div className="hidden sm:w-1/6" role="columnheader" />
       </div>
       <div ref={listRef}>
         <List

apps/trading/components/navbar/nav-header.tsx

@@ -5,6 +5,7 @@ import { useParams } from 'react-router-dom';
 import * as PopoverPrimitive from '@radix-ui/react-popover';
 import { useState } from 'react';
 import { useT } from '../../lib/use-t';
+import classNames from 'classnames';
 
 /**
  * This is only rendered for the mobile navigation
@@ -30,7 +31,16 @@ export const NavHeader = () => {
       trigger={
         <h1 className="flex gap-1 sm:gap-2 md:gap-4 items-center text-default text-lg whitespace-nowrap xl:pr-4 xl:border-r border-default">
           {data ? data.tradableInstrument.instrument.code : t('Select market')}
-          <VegaIcon name={VegaIconNames.CHEVRON_DOWN} size={20} />
+          <span
+            className={classNames(
+              'transition-transform ease-in-out duration-300',
+              {
+                'rotate-180': open,
+              }
+            )}
+          >
+            <VegaIcon name={VegaIconNames.CHEVRON_DOWN} size={20} />
+          </span>
         </h1>
       }
     >