diff --git a/src-ui/app/config_page/setting_section/setting_box/components/dropdown_menu/DropdownMenu.module.scss b/src-ui/app/config_page/setting_section/setting_box/components/dropdown_menu/DropdownMenu.module.scss index 28923e12..0387f420 100644 --- a/src-ui/app/config_page/setting_section/setting_box/components/dropdown_menu/DropdownMenu.module.scss +++ b/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 { diff --git a/src-ui/app/config_page/setting_section/setting_box/components/useSettingBox.jsx b/src-ui/app/config_page/setting_section/setting_box/components/useSettingBox.jsx index 3d26af83..ad536482 100644 --- a/src-ui/app/config_page/setting_section/setting_box/components/useSettingBox.jsx +++ b/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 = () => { 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 76fec368..83942a2c 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 @@ -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 (
-
+
@@ -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 (
-
+