fix: issue with Snap title in Snap Authorship Header (#27752)

Fix issue with Snap name in Snap Authorship Header.

## **Description**

<!--
Write a short description of the changes included in this pull request,
also include relevant motivation and context. Have in mind the following
questions:
1. What is the reason for the change?
2. What is the improvement/solution?
-->

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

## **Related issues**

Fixes: n/a

## **Manual testing steps**

1. Try to install a Snap with long name (e.g. Ethereum Provider Example
Snap)
2. Make sure that the title is properly truncated and all elements
visible

## **Screenshots/Recordings**
### **Before**
![Screenshot 2024-10-10 at 11 38
11](https://github.com/user-attachments/assets/6919c8f9-ce3f-4c27-97f5-d4087c0d87ee)
![Screenshot 2024-10-10 at 11 38
28](https://github.com/user-attachments/assets/03bbae28-b859-4e85-8abf-e858e4793d81)

### **After**
![Screenshot 2024-10-10 at 12 08
44](https://github.com/user-attachments/assets/2486f3f5-8485-4342-ad42-d9eba9d4e1ed)
![Screenshot 2024-10-10 at 12 08
57](https://github.com/user-attachments/assets/1857085f-6868-4eb8-98b9-041c4d985256)

## **Pre-merge author checklist**
- [ ] 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).
- [ ] I've completed the PR template to the best of my ability
- [ ] I’ve included tests if applicable
- [ ] I’ve documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [ ] 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/snaps/snap-authorship-header/snap-authorship-header.js

@@ -91,12 +91,14 @@ const SnapAuthorshipHeader = ({
           display={Display.Flex}
           justifyContent={JustifyContent.center}
           alignItems={AlignItems.center}
+          style={{ overflow: 'hidden' }}
         >
           <SnapIcon snapId={snapId} avatarSize={IconSize.Sm} />
           <Text
             color={TextColor.textDefault}
             variant={TextVariant.bodyMdMedium}
             marginLeft={2}
+            title={snapName}
             ellipsis
           >
             {snapName}

ui/pages/confirmations/confirmation/templates/__snapshots__/create-snap-account.test.js.snap

@@ -31,6 +31,7 @@ exports[`create-snap-account confirmation should match snapshot 1`] = `
           >
             <div
               class="mm-box mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center"
+              style="overflow: hidden;"
             >
               <div
                 class="mm-box mm-text mm-avatar-base mm-avatar-base--size-sm mm-text--body-sm mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-alternative mm-box--background-color-background-alternative mm-box--rounded-full"
@@ -40,6 +41,7 @@ exports[`create-snap-account confirmation should match snapshot 1`] = `
               </div>
               <p
                 class="mm-box mm-text mm-text--body-md-medium mm-text--ellipsis mm-box--margin-left-2 mm-box--color-text-default"
+                title="Test Snap"
               >
                 Test Snap
               </p>

ui/pages/confirmations/confirmation/templates/__snapshots__/remove-snap-account.test.js.snap

@@ -31,6 +31,7 @@ exports[`remove-snap-account confirmation should match snapshot 1`] = `
           >
             <div
               class="mm-box mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center"
+              style="overflow: hidden;"
             >
               <div
                 class="mm-box mm-text mm-avatar-base mm-avatar-base--size-sm mm-text--body-sm mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-alternative mm-box--background-color-background-alternative mm-box--rounded-full"
@@ -40,6 +41,7 @@ exports[`remove-snap-account confirmation should match snapshot 1`] = `
               </div>
               <p
                 class="mm-box mm-text mm-text--body-md-medium mm-text--ellipsis mm-box--margin-left-2 mm-box--color-text-default"
+                title="Test Snap"
               >
                 Test Snap
               </p>

ui/pages/confirmations/confirmation/templates/__snapshots__/snap-account-redirect.test.js.snap

@@ -22,6 +22,7 @@ exports[`snap-account-redirect confirmation should match snapshot 1`] = `
           >
             <div
               class="mm-box mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center"
+              style="overflow: hidden;"
             >
               <div
                 class="mm-box mm-text mm-avatar-base mm-avatar-base--size-sm mm-text--body-sm mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-alternative mm-box--background-color-background-alternative mm-box--rounded-full"

ui/pages/snap-account-redirect/__snapshots__/create-snap-redirect.test.tsx.snap

@@ -15,6 +15,7 @@ exports[`<SnapAccountRedirect /> renders the url and message when provided and i
       >
         <div
           class="mm-box mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center"
+          style="overflow: hidden;"
         >
           <div
             class="mm-box mm-text mm-avatar-base mm-avatar-base--size-sm mm-text--body-sm mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-alternative mm-box--background-color-background-alternative mm-box--rounded-full"
@@ -24,6 +25,7 @@ exports[`<SnapAccountRedirect /> renders the url and message when provided and i
           </div>
           <p
             class="mm-box mm-text mm-text--body-md-medium mm-text--ellipsis mm-box--margin-left-2 mm-box--color-text-default"
+            title="@metamask/snap-simple-keyring"
           >
             @metamask/snap-simple-keyring
           </p>