From f81d010b72b7fb932d6a50c9266369339259e8d8 Mon Sep 17 00:00:00 2001
From: RachelElysia <71795832+RachelElysia@users.noreply.github.com>
Date: Tue, 16 Nov 2021 12:55:57 -0500
Subject: [PATCH] Fleet setup: Overflow fix (#2927)

---
 changes/issue-2923-setup-overflow-info                |  1 +
 .../ConfirmationPage/ConfirmationPage.tsx             |  2 +-
 .../RegistrationForm/ConfirmationPage/_styles.scss    | 11 +++++++++--
 3 files changed, 11 insertions(+), 3 deletions(-)
 create mode 100644 changes/issue-2923-setup-overflow-info

diff --git a/changes/issue-2923-setup-overflow-info b/changes/issue-2923-setup-overflow-info
new file mode 100644
index 0000000000..a4a9671fcc
--- /dev/null
+++ b/changes/issue-2923-setup-overflow-info
@@ -0,0 +1 @@
+* Fix: Fleet Setup confirmation overflow
\ No newline at end of file
diff --git a/frontend/components/forms/RegistrationForm/ConfirmationPage/ConfirmationPage.tsx b/frontend/components/forms/RegistrationForm/ConfirmationPage/ConfirmationPage.tsx
index fb638abace..3745536aed 100644
--- a/frontend/components/forms/RegistrationForm/ConfirmationPage/ConfirmationPage.tsx
+++ b/frontend/components/forms/RegistrationForm/ConfirmationPage/ConfirmationPage.tsx
@@ -78,7 +78,7 @@ const ConfirmationPage = ({
             </tr>
             <tr>
               <th>Email:</th>
-              <td>{email}</td>
+              <td className={`${baseClass}__table-email`}>{email}</td>
             </tr>
             <tr>
               <th>Organization:</th>
diff --git a/frontend/components/forms/RegistrationForm/ConfirmationPage/_styles.scss b/frontend/components/forms/RegistrationForm/ConfirmationPage/_styles.scss
index ccdef42c11..9f93f682f4 100644
--- a/frontend/components/forms/RegistrationForm/ConfirmationPage/_styles.scss
+++ b/frontend/components/forms/RegistrationForm/ConfirmationPage/_styles.scss
@@ -52,7 +52,7 @@
       font-size: $small;
       font-weight: $bold;
       text-align: left;
-      padding-right: 108px;
+      padding-right: 20px;
     }
 
     td {
@@ -61,8 +61,15 @@
     }
   }
 
+  &__table-email {
+    max-width: 292px;
+    word-wrap: break-word;
+  }
+
   &__table-url {
-    @include ellipsis(100%);
+    display: inline-block;
+    max-width: 292px;
+    word-wrap: break-word;
     font-family: "SourceCodePro", $monospace;
     vertical-align: bottom;
     font-weight: 600;