From f0732e05229e6c0f19e35eb038ec032805f3ee2d Mon Sep 17 00:00:00 2001
From: Radu Mojic <radu.mojic@multiversx.com>
Date: Fri, 15 Mar 2024 17:37:54 +0200
Subject: [PATCH] - interface fixes - avoi link over whitespace on most used

---
 .../VerifiedBadge/VerifiedBadge.tsx           |  2 +-
 .../VerifiedBadge/verifiedBadge.styles.scss   |  7 +-
 src/widgets/MostUsed/MostUsedCollections.tsx  | 68 +++++++++----------
 src/widgets/MostUsed/MostUsedTokens.tsx       | 48 +++++++------
 4 files changed, 61 insertions(+), 64 deletions(-)

diff --git a/src/components/HeroDetailsCard/components/VerifiedBadge/VerifiedBadge.tsx b/src/components/HeroDetailsCard/components/VerifiedBadge/VerifiedBadge.tsx
index e27f2f134..608435943 100644
--- a/src/components/HeroDetailsCard/components/VerifiedBadge/VerifiedBadge.tsx
+++ b/src/components/HeroDetailsCard/components/VerifiedBadge/VerifiedBadge.tsx
@@ -5,7 +5,7 @@ import { faBadgeCheck } from 'icons/solid';
 export const VerifiedBadge = () => (
   <div className='verified-badge-wrapper'>
     <div className='verified-badge'>
-      <span className='d-none d-md-inline-block'>Verified</span>{' '}
+      <span className='d-none d-md-inline-block me-2'>Verified</span>{' '}
       <FontAwesomeIcon icon={faBadgeCheck} size='sm' />
     </div>
   </div>
diff --git a/src/components/HeroDetailsCard/components/VerifiedBadge/verifiedBadge.styles.scss b/src/components/HeroDetailsCard/components/VerifiedBadge/verifiedBadge.styles.scss
index 2229268ae..043e7f75b 100644
--- a/src/components/HeroDetailsCard/components/VerifiedBadge/verifiedBadge.styles.scss
+++ b/src/components/HeroDetailsCard/components/VerifiedBadge/verifiedBadge.styles.scss
@@ -1,6 +1,9 @@
 .verified-badge-wrapper {
-  display: inline-block;
-  vertical-align: middle;
+  display: inline-flex;
+  @include media-breakpoint-up(md) {
+    display: inline-block;
+    vertical-align: middle;
+  }
   .verified-badge {
     display: flex;
     align-items: center;
diff --git a/src/widgets/MostUsed/MostUsedCollections.tsx b/src/widgets/MostUsed/MostUsedCollections.tsx
index bbf027111..ea4a6ac51 100644
--- a/src/widgets/MostUsed/MostUsedCollections.tsx
+++ b/src/widgets/MostUsed/MostUsedCollections.tsx
@@ -48,46 +48,42 @@ export const MostUsedCollections = ({
                   <td>
                     <NetworkLink
                       to={urlBuilder.collectionDetails(collection.key)}
-                      className={`d-flex text-truncate text-primary-200 ${
+                      className={`d-flex align-items-center symbol trim text-truncate text-primary-200 w-min-content ${
                         collection.extraInfo?.assets?.svgUrl ? 'side-link' : ''
                       }`}
                     >
-                      <div className='d-flex align-items-center symbol trim text-truncate'>
-                        {collection.extraInfo?.assets ? (
-                          <>
-                            {collection.extraInfo.assets?.svgUrl && (
-                              <img
-                                src={collection.extraInfo.assets.svgUrl}
-                                alt={
-                                  collection.extraInfo?.name ?? collection.key
-                                }
-                                className='side-icon me-1'
-                              />
-                            )}
-                            <div className='text-truncate'>
-                              {collection.extraInfo?.name ? (
-                                <>{collection.extraInfo.name}</>
-                              ) : (
-                                <>{collection.key}</>
-                              )}
-                            </div>
-                            {collection.extraInfo?.isVerified && (
-                              <Overlay
-                                title='Verified'
-                                className='verified-badge-wrapper'
-                              >
-                                <FontAwesomeIcon
-                                  icon={faHexagonCheck}
-                                  size='sm'
-                                  className='text-yellow-spotlight ms-2'
-                                />
-                              </Overlay>
+                      {collection.extraInfo?.assets ? (
+                        <>
+                          {collection.extraInfo.assets?.svgUrl && (
+                            <img
+                              src={collection.extraInfo.assets.svgUrl}
+                              alt={collection.extraInfo?.name ?? collection.key}
+                              className='side-icon me-1'
+                            />
+                          )}
+                          <div className='text-truncate'>
+                            {collection.extraInfo?.name ? (
+                              <>{collection.extraInfo.name}</>
+                            ) : (
+                              <>{collection.key}</>
                             )}
-                          </>
-                        ) : (
-                          <div className='text-truncate'>{collection.key}</div>
-                        )}
-                      </div>
+                          </div>
+                          {collection.extraInfo?.isVerified && (
+                            <Overlay
+                              title='Verified'
+                              className='verified-badge-wrapper'
+                            >
+                              <FontAwesomeIcon
+                                icon={faHexagonCheck}
+                                size='sm'
+                                className='text-yellow-spotlight ms-2'
+                              />
+                            </Overlay>
+                          )}
+                        </>
+                      ) : (
+                        <div className='text-truncate'>{collection.key}</div>
+                      )}
                     </NetworkLink>
                   </td>
                   <td className='text-end'>
diff --git a/src/widgets/MostUsed/MostUsedTokens.tsx b/src/widgets/MostUsed/MostUsedTokens.tsx
index dcbeefee7..edfec75da 100644
--- a/src/widgets/MostUsed/MostUsedTokens.tsx
+++ b/src/widgets/MostUsed/MostUsedTokens.tsx
@@ -37,35 +37,33 @@ export const MostUsedTokens = ({ data }: { data: MostUsedTokensType[] }) => {
                   <td>
                     <NetworkLink
                       to={urlBuilder.tokenDetails(token.key)}
-                      className={`d-flex text-truncate text-primary-200 ${
+                      className={`d-flex align-items-center symbol trim text-truncate text-primary-200 w-min-content ${
                         token.extraInfo?.assets?.svgUrl ? 'side-link' : ''
                       }`}
                     >
-                      <div className='d-flex align-items-center symbol trim text-truncate'>
-                        {token.extraInfo ? (
-                          <>
-                            {token.extraInfo?.assets?.svgUrl && (
-                              <img
-                                src={token.extraInfo?.assets.svgUrl}
-                                alt={token.extraInfo?.name ?? token.key}
-                                className='side-icon me-1'
-                              />
+                      {token.extraInfo ? (
+                        <>
+                          {token.extraInfo?.assets?.svgUrl && (
+                            <img
+                              src={token.extraInfo?.assets.svgUrl}
+                              alt={token.extraInfo?.name ?? token.key}
+                              className='side-icon me-1'
+                            />
+                          )}
+                          <div className='text-truncate'>
+                            {token.extraInfo?.name ? (
+                              <>
+                                {token.extraInfo.name} ({token.extraInfo.ticker}
+                                )
+                              </>
+                            ) : (
+                              <>{token.key}</>
                             )}
-                            <div className='text-truncate'>
-                              {token.extraInfo?.name ? (
-                                <>
-                                  {token.extraInfo.name} (
-                                  {token.extraInfo.ticker})
-                                </>
-                              ) : (
-                                <>{token.key}</>
-                              )}
-                            </div>
-                          </>
-                        ) : (
-                          <div className='text-truncate'>{token.key}</div>
-                        )}
-                      </div>
+                          </div>
+                        </>
+                      ) : (
+                        <div className='text-truncate'>{token.key}</div>
+                      )}
                     </NetworkLink>
                   </td>
                   <td className='text-neutral-300 text-end fw-600 pe-2'>