[Update] Config Page: Device Tab. dropdown component. Add onMouseLeave Function. The content's text size up.

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

@@ -32,7 +32,6 @@
     position: absolute;
     top: 100%; // Position it below the toggle button
     right: 0;
-    width: 100%;
     min-width: 20rem;
     z-index: 1;
     &.is_opened {
@@ -46,11 +45,12 @@
     display: flex;
     flex-direction: column;
     gap: 0.1rem;
+    white-space: nowrap;
 }
 
 .value_button {
     background-color: var(--dark_875_color);
-    padding: 0.8rem;
+    padding: 1.2rem;
     cursor: pointer;
     &:hover {
         background-color: var(--dark_800_color);
@@ -61,7 +61,7 @@
 }
 
 .value_text {
-    font-size: 1.2rem;
+    font-size: 1.4rem;
 }
 
 .loader {

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

@@ -16,7 +16,7 @@ import { ActionButton } from "./action_button/ActionButton";
 import { WordFilter, WordFilterListToggleComponent } from "./word_filter/WordFilter";
 
 
-const useOnMouseLeaveDropdownMenu = () => {
+export const useOnMouseLeaveDropdownMenu = () => {
     const { updateIsOpenedDropdownMenu } = useStore_IsOpenedDropdownMenu();
 
     const onMouseLeaveFunction = () => {

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

@@ -2,6 +2,7 @@ import { useTranslation } from "react-i18next";
 import styles from "./Device.module.scss";
 import {
     ThresholdContainer,
+    useOnMouseLeaveDropdownMenu,
 } from "../components/useSettingBox";
 export const Device = () => {
     return (
@@ -25,6 +26,8 @@ const Mic_Container = () => {
     const { t } = useTranslation();
     const { currentSelectedMicHost, setSelectedMicHost } = useSelectedMicHost();
     const { currentMicHostList, getMicHostList } = useMicHostList();
+    const { onMouseLeaveFunction } = useOnMouseLeaveDropdownMenu();
+
 
     const selectFunction_host = (selected_data) => {
         setSelectedMicHost(selected_data.selected_id);
@@ -40,7 +43,7 @@ const Mic_Container = () => {
 
     return (
         <div className={styles.mic_container}>
-            <div className={styles.device_container}>
+            <div className={styles.device_container} onMouseLeave={onMouseLeaveFunction}>
                 <LabelComponent label={t("config_page.mic_host_device.label")} />
                 <div className={styles.device_contents}>
                     <div className={styles.device_dropdown_wrapper}>
@@ -88,15 +91,15 @@ const Speaker_Container = () => {
     const { t } = useTranslation();
     const { currentSelectedSpeakerDevice, setSelectedSpeakerDevice } = useSelectedSpeakerDevice();
     const { currentSpeakerDeviceList, getSpeakerDeviceList } = useSpeakerDeviceList();
+    const { onMouseLeaveFunction } = useOnMouseLeaveDropdownMenu();
 
     const selectFunction = (selected_data) => {
         setSelectedSpeakerDevice(selected_data.selected_id);
     };
 
-
     return (
         <div className={styles.speaker_container}>
-            <div className={styles.device_container}>
+            <div className={styles.device_container} onMouseLeave={onMouseLeaveFunction}>
                 <LabelComponent label={t("config_page.speaker_device.label")} />
                 <div className={styles.device_contents}>
                     <div className={styles.device_dropdown_wrapper}>