From c429a82b0ff7d634ecc666dc40c056070ad1037a Mon Sep 17 00:00:00 2001
From: Sakamoto Shiina <68018796+ShiinaSakamoto@users.noreply.github.com>
Date: Wed, 18 Dec 2024 17:13:19 +0900
Subject: [PATCH] [bugfix] Fix some breakpoints.

---
 .../setting_box/_templates/Templates.jsx      | 25 ++++++++++++-------
 .../setting_box/device/Device.jsx             | 16 ++++++++++--
 .../setting_box/device/Device.module.scss     | 11 ++++++++
 3 files changed, 41 insertions(+), 11 deletions(-)

diff --git a/src-ui/app/config_page/setting_section/setting_box/_templates/Templates.jsx b/src-ui/app/config_page/setting_section/setting_box/_templates/Templates.jsx
index 09b56263..7051ee17 100644
--- a/src-ui/app/config_page/setting_section/setting_box/_templates/Templates.jsx
+++ b/src-ui/app/config_page/setting_section/setting_box/_templates/Templates.jsx
@@ -67,7 +67,7 @@ export const CheckboxContainer = (props) => (
 );
 
 export const SwitchBoxContainer = (props) => (
-    <CommonContainer Component={SwitchBox} {...props} />
+    <CommonContainer Component={SwitchBox} {...props} add_break_point={false}/>
 );
 
 export const EntryContainer = (props) => (
@@ -78,15 +78,22 @@ 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} />
-            <OpenWebpage_DeeplAuthKey />
+export const DeeplAuthKeyContainer = (props) => {
+    const { currentIsBreakPoint } = useStore_IsBreakPoint();
+    const container_class = clsx(styles.container, {
+        [styles.is_break_point]: currentIsBreakPoint.data,
+    });
+
+    return (
+        <div className={container_class}>
+            <div className={styles.deepl_auth_key_label_section}>
+                <LabelComponent label={props.label} desc={props.desc} />
+                <OpenWebpage_DeeplAuthKey />
+            </div>
+            <DeeplAuthKey {...props} />
         </div>
-        <DeeplAuthKey {...props} />
-    </div>
-);
+    );
+};
 
 export const ActionButtonContainer = (props) => (
     <CommonContainer Component={ActionButton} {...props} add_break_point={false}/>
diff --git a/src-ui/app/config_page/setting_section/setting_box/device/Device.jsx b/src-ui/app/config_page/setting_section/setting_box/device/Device.jsx
index e9b4e4e5..958cddf8 100644
--- a/src-ui/app/config_page/setting_section/setting_box/device/Device.jsx
+++ b/src-ui/app/config_page/setting_section/setting_box/device/Device.jsx
@@ -1,5 +1,7 @@
 import { useTranslation } from "react-i18next";
 import styles from "./Device.module.scss";
+import clsx from "clsx";
+import { useStore_IsBreakPoint } from "@store";
 import { ui_configs } from "@ui_configs";
 import {
     useEnableAutoMicSelect,
@@ -68,9 +70,14 @@ const Mic_Container = () => {
         }
     };
 
+    const { currentIsBreakPoint } = useStore_IsBreakPoint();
+    const device_container_class = clsx(styles.device_container, {
+        [styles.is_break_point]: currentIsBreakPoint.data,
+    });
+
     return (
         <div className={styles.mic_container}>
-            <div className={styles.device_container} onMouseLeave={onMouseLeaveFunction}>
+            <div className={device_container_class} onMouseLeave={onMouseLeaveFunction}>
                 <LabelComponent label={t("config_page.device.mic_host_device.label")} />
                 <div className={styles.device_contents}>
 
@@ -159,9 +166,14 @@ const Speaker_Container = () => {
 
     };
 
+    const { currentIsBreakPoint } = useStore_IsBreakPoint();
+    const device_container_class = clsx(styles.device_container, {
+        [styles.is_break_point]: currentIsBreakPoint.data,
+    });
+
     return (
         <div className={styles.speaker_container}>
-            <div className={styles.device_container} onMouseLeave={onMouseLeaveFunction}>
+            <div className={device_container_class} onMouseLeave={onMouseLeaveFunction}>
                 <LabelComponent label={t("config_page.device.speaker_device.label")} />
                 <div className={styles.device_contents}>
 
diff --git a/src-ui/app/config_page/setting_section/setting_box/device/Device.module.scss b/src-ui/app/config_page/setting_section/setting_box/device/Device.module.scss
index 3f050ded..65fab80a 100644
--- a/src-ui/app/config_page/setting_section/setting_box/device/Device.module.scss
+++ b/src-ui/app/config_page/setting_section/setting_box/device/Device.module.scss
@@ -16,6 +16,17 @@
     align-items: center;
     padding: 2rem;
     margin-bottom: 0rem;
+    &.is_break_point {
+        flex-direction: column;
+        gap: 2rem;
+        align-items: start;
+        & .device_contents {
+            display: flex;
+            width: 100%;
+            justify-content: space-between;
+            padding-left: 0rem;
+        }
+    }
 }
 
 .threshold_container {