From f2b744711499f3fc05a040e2dcc92ebd26b1ec77 Mon Sep 17 00:00:00 2001
From: Ushran Gouhar <43915259+ugouhar@users.noreply.github.com>
Date: Wed, 1 Oct 2025 15:02:11 +0530
Subject: [PATCH] Set searchbox width through props (#23655)

---
 .../Domain/AddDomainForm/AddDomainForm.component.tsx           | 3 +++
 .../src/components/common/IconPicker/IconPicker.interface.ts   | 1 +
 .../ui/src/components/common/IconPicker/MUIIconPicker.tsx      | 2 ++
 .../ui/src/components/common/atoms/navigation/useSearch.tsx    | 3 ++-
 4 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Domain/AddDomainForm/AddDomainForm.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Domain/AddDomainForm/AddDomainForm.component.tsx
index 0feeb955174..a5bea5d5505 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/Domain/AddDomainForm/AddDomainForm.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/Domain/AddDomainForm/AddDomainForm.component.tsx
@@ -83,6 +83,9 @@ const AddDomainForm = ({
         type === DomainFormType.DATA_PRODUCT
           ? DEFAULT_DATA_PRODUCT_ICON
           : DEFAULT_DOMAIN_ICON,
+      customStyles: {
+        searchBoxWidth: 366,
+      },
     },
     formItemLayout: FormItemLayout.HORIZONTAL,
     formItemProps: {
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/common/IconPicker/IconPicker.interface.ts b/openmetadata-ui/src/main/resources/ui/src/components/common/IconPicker/IconPicker.interface.ts
index 6c4cd1c358b..2be8870d43e 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/common/IconPicker/IconPicker.interface.ts
+++ b/openmetadata-ui/src/main/resources/ui/src/components/common/IconPicker/IconPicker.interface.ts
@@ -38,4 +38,5 @@ export interface MUIIconPickerProps {
   backgroundColor?: string;
   toolTip?: ReactNode;
   defaultIcon?: IconDefinition;
+  customStyles?: Record<string, string | number>;
 }
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/common/IconPicker/MUIIconPicker.tsx b/openmetadata-ui/src/main/resources/ui/src/components/common/IconPicker/MUIIconPicker.tsx
index c95916e8d59..6984fb565f2 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/common/IconPicker/MUIIconPicker.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/common/IconPicker/MUIIconPicker.tsx
@@ -44,6 +44,7 @@ const MUIIconPicker: FC<MUIIconPickerProps> = ({
   toolTip,
   defaultIcon,
   onChange,
+  customStyles,
 }) => {
   const theme = useTheme();
   const { t } = useTranslation();
@@ -91,6 +92,7 @@ const MUIIconPicker: FC<MUIIconPickerProps> = ({
     searchPlaceholder: t('label.search'),
     onSearchChange: setSearchQuery,
     initialSearchQuery: '',
+    customStyles,
   });
 
   const filteredIcons = searchQuery
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/common/atoms/navigation/useSearch.tsx b/openmetadata-ui/src/main/resources/ui/src/components/common/atoms/navigation/useSearch.tsx
index 6b581b3d382..a235686a9c3 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/common/atoms/navigation/useSearch.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/common/atoms/navigation/useSearch.tsx
@@ -21,6 +21,7 @@ interface SearchConfig {
   searchPlaceholder: string;
   onSearchChange: (query: string) => void;
   initialSearchQuery?: string;
+  customStyles?: Record<string, string | number>;
 }
 
 export const useSearch = (config: SearchConfig) => {
@@ -73,7 +74,7 @@ export const useSearch = (config: SearchConfig) => {
           },
         }}
         sx={{
-          width: 354,
+          width: config.customStyles?.searchBoxWidth ?? 354,
           '& .MuiOutlinedInput-root': {
             width: '100%',
             backgroundColor: theme.palette.allShades?.blueGray?.[40],