[Refactor] MessageFormats: Improve reusability of setting container templates.

src-ui/views/app/config_page/setting_section/setting_box/_templates/Templates.jsx

@@ -155,13 +155,17 @@ export const DownloadModelsContainer = (props) => (
 
 export const MessageFormatContainer = (props) => {
     return (
-        <div className={clsx(styles.container, styles.flex_column)}>
-            <div className={styles.label_only_section}>
-                <LabelComponent label={props.label} desc={props.desc} />
-            </div>
-            <div className={styles.message_format_section}>
-                <MessageFormat {...props}/>
-            </div>
-        </div>
+        <>
+            <CommonContainer
+                remove_border_bottom={true}
+                label_type="label_only"
+                {...props}
+            />
+            <CommonContainer
+                Component={MessageFormat}
+                label_type="no_label"
+                {...props}
+            />
+        </>
     );
 };

src-ui/views/app/config_page/setting_section/setting_box/_templates/Templates.module.scss

@@ -19,10 +19,6 @@
     }
 }
 
-.label_only_section {
-    width: 100%;
-}
-
 .deepl_auth_key_label_section {
     max-width: 34rem;
     display: flex;
@@ -30,8 +26,4 @@
     justify-content: space-between;
     align-items: center;
     gap: 1.4rem;
-}
-
-.message_format_section {
-    width: 100%;
 }