From aeda4cba328324f40cbe58e83194b91e6990e743 Mon Sep 17 00:00:00 2001
From: Qstick <qstick@gmail.com>
Date: Wed, 7 Oct 2020 22:01:58 -0400
Subject: [PATCH] Fixed: Render CustomFormats under profile option for Large
 Screens

---
 .../EditQualityProfileModalContent.css        | 17 +++++++++++--
 .../Quality/EditQualityProfileModalContent.js | 24 +++++++++++++------
 2 files changed, 32 insertions(+), 9 deletions(-)

diff --git a/frontend/src/Settings/Profiles/Quality/EditQualityProfileModalContent.css b/frontend/src/Settings/Profiles/Quality/EditQualityProfileModalContent.css
index 2f6589933..586f99e70 100644
--- a/frontend/src/Settings/Profiles/Quality/EditQualityProfileModalContent.css
+++ b/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;
+  }
 }
diff --git a/frontend/src/Settings/Profiles/Quality/EditQualityProfileModalContent.js b/frontend/src/Settings/Profiles/Quality/EditQualityProfileModalContent.js
index c888f1ac4..0b70552e4 100644
--- a/frontend/src/Settings/Profiles/Quality/EditQualityProfileModalContent.js
+++ b/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>