Feature/800 cut lbls

src/components/auction/AuctionDetails/index.tsx

@@ -75,6 +75,7 @@ const CellPair = styled.div`
 `
 
 const Cell = styled(KeyValue)`
+  height: 100%;
   .itemKey {
     color: ${({ theme }) => rgba(theme.text1, 0.9)};
     font-size: 15px;
@@ -92,12 +93,15 @@ const Cell = styled(KeyValue)`
   .itemValue {
     color: ${({ theme }) => theme.text1};
     flex-direction: column;
-    flex-grow: 0;
+    flex-grow: 1;
     font-size: 18px;
     font-weight: 600;
     line-height: 1.2;
     margin-bottom: 0;
   }
+  @media (min-width: 1024px) {
+    height: auto;
+  }
 `
 
 const BreakCSS = css`
@@ -147,7 +151,9 @@ const TokenSymbol = styled.span`
   line-height: 1.4;
   margin-bottom: 0;
   justify-content: center;
-  white-space: nowrap;
+  white-space: normal;
+  flex-direction: column;
+  text-align: center;
 
   .tokenLogo {
     margin-top: -4px;
@@ -156,6 +162,11 @@ const TokenSymbol = styled.span`
   & > * {
     margin-right: 0;
   }
+  @media (min-width: 768px) {
+    flex-direction: row;
+    white-space: nowrap;
+    text-align: left;
+  }
 `
 
 const TokenText = styled.span`

src/components/auctions/AllAuctions/index.tsx

@@ -533,7 +533,6 @@ const AllAuctions = (props: Props) => {
     previousPage()
     sectionHead.current.scrollIntoView()
   }
-
   return (
     <Wrapper ref={sectionHead} {...restProps}>
       <SectionTitle style={{ display: 'block' }}>Auctions</SectionTitle>
@@ -611,15 +610,20 @@ const AllAuctions = (props: Props) => {
                     key={i}
                     to={row.original['url'] ? row.original['url'] : '#'}
                   >
-                    {row.cells.map(
-                      (cell, j) =>
+                    {row.cells.map((cell, j) => {
+                      return (
                         cell.render('show') && (
                           <TableCell key={j}>
-                            <span>{cell.render('Cell')}</span>
+                            <span>
+                              {cell.column.Header === 'Selling' || cell.column.Header === 'Buying'
+                                ? cell.value.slice(0, 7)
+                                : cell.value}
+                            </span>
                             <span>{cell.render('Header')}</span>
                           </TableCell>
-                        ),
-                    )}
+                        )
+                      )
+                    })}
                   </RowLink>
                 )
               })}

src/components/auctions/AuctionInfoCard/index.tsx

@@ -49,7 +49,7 @@ const Tokens = styled.span`
   line-height: 1.2;
   margin: 0;
   text-transform: uppercase;
-  white-space: nowrap;
+  white-space: normal;
 `
 
 const Badge = styled.span`
@@ -213,7 +213,9 @@ const AuctionInfoCard: React.FC<Props> = (props) => {
     }, 1000)
     return () => clearInterval(interval)
   }, [endTimeTimestamp])
-
+  const sliceLabel = (label) => {
+    return label.slice(0, 7)
+  }
   return (
     <Wrapper
       to={`/auction?auctionId=${auctionInfo.auctionId}&chainId=${Number(
@@ -223,7 +225,8 @@ const AuctionInfoCard: React.FC<Props> = (props) => {
     >
       <Top>
         <Tokens>
-          {auctionInfo.symbolAuctioningToken} / {auctionInfo.symbolBiddingToken}
+          {sliceLabel(auctionInfo.symbolAuctioningToken)} /&nbsp;
+          {sliceLabel(auctionInfo.symbolBiddingToken)}
         </Tokens>
         <Badge>{timeLeft && timeLeft > -1 ? formatSeconds(timeLeft) : '-'}</Badge>
       </Top>
@@ -244,13 +247,13 @@ const AuctionInfoCard: React.FC<Props> = (props) => {
           <span title={auctionInfo.order.volume + ' ' + auctionInfo.symbolAuctioningToken}>
             {abbreviation(auctionInfo.order.volume.toFixed(2)) + ` `}
           </span>
-          {auctionInfo.symbolAuctioningToken}
+          {sliceLabel(auctionInfo.symbolAuctioningToken)}
         </Selling>
         <CurrentPrice>
           Current price:{' '}
-          {`${abbreviation(auctionInfo.currentClearingPrice.toString())} ${
-            auctionInfo.symbolBiddingToken
-          } per ${auctionInfo.symbolAuctioningToken}`}
+          {`${abbreviation(auctionInfo.currentClearingPrice.toString())} ${sliceLabel(
+            auctionInfo.symbolBiddingToken,
+          )} per ${sliceLabel(auctionInfo.symbolAuctioningToken)}`}
         </CurrentPrice>
       </Details>
       <Bottom>

src/components/token/UnregisteredToken/index.tsx

@@ -47,7 +47,9 @@ export const UnregisteredToken: React.FC<Props> = (props) => {
   const { size, symbol, ...restProps } = props
   const timestamp = React.useMemo(() => Date.now(), [])
   const tooltipId = `tooltip_${symbol}_${size}_${timestamp}`
-
+  const sliceLabel = (label) => {
+    return label.slice(0, 7)
+  }
   return (
     <Wrapper
       data-for={tooltipId}
@@ -58,7 +60,7 @@ export const UnregisteredToken: React.FC<Props> = (props) => {
       {...restProps}
     >
       <Icon />
-      <Badge size={size}>{symbol}</Badge>
+      <Badge size={size}>{sliceLabel(symbol)}</Badge>
       <ReactTooltip
         arrowColor={'#001429'}
         backgroundColor={'#001429'}

src/utils/index.ts

@@ -188,7 +188,9 @@ export function escapeRegExp(string: string): string {
 export function getTokenDisplay(token: Token, chainId: ChainId): string {
   if (isTokenXDAI(token.address, chainId)) return `XDAI`
   if (isTokenWETH(token.address, chainId)) return `ETH`
-  return token?.symbol || token?.name || token?.address || '🤔'
+  return (
+    token?.symbol?.slice(0, 7) || token?.name?.slice(0, 7) || token?.address.slice(0, 7) || '🤔'
+  )
 }
 
 export function isTokenXDAI(tokenAddress?: string, chainId?: ChainId): boolean {