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 (
+