fix: some style fixes

webapp/src/components/AssetImage/AssetImage.css

@@ -334,6 +334,7 @@
     width: 100%;
     bottom: -110px;
     padding-top: 20px;
+    height: 84px;
   }
   .AssetImage .rarity-background,
   .AssetImage .WearablePreview {

webapp/src/components/AssetPage/BestBuyingOption/BestBuyingOption.spec.tsx

@@ -143,11 +143,7 @@ describe('Best Buying Option', () => {
         <BestBuyingOption asset={asset} tableRef={reference} />
       )
 
-      const loader = await findByTestId('loader')
-
-      await waitFor(() => {
-        expect(loader).not.toBeInTheDocument()
-      })
+      await findByTestId('best-buying-option-container')
 
       expect(
         getByText(t('best_buying_option.buy_listing.title'), { exact: false })
@@ -160,11 +156,7 @@ describe('Best Buying Option', () => {
         <BestBuyingOption asset={asset} tableRef={reference} />
       )
 
-      const loader = await findByTestId('loader')
-
-      await waitFor(() => {
-        expect(loader).not.toBeInTheDocument()
-      })
+      await findByTestId('best-buying-option-container')
 
       const price = formatWeiMANA(orderResponse.price)
 
@@ -194,11 +186,7 @@ describe('Best Buying Option', () => {
         <BestBuyingOption asset={asset} tableRef={reference} />
       )
 
-      const loader = await findByTestId('loader')
-
-      await waitFor(() => {
-        expect(loader).not.toBeInTheDocument()
-      })
+      await findByTestId('best-buying-option-container')
 
       expect(getByText(t('best_buying_option.empty.title'))).toBeInTheDocument()
     })

webapp/src/components/AssetPage/BestBuyingOption/BestBuyingOption.tsx

@@ -12,7 +12,7 @@ import {
   OrderSortBy,
   Rarity
 } from '@dcl/schemas'
-import { Button, Loader, Popup } from 'decentraland-ui'
+import { Button, Popup } from 'decentraland-ui'
 import { formatDistanceToNow } from '../../../lib/date'
 import { locations } from '../../../modules/routing/locations'
 import { isNFT } from '../../../modules/asset/utils'
@@ -116,19 +116,16 @@ const BestBuyingOption = ({ asset, tableRef }: Props) => {
     buyWithCardClassName: styles.buyWithCardClassName
   }
 
-  return (
+  return isLoading ? null : (
     <div
+      data-testid="best-buying-option-container"
       className={
         buyOption === BuyOptions.MINT || buyOption === BuyOptions.BUY_LISTING
           ? `${styles.BestBuyingOption} ${styles.AlignEnd}`
           : styles.BestBuyingOption
       }
     >
-      {isLoading ? (
-        <div className={styles.emptyContainer}>
-          <Loader active data-testid="loader" />
-        </div>
-      ) : buyOption === BuyOptions.MINT && asset && !isNFT(asset) ? (
+      {buyOption === BuyOptions.MINT && asset && !isNFT(asset) ? (
         <div className={`${styles.containerColumn} ${styles.fullWidth}`}>
           <span className={styles.cardTitle}>
             {t('best_buying_option.minting.title')}&nbsp;

webapp/src/components/AssetPage/Description/Description.module.css

@@ -2,12 +2,7 @@
   font-size: 14px;
   line-height: 26px;
   letter-spacing: 0.2px;
-}
-
-.Description .descriptionContained {
-  font-size: 14px;
-  line-height: 26px;
-  letter-spacing: 0.2px;
+  word-wrap: break-word;
 }
 
 .Description .readMore {

webapp/src/components/AssetPage/Description/Description.tsx

@@ -4,7 +4,7 @@ import { t } from 'decentraland-dapps/dist/modules/translation/utils'
 import { Props } from './Description.types'
 import styles from './Description.module.css'
 
-const MAX_LENGTH = 81
+const MAX_LENGTH = 148
 
 const Description = (props: Props) => {
   const { text } = props
@@ -14,22 +14,21 @@ const Description = (props: Props) => {
   return (
     <div className={styles.Description}>
       <Header sub>{t('asset_page.description')}</Header>
-      <div
-        className={
-          hasMoreLines && showMore
-            ? styles.descriptionText
-            : styles.descriptionContained
-        }
-        id="text-container"
-      >
-        {text ? text : t('asset_page.no_description')}
+      <div className={styles.descriptionText} id="text-container">
+        {text
+          ? hasMoreLines && !showMore
+            ? `${text.substring(0, MAX_LENGTH)}...`
+            : text
+          : t('asset_page.no_description')}
       </div>
       {hasMoreLines ? (
         <span
           onClick={() => setShowMore(prevState => !prevState)}
           className={styles.readMore}
         >
-          {t('asset_page.read_more').toLocaleUpperCase()}
+          {showMore
+            ? t('asset_page.read_less').toLocaleUpperCase()
+            : t('asset_page.read_more').toLocaleUpperCase()}
         </span>
       ) : null}
     </div>

webapp/src/components/AssetPage/ItemDetail/ItemDetail.module.css

@@ -55,7 +55,7 @@
   margin-left: 0px;
 }
 
-@media (max-width: 800px) {
+@media (max-width: 1000px) {
   .ItemDetail .information {
     width: 100%;
   }
@@ -66,9 +66,6 @@
   .ItemDetail .assetImageContainer {
     width: 100%;
   }
-  .ItemDetail .basicRow {
-    flex-direction: column;
-  }
 
   .ItemDetail :global(.dcl.stats + .dcl.stats) {
     width: 100%;
@@ -93,6 +90,9 @@
   .ItemDetail .basicRow :global(.dcl.stats) {
     width: 100%;
   }
+  .ItemDetail .basicRow {
+    flex-direction: column;
+  }
 
   .ItemDetail :global(.dcl.tabs) {
     justify-content: space-evenly;

webapp/src/modules/translation/locales/en.json

@@ -527,6 +527,7 @@
     "description": "Description",
     "no_description": "No description",
     "read_more": "Read more",
+    "read_less": "Read less",
     "owner": "Owner",
     "creator": "Creator",
     "price": "Price",

webapp/src/modules/translation/locales/es.json

@@ -521,6 +521,7 @@
     "description": "Descripción",
     "no_description": "Sin descripción",
     "read_more": "Leer más",
+    "read_less": "Leer menos",
     "owner": "Dueño",
     "creator": "Creador",
     "price": "Precio",

webapp/src/modules/translation/locales/zh.json

@@ -524,6 +524,7 @@
     "description": "描述",
     "no_description": "沒有說明",
     "read_more": "閱讀更多",
+    "read_less": "少讀",
     "owner": "持有者",
     "creator": "创造者",
     "price": "价格",