Fixed: Render CustomFormats under profile option for Large Screens

frontend/src/Settings/Profiles/Quality/EditQualityProfileModalContent.css

@@ -3,7 +3,8 @@
   flex-wrap: wrap;
 }
 
-.formGroupWrapper {
+.formGroupWrapper,
+.formatItemLarge {
   flex: 0 0 calc($formGroupSmallWidth - 100px);
 }
 
@@ -11,8 +12,20 @@
   margin-right: auto;
 }
 
-@media only screen and (max-width: $breakpointLarge) {
+.formatItemSmall {
+  display: none;
+}
+
+@media only screen and (max-width: calc($breakpointLarge + 100px)) {
   .formGroupsContainer {
     display: block;
   }
+
+  .formatItemSmall {
+    display: block;
+  }
+
+  .formatItemLarge {
+    display: none;
+  }
 }

frontend/src/Settings/Profiles/Quality/EditQualityProfileModalContent.js

@@ -21,6 +21,17 @@ import styles from './EditQualityProfileModalContent.css';
 
 const MODAL_BODY_PADDING = parseInt(dimensions.modalBodyPadding);
 
+function getCustomFormatRender(formatItems, otherProps) {
+  return (
+    <QualityProfileFormatItems
+      profileFormatItems={formatItems.value}
+      errors={formatItems.errors}
+      warnings={formatItems.warnings}
+      {...otherProps}
+    />
+  );
+}
+
 class EditQualityProfileModalContent extends Component {
 
   //
@@ -251,6 +262,10 @@ class EditQualityProfileModalContent extends Component {
                             onChange={onLanguageChange}
                           />
                         </FormGroup>
+
+                        <div className={styles.formatItemLarge}>
+                          {getCustomFormatRender(formatItems, ...otherProps)}
+                        </div>
                       </div>
 
                       <div className={styles.formGroupWrapper}>
@@ -263,13 +278,8 @@ class EditQualityProfileModalContent extends Component {
                         />
                       </div>
 
-                      <div className={styles.formGroupWrapper}>
-                        <QualityProfileFormatItems
-                          profileFormatItems={formatItems.value}
-                          errors={formatItems.errors}
-                          warnings={formatItems.warnings}
-                          {...otherProps}
-                        />
+                      <div className={styles.formatItemSmall}>
+                        {getCustomFormatRender(formatItems, otherProps)}
                       </div>
                     </div>
                   </Form>