[Update/bugfix] Config Page: Device Tab. Mic host/device section. Put together mic host and device settings in one section.

Fix dropdown menu contents width and position. and add padding right for preventing text to cover svg arrow.

src-ui/app/config_page/setting_section/setting_box/components/dropdown_menu/DropdownMenu.jsx

@@ -43,7 +43,7 @@ export const DropdownMenu = (props) => {
 
     return (
         <div className={styles.container}>
-            <div className={dropdown_toggle_button_class_name} onClick={toggleDropdownMenu}>
+            <div className={dropdown_toggle_button_class_name} onClick={toggleDropdownMenu} style={props.style}>
                 {(props.state === "loading")
                     ? <p className={styles.dropdown_selected_text}>Loading...</p>
                     : <p className={styles.dropdown_selected_text}>{getSelectedText()}</p>

src-ui/app/config_page/setting_section/setting_box/components/dropdown_menu/DropdownMenu.module.scss

@@ -24,14 +24,16 @@
 
 .dropdown_selected_text {
     font-size: 1.4rem;
+    padding-right: 2.8rem;
 }
 
 .dropdown_content_wrapper {
     display: none;
     position: absolute;
     top: 100%; // Position it below the toggle button
-    left: 0;
+    right: 0;
     width: 100%;
+    min-width: 20rem;
     z-index: 1;
     &.is_opened {
         display: block;

src-ui/app/config_page/setting_section/setting_box/components/useSettingBox.jsx

@@ -54,9 +54,6 @@ export const ThresholdContainer = (props) => {
 
 
 export const useSettingBox = () => {
-    console.log("useSettingBox______________");
-
-
     const SliderContainer = (props) => {
         return (
             <div className={styles.container}>

src-ui/app/config_page/setting_section/setting_box/components/useSettingBox.module.scss

@@ -4,7 +4,6 @@
     justify-content: space-between;
     align-items: center;
     padding: 2rem;
-    display: flex;
     justify-content: space-between;
     align-items: center;
     gap: 2rem;

src-ui/app/config_page/setting_section/setting_box/device/Device.jsx

@@ -1,4 +1,5 @@
 import { useTranslation } from "react-i18next";
+import styles from "./Device.module.scss";
 import {
     DropdownMenuContainer,
     ThresholdContainer,
@@ -8,7 +9,7 @@ export const Device = () => {
     return (
         <>
             <DropdownMenuContainer_MicHost />
-            <DropdownMenuContainer_MicDevice />
+            {/* <DropdownMenuContainer_MicDevice /> */}
             <ThresholdContainer_Mic />
             <DropdownMenuContainer_SpeakerDevice />
             <ThresholdContainer_Speaker />
@@ -18,53 +19,90 @@ export const Device = () => {
 
 import { useMicHostList } from "@logics_configs/useMicHostList";
 import { useSelectedMicHost } from "@logics_configs/useSelectedMicHost";
+
+import { useMicDeviceList } from "@logics_configs/useMicDeviceList";
+import { useSelectedMicDevice } from "@logics_configs/useSelectedMicDevice";
+
+import { LabelComponent } from "../components/label_component/LabelComponent";
+import { DropdownMenu } from "../components/dropdown_menu/DropdownMenu";
+
 const DropdownMenuContainer_MicHost = () => {
     const { t } = useTranslation();
     const { currentSelectedMicHost, setSelectedMicHost } = useSelectedMicHost();
     const { currentMicHostList, getMicHostList } = useMicHostList();
 
-    const selectFunction = (selected_data) => {
+    const selectFunction_host = (selected_data) => {
         setSelectedMicHost(selected_data.selected_id);
     };
 
-    return (
-        <DropdownMenuContainer
-            dropdown_id="mic_host"
-            label={t("config_page.mic_host.label")}
-            selected_id={currentSelectedMicHost.data}
-            list={currentMicHostList.data}
-            selectFunction={selectFunction}
-            openListFunction={getMicHostList}
-            state={currentSelectedMicHost.state}
-        />
-    );
-};
-
-import { useMicDeviceList } from "@logics_configs/useMicDeviceList";
-import { useSelectedMicDevice } from "@logics_configs/useSelectedMicDevice";
-const DropdownMenuContainer_MicDevice = () => {
-    const { t } = useTranslation();
     const { currentSelectedMicDevice, setSelectedMicDevice } = useSelectedMicDevice();
     const { currentMicDeviceList, getMicDeviceList } = useMicDeviceList();
 
-    const selectFunction = (selected_data) => {
+    const selectFunction_device = (selected_data) => {
         setSelectedMicDevice(selected_data.selected_id);
     };
 
 
     return (
-        <DropdownMenuContainer
-            dropdown_id="mic_device"
-            label={t("config_page.mic_device.label")}
-            selected_id={currentSelectedMicDevice.data}
-            list={currentMicDeviceList.data}
-            selectFunction={selectFunction}
-            openListFunction={getMicDeviceList}
-            state={currentSelectedMicDevice.state}
-        />
+        <div className={styles.device_container}>
+            <LabelComponent label={t("config_page.mic_host.label")} />
+
+            <div className={styles.device_contents}>
+                <div className={styles.device_dropdown_wrapper}>
+                    <p className={styles.device_dropdown_label}>Host/Driver</p>
+                    <DropdownMenu
+                        dropdown_id="mic_host"
+                        selected_id={currentSelectedMicHost.data}
+                        list={currentMicHostList.data}
+                        selectFunction={selectFunction_host}
+                        openListFunction={getMicHostList}
+                        state={currentSelectedMicHost.state}
+                        style={{ maxWidth: "20rem", minWidth: "10rem" }}
+                    />
+                </div>
+
+                <div className={styles.device_dropdown_wrapper}>
+                    <p className={styles.device_dropdown_label}>Device</p>
+                    <DropdownMenu
+                        dropdown_id="mic_device"
+                        label={t("config_page.mic_device.label")}
+                        selected_id={currentSelectedMicDevice.data}
+                        list={currentMicDeviceList.data}
+                        selectFunction={selectFunction_device}
+                        openListFunction={getMicDeviceList}
+                        state={currentSelectedMicDevice.state}
+                    />
+                </div>
+            </div>
+        </div>
     );
 };
 
+// import { useMicDeviceList } from "@logics_configs/useMicDeviceList";
+// import { useSelectedMicDevice } from "@logics_configs/useSelectedMicDevice";
+// const DropdownMenuContainer_MicDevice = () => {
+//     const { t } = useTranslation();
+//     const { currentSelectedMicDevice, setSelectedMicDevice } = useSelectedMicDevice();
+//     const { currentMicDeviceList, getMicDeviceList } = useMicDeviceList();
+
+//     const selectFunction = (selected_data) => {
+//         setSelectedMicDevice(selected_data.selected_id);
+//     };
+
+
+//     return (
+//         <DropdownMenuContainer
+//             dropdown_id="mic_device"
+//             label={t("config_page.mic_device.label")}
+//             selected_id={currentSelectedMicDevice.data}
+//             list={currentMicDeviceList.data}
+//             selectFunction={selectFunction}
+//             openListFunction={getMicDeviceList}
+//             state={currentSelectedMicDevice.state}
+//         />
+//     );
+// };
+
 import { useSpeakerDeviceList } from "@logics_configs/useSpeakerDeviceList";
 import { useSelectedSpeakerDevice } from "@logics_configs/useSelectedSpeakerDevice";
 const DropdownMenuContainer_SpeakerDevice = () => {

src-ui/app/config_page/setting_section/setting_box/device/Device.module.scss

@@ -0,0 +1,24 @@
+.device_container {
+    display: flex;
+    width: 100%;
+    justify-content: space-between;
+    align-items: center;
+    padding: 2rem;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.device_contents {
+    display: flex;
+    gap: 2.8rem;
+}
+
+.device_dropdown_wrapper {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+}
+
+.device_dropdown_label {
+    font-size: 1.4rem;
+}