Make whole username clickable in UsernameLinkModalBody

stylesheets/components/UsernameLinkModalBody.scss

@@ -71,8 +71,6 @@
 
     &__username {
       display: flex;
-      flex-direction: row;
-      gap: 4px;
       justify-content: center;
       margin-block: 12px 2px;
 
@@ -85,10 +83,12 @@
         text-align: center;
       }
 
-      &__copy {
+      &__copy__button {
-        @include button-reset;
+        display: flex;
-        @include button-focus-outline;
+        flex-direction: row;
+        gap: 4px;
 
+        i {
           flex-shrink: 0;
           margin-top: 2px;
           display: inline-block;
@@ -100,6 +100,10 @@
             var(--text-color)
           );
         }
+
+        @include button-reset;
+        @include button-focus-outline;
+      }
     }
   }
 

ts/components/UsernameLinkModalBody.tsx

@@ -808,15 +808,21 @@ export function UsernameLinkModalBody({
         >
           <div className={`${CLASS}__card__qr`}>{linkImage}</div>
           <div className={`${CLASS}__card__username`}>
-            {!showColors && (
+            {showColors ? (
+              <div className={`${CLASS}__card__username__text`}>{username}</div>
+            ) : (
               <button
-                className={classnames(`${CLASS}__card__username__copy`)}
+                className={`${CLASS}__card__username__copy__button`}
                 type="button"
                 onClick={onCopyUsername}
                 aria-label={i18n('icu:UsernameLinkModalBody__copy')}
-              />
+              >
+                <i />
+                <div className={`${CLASS}__card__username__text`}>
+                  {username}
+                </div>
+              </button>
             )}
-            <div className={`${CLASS}__card__username__text`}>{username}</div>
           </div>
         </div>