From 1d7d84022c0d8735fca1ee45b99b8fdfca15cd04 Mon Sep 17 00:00:00 2001
From: Gabriel Hernandez <ghernandez345@gmail.com>
Date: Fri, 30 Aug 2024 17:02:49 +0100
Subject: [PATCH] fix selected team names overflowing in vpp edit teams modal
 dropdown (#21710)

relates to #21700

This fixes an issue where the selected team names were overflowing in
the dropdown in vpp edit teams modal. This makes it so they now wrap.

**Before**


![image](https://github.com/user-attachments/assets/c69f1855-95ef-4eb0-9ade-8a67c2b44e70)

**After**


![image](https://github.com/user-attachments/assets/c922a587-35fe-41c5-ba8f-976084c0103c)

> NOTE: I'm not sure why the top padding in the dropdown is removed when
the text wraps and still need to figure that part out but I wanted to
get this in to unblock the release.



- [x] Manual QA for all new/changed functionality
---
 .../components/EditTeamsVppModal/EditTeamsVppModal.tsx     | 5 +++--
 .../VppPage/components/EditTeamsVppModal/_styles.scss      | 7 +++++++
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/frontend/pages/admin/IntegrationsPage/cards/MdmSettings/VppPage/components/EditTeamsVppModal/EditTeamsVppModal.tsx b/frontend/pages/admin/IntegrationsPage/cards/MdmSettings/VppPage/components/EditTeamsVppModal/EditTeamsVppModal.tsx
index 8635499a0c..029380e60e 100644
--- a/frontend/pages/admin/IntegrationsPage/cards/MdmSettings/VppPage/components/EditTeamsVppModal/EditTeamsVppModal.tsx
+++ b/frontend/pages/admin/IntegrationsPage/cards/MdmSettings/VppPage/components/EditTeamsVppModal/EditTeamsVppModal.tsx
@@ -209,7 +209,7 @@ const EditTeamsVppModal = ({
             showArrow
             tipContent={
               <div className={`${baseClass}__tooltip--all-teams`}>
-                You can’t choose teams because you already have a VPP token
+                You can&apos;t choose teams because you already have a VPP token
                 assigned to all teams. First, edit teams for that VPP token to
                 choose teams here.
               </div>
@@ -223,6 +223,7 @@ const EditTeamsVppModal = ({
               placeholder="Search teams"
               value={selectedValue}
               label="Teams"
+              className={`${baseClass}__vpp-dropdown`}
               wrapperClassName={`${baseClass}__form-field--vpp-teams ${
                 isDropdownDisabled ? `${baseClass}__form-field--disabled` : ""
               }`}
@@ -230,7 +231,7 @@ const EditTeamsVppModal = ({
                 isDropdownDisabled ? undefined : (
                   <>
                     Each team can have only one VPP token. Teams that already
-                    have a VPP token won’t show up here.
+                    have a VPP token won&apos;t show up here.
                   </>
                 )
               }
diff --git a/frontend/pages/admin/IntegrationsPage/cards/MdmSettings/VppPage/components/EditTeamsVppModal/_styles.scss b/frontend/pages/admin/IntegrationsPage/cards/MdmSettings/VppPage/components/EditTeamsVppModal/_styles.scss
index 9b6f508dc1..72ed9e4a10 100644
--- a/frontend/pages/admin/IntegrationsPage/cards/MdmSettings/VppPage/components/EditTeamsVppModal/_styles.scss
+++ b/frontend/pages/admin/IntegrationsPage/cards/MdmSettings/VppPage/components/EditTeamsVppModal/_styles.scss
@@ -2,6 +2,13 @@
   .component__tooltip-wrapper__element {
     width: 100%; // default component style was causing the select box not to be full width
   }
+
+  // this is needed to wrap the selected team names in that are displayed
+  // in the dropdown select box.
+  .dropdown__select {
+    text-wrap: wrap;
+  }
+
   // styles needed to make select look like figma design when disabled,
   // default styles in the Dropdown component were not enough
   &__form-field--disabled {