Fix DOM nesting and improve labels of address pickers

src/components/Parcels/ParcelFormModal.js

@@ -206,21 +206,23 @@ function ParcelFormModal(props) {
             <FormGroup controlId="shippingAddress">
               <Col {...FORM_LAYOUT.labelCol}>
                 <ControlLabel>Address of sender</ControlLabel>
-                <p>
-                  <DropdownButton title="Choose" id="shippingAddressAutoFill">
-                    {addresses.map((a) => (
-                      <MenuItem
-                        key={a._id}
-                        eventKey={a._id}
-                        onSelect={() =>
-                          reset({ ...getValues(), shippingAddress: a })
-                        }
-                      >
-                        {addressFormatter(a)}
-                      </MenuItem>
-                    ))}
-                  </DropdownButton>
-                </p>
+                <DropdownButton
+                  title="Choose from my addresses"
+                  id="shippingAddressAutoFill"
+                  className={styles.dropdown}
+                >
+                  {addresses.map((a) => (
+                    <MenuItem
+                      key={a._id}
+                      eventKey={a._id}
+                      onSelect={() =>
+                        reset({ ...getValues(), shippingAddress: a })
+                      }
+                    >
+                      {addressFormatter(a)}
+                    </MenuItem>
+                  ))}
+                </DropdownButton>
               </Col>
               <Col {...FORM_LAYOUT.fieldCol}>
                 <AddressTextFieldsForm addressObjName={'shippingAddress'} />
@@ -239,25 +241,27 @@ function ParcelFormModal(props) {
                 <p className={styles.info}>
                   Where to return the parcel at the end of the investigation.
                 </p>
-                <p>
-                  <DropdownButton title="Choose" id="returnAddressAutoFill">
-                    {addresses.map((a) => (
-                      <MenuItem
-                        key={a._id}
-                        eventKey={a._id}
-                        onSelect={() =>
-                          reset({
-                            ...getValues(),
-                            returnAddress: a,
-                            noReturnAddress: false,
-                          })
-                        }
-                      >
-                        {addressFormatter(a)}
-                      </MenuItem>
-                    ))}
-                  </DropdownButton>
-                </p>
+                <DropdownButton
+                  title="Choose from my addresses"
+                  id="returnAddressAutoFill"
+                  className={styles.dropdown}
+                >
+                  {addresses.map((a) => (
+                    <MenuItem
+                      key={a._id}
+                      eventKey={a._id}
+                      onSelect={() =>
+                        reset({
+                          ...getValues(),
+                          returnAddress: a,
+                          noReturnAddress: false,
+                        })
+                      }
+                    >
+                      {addressFormatter(a)}
+                    </MenuItem>
+                  ))}
+                </DropdownButton>
               </Col>
               <Col {...FORM_LAYOUT.fieldCol}>
                 <Checkbox

src/components/Parcels/ParcelFormModal.module.css

 .info {
   font-size: smaller;
+  margin-bottom: 0;
 }
 
 .hint {
@@ -10,3 +11,7 @@
 .returnCheckbox {
   margin-bottom: 10px !important;
 }
+
+.dropdown {
+  margin-top: 5px;
+}