fix(snaps): Adjust alignment of custom UI links (#27957)

## **Description**

This PR fixes the alignment issues of the custom UI link.

[![Open in GitHub
Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/MetaMask/metamask-extension/pull/27957?quickstart=1)

## **Related issues**

Fixes:

## **Manual testing steps**

```ts
import {
  Address,
  Box,
  Button,
  Container,
  Footer,
  Link,
  Row,
  Text,
  type SnapComponent,
} from '@metamask/snaps-sdk/jsx';

/**
 * A custom dialog component.
 *
 * @returns The custom dialog component.
 */
export const CustomDialog: SnapComponent = () => (
  <Container>
    <Box>
      <Row label="Test">
        <Link href="https://metamask.io">
          <Address address="0xc366063eA70eBD30316062C9C82445591c772870" />
        </Link>
      </Row>
      <Link href="https://metamask.io">This is a link</Link>
      <Text>
        This is a long text that should wrap around and take up multiple lines
        to test the layout of the dialog with a{' '}
        <Link href="https://metamask.io">
          very very very very long link that should wrap on multiple lines, we
          will see
        </Link>{' '}
        in the middle.
      </Text>
      <Link href="https://metamask.io">
        <Icon name="search" />
      </Link>
      <Link href="https://metamask.io">
        <Address address="0xc366063eA70eBD30316062C9C82445591c772870" />
      </Link>
    </Box>
    <Footer>
      <Button name="cancel">Cancel</Button>
      <Button name="confirm">Confirm</Button>
    </Footer>
  </Container>
);
```

## **Screenshots/Recordings**

<!-- If applicable, add screenshots and/or recordings to visualize the
before and after of your change. -->

### **Before**

![Screenshot from 2024-10-21
12-34-40](https://github.com/user-attachments/assets/3838dafa-8143-4b3d-bb28-699ce139e7da)

### **After**

![Screenshot from 2024-10-21
15-06-57](https://github.com/user-attachments/assets/f789dc89-3550-416f-8ada-dcb86f01c151)

## **Pre-merge author checklist**

- [x] I've followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask
Extension Coding
Standards](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/CODING_GUIDELINES.md).
- [x] I've completed the PR template to the best of my ability
- [x] I’ve included tests if applicable
- [x] I’ve documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [x] I’ve applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.

## **Pre-merge reviewer checklist**

- [ ] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [ ] I confirm that this PR addresses all acceptance criteria described
in the ticket it closes and includes the necessary testing evidence such
as recordings and or screenshots.

ui/components/app/app-components.scss

@@ -25,6 +25,7 @@
 @import 'snaps/snap-ui-input/index';
 @import 'snaps/snap-ui-file-input/index';
 @import 'snaps/snap-ui-selector/index';
+@import 'snaps/snap-ui-link/index';
 @import 'snaps/snap-delineator/index';
 @import 'snaps/snap-home-menu/index';
 @import 'snaps/snap-list-item/index';

ui/components/app/snaps/snap-ui-address/__snapshots__/snap-ui-address.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`SnapUIAddress renders Bitcoin address 1`] = `
 <div>
   <div
-    class="mm-box mm-box--display-flex mm-box--gap-2 mm-box--align-items-center"
+    class="mm-box snap-ui-renderer__address mm-box--display-flex mm-box--gap-2 mm-box--align-items-center"
   >
     <div
       style="display: flex;"
@@ -56,7 +56,7 @@ exports[`SnapUIAddress renders Bitcoin address 1`] = `
 exports[`SnapUIAddress renders Bitcoin address with blockie 1`] = `
 <div>
   <div
-    class="mm-box mm-box--display-flex mm-box--gap-2 mm-box--align-items-center"
+    class="mm-box snap-ui-renderer__address mm-box--display-flex mm-box--gap-2 mm-box--align-items-center"
   >
     <img
       alt=""
@@ -77,7 +77,7 @@ exports[`SnapUIAddress renders Bitcoin address with blockie 1`] = `
 exports[`SnapUIAddress renders Cosmos address 1`] = `
 <div>
   <div
-    class="mm-box mm-box--display-flex mm-box--gap-2 mm-box--align-items-center"
+    class="mm-box snap-ui-renderer__address mm-box--display-flex mm-box--gap-2 mm-box--align-items-center"
   >
     <div
       style="display: flex;"
@@ -130,7 +130,7 @@ exports[`SnapUIAddress renders Cosmos address 1`] = `
 exports[`SnapUIAddress renders Cosmos address with blockie 1`] = `
 <div>
   <div
-    class="mm-box mm-box--display-flex mm-box--gap-2 mm-box--align-items-center"
+    class="mm-box snap-ui-renderer__address mm-box--display-flex mm-box--gap-2 mm-box--align-items-center"
   >
     <img
       alt=""
@@ -151,7 +151,7 @@ exports[`SnapUIAddress renders Cosmos address with blockie 1`] = `
 exports[`SnapUIAddress renders Ethereum address 1`] = `
 <div>
   <div
-    class="mm-box mm-box--display-flex mm-box--gap-2 mm-box--align-items-center"
+    class="mm-box snap-ui-renderer__address mm-box--display-flex mm-box--gap-2 mm-box--align-items-center"
   >
     <div
       style="display: flex;"
@@ -204,7 +204,7 @@ exports[`SnapUIAddress renders Ethereum address 1`] = `
 exports[`SnapUIAddress renders Ethereum address with blockie 1`] = `
 <div>
   <div
-    class="mm-box mm-box--display-flex mm-box--gap-2 mm-box--align-items-center"
+    class="mm-box snap-ui-renderer__address mm-box--display-flex mm-box--gap-2 mm-box--align-items-center"
   >
     <img
       alt=""
@@ -225,7 +225,7 @@ exports[`SnapUIAddress renders Ethereum address with blockie 1`] = `
 exports[`SnapUIAddress renders Hedera address 1`] = `
 <div>
   <div
-    class="mm-box mm-box--display-flex mm-box--gap-2 mm-box--align-items-center"
+    class="mm-box snap-ui-renderer__address mm-box--display-flex mm-box--gap-2 mm-box--align-items-center"
   >
     <div
       style="display: flex;"
@@ -278,7 +278,7 @@ exports[`SnapUIAddress renders Hedera address 1`] = `
 exports[`SnapUIAddress renders Hedera address with blockie 1`] = `
 <div>
   <div
-    class="mm-box mm-box--display-flex mm-box--gap-2 mm-box--align-items-center"
+    class="mm-box snap-ui-renderer__address mm-box--display-flex mm-box--gap-2 mm-box--align-items-center"
   >
     <img
       alt=""
@@ -299,7 +299,7 @@ exports[`SnapUIAddress renders Hedera address with blockie 1`] = `
 exports[`SnapUIAddress renders Polkadot address 1`] = `
 <div>
   <div
-    class="mm-box mm-box--display-flex mm-box--gap-2 mm-box--align-items-center"
+    class="mm-box snap-ui-renderer__address mm-box--display-flex mm-box--gap-2 mm-box--align-items-center"
   >
     <div
       style="display: flex;"
@@ -352,7 +352,7 @@ exports[`SnapUIAddress renders Polkadot address 1`] = `
 exports[`SnapUIAddress renders Polkadot address with blockie 1`] = `
 <div>
   <div
-    class="mm-box mm-box--display-flex mm-box--gap-2 mm-box--align-items-center"
+    class="mm-box snap-ui-renderer__address mm-box--display-flex mm-box--gap-2 mm-box--align-items-center"
   >
     <img
       alt=""
@@ -373,7 +373,7 @@ exports[`SnapUIAddress renders Polkadot address with blockie 1`] = `
 exports[`SnapUIAddress renders Starknet address 1`] = `
 <div>
   <div
-    class="mm-box mm-box--display-flex mm-box--gap-2 mm-box--align-items-center"
+    class="mm-box snap-ui-renderer__address mm-box--display-flex mm-box--gap-2 mm-box--align-items-center"
   >
     <div
       style="display: flex;"
@@ -426,7 +426,7 @@ exports[`SnapUIAddress renders Starknet address 1`] = `
 exports[`SnapUIAddress renders Starknet address with blockie 1`] = `
 <div>
   <div
-    class="mm-box mm-box--display-flex mm-box--gap-2 mm-box--align-items-center"
+    class="mm-box snap-ui-renderer__address mm-box--display-flex mm-box--gap-2 mm-box--align-items-center"
   >
     <img
       alt=""
@@ -447,7 +447,7 @@ exports[`SnapUIAddress renders Starknet address with blockie 1`] = `
 exports[`SnapUIAddress renders legacy Ethereum address 1`] = `
 <div>
   <div
-    class="mm-box mm-box--display-flex mm-box--gap-2 mm-box--align-items-center"
+    class="mm-box snap-ui-renderer__address mm-box--display-flex mm-box--gap-2 mm-box--align-items-center"
   >
     <div
       style="display: flex;"

ui/components/app/snaps/snap-ui-address/snap-ui-address.tsx

@@ -48,7 +48,12 @@ export const SnapUIAddress: React.FunctionComponent<SnapUIAddressProps> = ({
   const shortenedAddress = shortenAddress(transformedAddress);
 
   return (
-    <Box display={Display.Flex} alignItems={AlignItems.center} gap={2}>
+    <Box
+      className="snap-ui-renderer__address"
+      display={Display.Flex}
+      alignItems={AlignItems.center}
+      gap={2}
+    >
       <SnapUIAvatar address={caipIdentifier} size={avatarSize} />
       <Text color={TextColor.inherit}>{shortenedAddress}</Text>
     </Box>

ui/components/app/snaps/snap-ui-link/index.scss

@@ -0,0 +1,11 @@
+.snap-ui-renderer__link {
+  & .snap-ui-renderer__address {
+    // Fixes an issue where the link end icon would wrap
+    display: inline-flex;
+  }
+
+  .snap-ui-renderer__address + .mm-icon {
+    // This fixes an issue where the icon would be misaligned with the Address component
+    top: 0;
+  }
+}

ui/components/app/snaps/snap-ui-link/snap-ui-link.js

@@ -34,7 +34,7 @@ export const SnapUILink = ({ href, children }) => {
       <ButtonLink
         as="a"
         size={ButtonLinkSize.Inherit}
-        className="snap-ui-link"
+        className="snap-ui-renderer__link"
         onClick={handleLinkClick}
       >
         {children}
@@ -51,7 +51,14 @@ export const SnapUILink = ({ href, children }) => {
         externalLink
         size={ButtonLinkSize.Inherit}
         display={Display.Inline}
-        className="snap-ui-link"
+        className="snap-ui-renderer__link"
+        style={{
+          // Prevents the link from taking up the full width of the parent.
+          width: 'fit-content',
+        }}
+        textProps={{
+          display: Display.Inline,
+        }}
       >
         {children}
         <Icon name={IconName.Export} size={IconSize.Inherit} marginLeft={1} />

ui/components/app/snaps/snap-ui-renderer/index.scss

@@ -34,6 +34,10 @@
     border-radius: 8px;
     border-color: var(--color-border-muted);
 
+    & .mm-icon {
+      top: 0;
+    }
+
     .mm-text--overflow-wrap-anywhere {
       overflow-wrap: normal;
     }
@@ -48,10 +52,6 @@
 
   &__panel {
     gap: 8px;
-
-    .mm-icon--size-inherit {
-      top: 0;
-    }
   }
 
   &__text {