overflow

getsentry · Sep 13, 2024 · f387267 · f387267
1 parent b3e67e0
commit f387267
Showing 1 changed file with 33 additions and 25 deletions.
diff --git a/static/app/components/modals/inviteMembersModal/inviteRowControlNew.tsx b/static/app/components/modals/inviteMembersModal/inviteRowControlNew.tsx
@@ -100,31 +100,33 @@ function InviteRowControl({
     <RowWrapper>
       <div>
         <Heading>Email addresses</Heading>
-        <SelectControl
-          aria-label={t('Email Addresses')}
-          data-test-id="select-emails"
-          disabled={disabled}
-          placeholder={t('Enter one or more emails')}
-          inputValue={inputValue}
-          value={emails}
-          components={{
-            MultiValue: props => ValueComponent(props, inviteStatus),
-            DropdownIndicator: () => null,
-          }}
-          options={mapToOptions(emails)}
-          onBlur={(e: React.ChangeEvent<HTMLInputElement>) => {
-            handleInput(e.target.value);
-          }}
-          styles={getStyles(theme, inviteStatus)}
-          onInputChange={setInputValue}
-          onKeyDown={handleKeyDown}
-          onChange={onChangeEmails}
-          multiple
-          creatable
-          clearable
-          onClear={onRemove}
-          menuIsOpen={false}
-        />
+        <EmailWrapper>
+          <SelectControl
+            aria-label={t('Email Addresses')}
+            data-test-id="select-emails"
+            disabled={disabled}
+            placeholder={t('Enter one or more emails')}
+            inputValue={inputValue}
+            value={emails}
+            components={{
+              MultiValue: props => ValueComponent(props, inviteStatus),
+              DropdownIndicator: () => null,
+            }}
+            options={mapToOptions(emails)}
+            onBlur={(e: React.ChangeEvent<HTMLInputElement>) => {
+              handleInput(e.target.value);
+            }}
+            styles={getStyles(theme, inviteStatus)}
+            onInputChange={setInputValue}
+            onKeyDown={handleKeyDown}
+            onChange={onChangeEmails}
+            multiple
+            creatable
+            clearable
+            onClear={onRemove}
+            menuIsOpen={false}
+          />
+        </EmailWrapper>
       </div>
       <RoleTeamWrapper>
         <div>
@@ -218,6 +220,12 @@ const RowWrapper = styled('div')`
   gap: ${space(1.5)};
 `;
 
+const EmailWrapper = styled('div')`
+  &:focus-within {
+    display: grid;
+  }
+`;
+
 const RoleTeamWrapper = styled('div')`
   display: grid;
   gap: ${space(1.5)};