Fixed: Custom Format Edit Modal Huge Size

frontend/src/Settings/CustomFormats/CustomFormats/EditCustomFormatModal.js

@@ -40,7 +40,7 @@ class EditCustomFormatModal extends Component {
       <Modal
         style={{ height: `${this.state.height}px` }}
         isOpen={isOpen}
-        size={sizes.EXTRA_LARGE}
+        size={sizes.LARGE}
         onModalClose={onModalClose}
       >
         <EditCustomFormatModalContentConnector

frontend/src/Settings/CustomFormats/CustomFormats/EditCustomFormatModalContent.css

@@ -1,18 +0,0 @@
-.formGroupsContainer {
-  display: flex;
-  flex-wrap: wrap;
-}
-
-.formGroupWrapper {
-  flex: 0 0 calc($formGroupSmallWidth - 100px);
-}
-
-.deleteButtonContainer {
-  margin-right: auto;
-}
-
-@media only screen and (max-width: $breakpointLarge) {
-  .formGroupsContainer {
-    display: block;
-  }
-}

frontend/src/Settings/CustomFormats/CustomFormats/EditCustomFormatModalContent.js

@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
-import { inputTypes, sizes } from 'Helpers/Props';
+import { inputTypes } from 'Helpers/Props';
 import Button from 'Components/Link/Button';
 import SpinnerErrorButton from 'Components/Link/SpinnerErrorButton';
 import LoadingIndicator from 'Components/Loading/LoadingIndicator';
@@ -12,7 +12,6 @@ import Form from 'Components/Form/Form';
 import FormGroup from 'Components/Form/FormGroup';
 import FormLabel from 'Components/Form/FormLabel';
 import FormInputGroup from 'Components/Form/FormInputGroup';
-import styles from './EditCustomFormatModalContent.css';
 
 class EditCustomFormatModalContent extends Component {
 
@@ -62,35 +61,31 @@ class EditCustomFormatModalContent extends Component {
                 <Form
                   {...otherProps}
                 >
-                  <div className={styles.formGroupsContainer}>
+                  <FormGroup>
-                    <div className={styles.formGroupWrapper}>
+                    <FormLabel>
-                      <FormGroup size={sizes.EXTRA_SMALL}>
+                      Name
-                        <FormLabel size={sizes.SMALL}>
+                    </FormLabel>
-                          Name
+
-                        </FormLabel>
+                    <FormInputGroup
-
+                      type={inputTypes.TEXT}
-                        <FormInputGroup
+                      name="name"
-                          type={inputTypes.TEXT}
+                      {...name}
-                          name="name"
+                      onChange={onInputChange}
-                          {...name}
+                    />
-                          onChange={onInputChange}
+                  </FormGroup>
-                        />
+
-                      </FormGroup>
+                  <FormGroup>
-
+                    <FormLabel>
-                      <FormGroup size={sizes.EXTRA_SMALL}>
+                      Format Tags
-                        <FormLabel size={sizes.SMALL}>
+                    </FormLabel>
-                          Format Tags
+
-                        </FormLabel>
+                    <FormInputGroup
-
+                      type={inputTypes.TEXT_TAG}
-                        <FormInputGroup
+                      name="formatTags"
-                          type={inputTypes.TEXT_TAG}
+                      {...formatTags}
-                          name="formatTags"
+                      onChange={onInputChange}
-                          {...formatTags}
+                    />
-                          onChange={onInputChange}
+                  </FormGroup>
-                        />
-                      </FormGroup>
-                    </div>
-                  </div>
                 </Form>
 
             }