[Update] Config Page: Add break point and change the design layout.(UI Scaling will apply)

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

@@ -1,6 +1,7 @@
-import styles from "./Templates.module.scss";
-import { useStore_IsOpenedDropdownMenu } from "@store";
+import clsx from "clsx";
 
+import styles from "./Templates.module.scss";
+import { useStore_IsOpenedDropdownMenu, useStore_IsBreakPoint } from "@store";
 import {
     LabelComponent,
     DropdownMenu,
@@ -17,6 +18,13 @@ import {
     DownloadModels,
 } from "../_components/";
 
+const LabeledContainer = ({ children, label, desc, custom_class_name }) => (
+    <div className={clsx(styles.container, custom_class_name)}>
+        <LabelComponent label={label} desc={desc} />
+        {children}
+    </div>
+);
+
 export const useOnMouseLeaveDropdownMenu = () => {
     const { updateIsOpenedDropdownMenu } = useStore_IsOpenedDropdownMenu();
 
@@ -29,7 +37,6 @@ export const useOnMouseLeaveDropdownMenu = () => {
 
 export const DropdownMenuContainer = (props) => {
     const { onMouseLeaveFunction } = useOnMouseLeaveDropdownMenu();
-
     return (
         <div className={styles.container} onMouseLeave={onMouseLeaveFunction}>
             <LabelComponent label={props.label} desc={props.desc} />
@@ -38,94 +45,67 @@ export const DropdownMenuContainer = (props) => {
     );
 };
 
+const CommonContainer = ({ Component, ...props }) => {
+    const { currentIsBreakPoint } = useStore_IsBreakPoint();
+
+    const container_class = clsx(styles.container, {
+        [styles.is_break_point]: props.add_break_point ?? currentIsBreakPoint.data,
+    });
 
-export const SliderContainer = (props) => {
     return (
-        <div className={styles.container}>
-            <LabelComponent label={props.label} desc={props.desc} />
-            <Slider {...props}/>
-        </div>
+        <LabeledContainer label={props.label} desc={props.desc} custom_class_name={container_class}>
+            <Component {...props} />
+        </LabeledContainer>
     );
 };
+export const SliderContainer = (props) => (
+    <CommonContainer Component={Slider} {...props} />
+);
 
-export const CheckboxContainer = (props) => {
-    return (
-        <div className={styles.container}>
+export const CheckboxContainer = (props) => (
+    <CommonContainer Component={Checkbox} {...props} add_break_point={false} />
+);
+
+export const SwitchBoxContainer = (props) => (
+    <CommonContainer Component={SwitchBox} {...props} />
+);
+
+export const EntryContainer = (props) => (
+    <CommonContainer Component={Entry} {...props} add_break_point={false} />
+);
+
+export const RadioButtonContainer = (props) => (
+    <CommonContainer Component={RadioButton} {...props} />
+);
+
+export const DeeplAuthKeyContainer = (props) => (
+    <div className={styles.container}>
+        <div className={styles.deepl_auth_key_label_section}>
             <LabelComponent label={props.label} desc={props.desc} />
-            <Checkbox {...props}/>
+            <OpenWebpage_DeeplAuthKey />
         </div>
-    );
-};
+        <DeeplAuthKey {...props} />
+    </div>
+);
 
-export const SwitchBoxContainer = (props) => {
-    return (
-        <div className={styles.container}>
-            <LabelComponent label={props.label} desc={props.desc} />
-            <SwitchBox {...props}/>
-        </div>
-    );
-};
+export const ActionButtonContainer = (props) => (
+    <CommonContainer Component={ActionButton} {...props} add_break_point={false}/>
+);
 
-export const EntryContainer = (props) => {
-    return (
-        <div className={styles.container}>
-            <LabelComponent label={props.label} desc={props.desc} />
-            <Entry {...props}/>
-        </div>
-    );
-};
-
-export const RadioButtonContainer = (props) => {
-    return (
-        <div className={styles.container}>
-            <LabelComponent label={props.label} desc={props.desc} />
-            <RadioButton {...props}/>
-        </div>
-    );
-};
-
-export const DeeplAuthKeyContainer = (props) => {
-    return (
-        <div className={styles.container}>
-            <div className={styles.deepl_auth_key_label_section}>
+export const WordFilterContainer = (props) => (
+    <div className={styles.word_filter_container}>
+        <div className={styles.word_filter_switch_section}>
+            <div className={styles.word_filter_label_wrapper}>
                 <LabelComponent label={props.label} desc={props.desc} />
-                <OpenWebpage_DeeplAuthKey />
             </div>
-            <DeeplAuthKey {...props}/>
+            <WordFilterListToggleComponent />
         </div>
-    );
-};
+        <div className={styles.word_filter_section}>
+            <WordFilter {...props} />
+        </div>
+    </div>
+);
 
-export const ActionButtonContainer = (props) => {
-    return (
-        <div className={styles.container}>
-            <LabelComponent label={props.label} desc={props.desc} />
-            <ActionButton {...props}/>
-        </div>
-    );
-};
-
-export const WordFilterContainer = (props) => {
-    return (
-        <div className={styles.word_filter_container}>
-            <div className={styles.word_filter_switch_section}>
-                <div className={styles.word_filter_label_wrapper}>
-                    <LabelComponent label={props.label} desc={props.desc}/>
-                </div>
-                <WordFilterListToggleComponent/>
-            </div>
-            <div className={styles.word_filter_section}>
-                <WordFilter {...props}/>
-            </div>
-        </div>
-    );
-};
-
-export const DownloadModelsContainer = (props) => {
-    return (
-        <div className={styles.container}>
-            <LabelComponent label={props.label} desc={props.desc} />
-            <DownloadModels {...props}/>
-        </div>
-    );
-};
+export const DownloadModelsContainer = (props) => (
+    <CommonContainer Component={DownloadModels} {...props} />
+);

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

@@ -9,6 +9,12 @@
         flex-direction: column;
     }
     border-bottom: solid 0.1rem var(--dark_800_color);
+
+    &.is_break_point {
+        flex-direction: column;
+        gap: 2rem;
+        align-items: start;
+    }
 }
 
 .label_only_section {

src-ui/app/config_page/setting_section/setting_box/appearance/Appearance.jsx

@@ -4,6 +4,11 @@ import { useTranslation } from "react-i18next";
 import styles from "./Appearance.module.scss";
 import { ui_configs } from "@ui_configs";
 import { useStore_SelectableFontFamilyList } from "@store";
+
+import {
+    useWindow,
+} from "@logics_common";
+
 import {
     useUiLanguage,
     useUiScaling,
@@ -52,6 +57,8 @@ const UiLanguageContainer = () => {
 const UiScalingContainer = () => {
     const { t } = useTranslation();
     const { currentUiScaling, setUiScaling } = useUiScaling();
+    const { asyncUpdateBreakPoint } = useWindow();
+
     const [ui_ui_scaling, setUiUiScaling] = useState(currentUiScaling.data);
 
     const onchangeFunction = (value) => {
@@ -62,6 +69,7 @@ const UiScalingContainer = () => {
     };
     useEffect(() => {
         setUiUiScaling(currentUiScaling.data);
+        asyncUpdateBreakPoint();
     }, [currentUiScaling.data]);
 
     const createMarks = (min, max) => {