fix: truncate username full variant text (#1342)

decentraland · Oct 19, 2023 · 818d78c · 818d78c
1 parent 3e9177b
commit 818d78c
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 7 deletions.
diff --git a/src/components/Common/Username.css b/src/components/Common/Username.css
@@ -1,4 +1,10 @@
-.Username {
+.Username--full {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+.Username--address {
   display: inline;
 }
 
@@ -18,6 +24,8 @@ a.Username span.address {
 .Username .dcl.address,
 .Username .Username__Name {
   margin-left: 0.5rem;
+  text-overflow: ellipsis;
+  overflow: hidden;
 }
 
 .Username .dcl.blockie-wrapper .dcl.blockie-children {

diff --git a/src/components/Common/Username.tsx b/src/components/Common/Username.tsx
@@ -88,14 +88,16 @@ const Username = ({ address, size, linked, variant = UsernameVariant.Full, stron
     </>
   )
 
+  const customClassNames = classNames('Username', `Username--${variant}`, className)
+
   return (
     <>
       {linked ? (
-        <Link className={classNames('Username', className)} href={locations.profile({ address: checksumAddress })}>
+        <Link className={customClassNames} href={locations.profile({ address: checksumAddress })}>
           {userElement}
         </Link>
       ) : (
-        <span className={classNames('Username', className)}>{userElement}</span>
+        <span className={customClassNames}>{userElement}</span>
       )}
     </>
   )

diff --git a/src/components/Delegation/DelegatesTableRow.css b/src/components/Delegation/DelegatesTableRow.css
@@ -9,10 +9,6 @@
 .DelegatesTableRow__Username span {
   width: 105px;
   text-align: left;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  overflow: hidden;
-  margin-left: 2px;
 }
 
 .DelegatesTableRow__CandidateName {