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={
- You can’t choose teams because you already have a VPP token
+ You can'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.
@@ -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'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 {