From 3ae8f79288667157faafd732e526434b71bcd11c Mon Sep 17 00:00:00 2001
From: Peter Muriuki <pmuriuki98@gmail.com>
Date: Thu, 19 Sep 2024 11:33:20 +0300
Subject: [PATCH] Style tweak on async select component

---
 .../src/components/AsyncSelect/BaseAsyncSelect/index.css       | 3 +++
 .../src/components/AsyncSelect/BaseAsyncSelect/index.tsx       | 1 +
 .../src/components/AsyncSelect/PaginatedAsyncSelect/index.tsx  | 2 +-
 .../src/components/AsyncSelect/ValueSetAsyncSelect/index.tsx   | 1 +
 4 files changed, 6 insertions(+), 1 deletion(-)
 create mode 100644 packages/react-utils/src/components/AsyncSelect/BaseAsyncSelect/index.css

diff --git a/packages/react-utils/src/components/AsyncSelect/BaseAsyncSelect/index.css b/packages/react-utils/src/components/AsyncSelect/BaseAsyncSelect/index.css
new file mode 100644
index 000000000..edf6983a4
--- /dev/null
+++ b/packages/react-utils/src/components/AsyncSelect/BaseAsyncSelect/index.css
@@ -0,0 +1,3 @@
+.asyncSelect{
+    min-width: 240px;
+}
\ No newline at end of file
diff --git a/packages/react-utils/src/components/AsyncSelect/BaseAsyncSelect/index.tsx b/packages/react-utils/src/components/AsyncSelect/BaseAsyncSelect/index.tsx
index d2cd4d0ad..8ddb564fb 100644
--- a/packages/react-utils/src/components/AsyncSelect/BaseAsyncSelect/index.tsx
+++ b/packages/react-utils/src/components/AsyncSelect/BaseAsyncSelect/index.tsx
@@ -5,6 +5,7 @@ import { SelectProps, DefaultOptionType } from 'antd/lib/select';
 import { useTranslation } from '../../../mls';
 import { UseQueryOptions, useQuery } from 'react-query';
 import { TFunction } from '@opensrp/i18n';
+import "./index.css"
 
 export type RawValueType = string | number | (string | number)[];
 
diff --git a/packages/react-utils/src/components/AsyncSelect/PaginatedAsyncSelect/index.tsx b/packages/react-utils/src/components/AsyncSelect/PaginatedAsyncSelect/index.tsx
index 44cb99346..5c52773a7 100644
--- a/packages/react-utils/src/components/AsyncSelect/PaginatedAsyncSelect/index.tsx
+++ b/packages/react-utils/src/components/AsyncSelect/PaginatedAsyncSelect/index.tsx
@@ -173,7 +173,7 @@ export function PaginatedAsyncSelect<ResourceT extends IResource>(
   const remainingRecords = totalPossibleRecords - recordsFetchedNum;
 
   const propsToSelect = {
-    style: { minWidth: '200px' },
+    className: "asyncSelect",
     ...restProps,
     placeholder,
     onChange: changeHandler,
diff --git a/packages/react-utils/src/components/AsyncSelect/ValueSetAsyncSelect/index.tsx b/packages/react-utils/src/components/AsyncSelect/ValueSetAsyncSelect/index.tsx
index 74dc66055..85b88a329 100644
--- a/packages/react-utils/src/components/AsyncSelect/ValueSetAsyncSelect/index.tsx
+++ b/packages/react-utils/src/components/AsyncSelect/ValueSetAsyncSelect/index.tsx
@@ -54,6 +54,7 @@ export function ValueSetAsyncSelect(props: ValueSetAsyncSelectProps) {
   const selectDropDownRender = dropDownFactory(t, data, error as Error);
 
   const selectProps = {
+    className: "asyncSelect",
     dropdownRender: selectDropDownRender,
     options: data,
     loading: isLoading,