fix: fix some new line wrapping issues on visibility selector (#145)

src/components/ProfilePage/elements/FormControls.jsx

@@ -15,13 +15,13 @@ function FormControls({
 
   return (
     <div className="d-flex flex-row-reverse flex-wrap justify-content-end align-items-center">
-      <div className="form-group">
+      <div className="form-group d-flex flex-wrap">
         <label className="col-form-label" htmlFor={visibilityId}>
           {intl.formatMessage(messages['profile.formcontrols.who.can.see'])}
         </label>
         <VisibilitySelect
           id={visibilityId}
-          className="w-auto"
+          className="d-flex align-items-center"
           type="select"
           name={visibilityId}
           value={visibility}

src/components/__snapshots__/ProfilePage.test.jsx.snap

@@ -2001,7 +2001,7 @@ exports[`<ProfilePage /> Renders correctly in various states while saving an edi
                   className="d-flex flex-row-reverse flex-wrap justify-content-end align-items-center"
                 >
                   <div
-                    className="form-group"
+                    className="form-group d-flex flex-wrap"
                   >
                     <label
                       className="col-form-label"
@@ -2010,7 +2010,7 @@ exports[`<ProfilePage /> Renders correctly in various states while saving an edi
                       Who can see this:
                     </label>
                     <span
-                      className="w-auto"
+                      className="d-flex align-items-center"
                     >
                       <span
                         className="d-inline-block ml-1 mr-2"