diff --git a/components/webui/client/src/components/QueryBox/index.module.css b/components/webui/client/src/components/QueryBox/index.module.css index db8f244373..011a233fff 100644 --- a/components/webui/client/src/components/QueryBox/index.module.css +++ b/components/webui/client/src/components/QueryBox/index.module.css @@ -1,6 +1,7 @@ .queryBox { + flex: 1; + min-width: 100px; position: relative; - width: 100%; } .progressBarMask { diff --git a/components/webui/client/src/pages/SearchPage/SearchControls/Dataset/index.module.css b/components/webui/client/src/pages/SearchPage/SearchControls/Dataset/index.module.css index 110f752160..20273aa92a 100644 --- a/components/webui/client/src/pages/SearchPage/SearchControls/Dataset/index.module.css +++ b/components/webui/client/src/pages/SearchPage/SearchControls/Dataset/index.module.css @@ -1,5 +1,6 @@ .datasetContainer { display: flex; + max-width: 250px; } .selectContainer { diff --git a/components/webui/client/src/pages/SearchPage/SearchControls/MaxResultsSelect/index.module.css b/components/webui/client/src/pages/SearchPage/SearchControls/MaxResultsSelect/index.module.css new file mode 100644 index 0000000000..e5798ca767 --- /dev/null +++ b/components/webui/client/src/pages/SearchPage/SearchControls/MaxResultsSelect/index.module.css @@ -0,0 +1,13 @@ +.maxResultsContainer { + display: flex; +} + +.maxResultsContainer :global(.ant-select) { + min-width: 80px; + max-width: 80px; +} + +.maxResultsContainer :global(.ant-select-selector) { + border-top-left-radius: 0 !important; + border-bottom-left-radius: 0 !important; +} diff --git a/components/webui/client/src/pages/SearchPage/SearchControls/MaxResultsSelect/index.tsx b/components/webui/client/src/pages/SearchPage/SearchControls/MaxResultsSelect/index.tsx new file mode 100644 index 0000000000..e59d5406ab --- /dev/null +++ b/components/webui/client/src/pages/SearchPage/SearchControls/MaxResultsSelect/index.tsx @@ -0,0 +1,46 @@ +import {Select} from "antd"; + +import InputLabel from "../../../../components/InputLabel"; +import useSearchStore from "../../SearchState"; +import { + MAX_RESULTS_OPTIONS, + SEARCH_UI_STATE, +} from "../../SearchState/typings"; +import styles from "./index.module.css"; + + +/** + * Renders a dropdown to select the maximum number of search results. + * + * @return + */ +const MaxResultsSelect = () => { + const maxNumResults = useSearchStore((state) => state.maxNumResults); + const updateMaxNumResults = useSearchStore((state) => state.updateMaxNumResults); + const searchUiState = useSearchStore((state) => state.searchUiState); + + const isDisabled = searchUiState === SEARCH_UI_STATE.QUERY_ID_PENDING || + searchUiState === SEARCH_UI_STATE.QUERYING; + + const handleChange = (value: number) => { + updateMaxNumResults(value); + }; + + return ( +
+ Limit +