Show options in a single column when there are 4 items or less

src/components/WizardOptions/WizardOptions.js

@@ -277,8 +277,12 @@ class WizardOptions extends Reflux.Component {
     }
     if (!this.state.isConnecting) {
       let optionFields = fields.map(field => this.renderField(field), this)
+      let totalFields = optionFields.filter(f => f !== undefined).length
+      let requiredFields = fields.filter(f => f.required).length
+      let visibleFields = this.state.showAdvancedOptions ? totalFields : requiredFields
+
       return (
-        <div className={s.optionsFieldsContainer}>
+        <div className={s.optionsFieldsContainer + ' ' + (visibleFields <= 4 ? s.oneColumn : '')}>
           {optionFields}
         </div>
       )

src/components/WizardOptions/WizardOptions.scss

@@ -73,6 +73,11 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
   flex-wrap: wrap;
   margin-left: -304px;
 
+  &.oneColumn {
+    align-items: center;
+    flex-direction: column;
+  }
+
   :global {
     .form-group {
       display: none;