Mm 50735 (#22626)

* add shipping address to self hosted signup model
* purchase modals allow scroll
* fix z-index issues with payment modal dropdowns

webapp/channels/src/components/payment_form/address_form.tsx

@@ -61,25 +61,27 @@ const AddressForm = (props: AddressFormProps) => {
                     {...props.title}
                 />
             </div>
-            <DropdownInput
-                onChange={handleCountryChange}
-                value={
-                    props.address.country ? {value: props.address.country, label: props.address.country} : undefined
-                }
-                options={COUNTRIES.map((country) => ({
-                    value: country.name,
-                    label: country.name,
-                }))}
-                legend={formatMessage({
-                    id: 'payment_form.country',
-                    defaultMessage: 'Country',
-                })}
-                placeholder={formatMessage({
-                    id: 'payment_form.country',
-                    defaultMessage: 'Country',
-                })}
-                name={'billing_dropdown'}
-            />
+            <div className='third-dropdown-sibling-wrapper'>
+                <DropdownInput
+                    onChange={handleCountryChange}
+                    value={
+                        props.address.country ? {value: props.address.country, label: props.address.country} : undefined
+                    }
+                    options={COUNTRIES.map((country) => ({
+                        value: country.name,
+                        label: country.name,
+                    }))}
+                    legend={formatMessage({
+                        id: 'payment_form.country',
+                        defaultMessage: 'Country',
+                    })}
+                    placeholder={formatMessage({
+                        id: 'payment_form.country',
+                        defaultMessage: 'Country',
+                    })}
+                    name={'billing_dropdown'}
+                />
+            </div>
             <div className='form-row'>
                 <Input
                     name='address'
@@ -122,7 +124,7 @@ const AddressForm = (props: AddressFormProps) => {
                 />
             </div>
             <div className='form-row'>
-                <div className='form-row-third-1 selector'>
+                <div className='form-row-third-1 selector fourth-dropdown-sibling-wrapper'>
                     <StateSelector
                         country={props.address.country}
                         state={props.address.state}

webapp/channels/src/components/payment_form/payment_form.scss

@@ -12,7 +12,6 @@
 
     .form-row-third-1 {
         .DropdownInput {
-            z-index: 99999;
             margin-top: 0;
         }
 
@@ -37,7 +36,6 @@
 
     .DropdownInput {
         position: relative;
-        z-index: 999999;
         height: 36px;
         margin-bottom: 24px;
         font-weight: normal;

webapp/channels/src/components/payment_form/payment_form.tsx

@@ -251,7 +251,7 @@ export default class PaymentForm extends React.PureComponent<Props, State> {
                         />
                     </div>
                     <div className='form-row'>
-                        <div className='form-row-third-1 selector'>
+                        <div className='form-row-third-1 selector second-dropdown-sibling-wrapper'>
                             <StateSelector
                                 country={this.state.country}
                                 state={this.state.state}