From 65530d961b82a75cc48f19f586f5d5788970638c Mon Sep 17 00:00:00 2001
From: devanshu052000 <devanshu.rastogi05@gmail.com>
Date: Wed, 2 Apr 2025 23:38:14 +0530
Subject: [PATCH] Fix multiselect menu UI issues.

---
 .../src/Editor/Components/DropdownV2/CustomMenuList.jsx    | 4 +---
 frontend/src/Editor/Components/DropdownV2/dropdownV2.scss  | 7 +++++++
 .../src/Editor/Components/MultiselectV2/MultiselectV2.jsx  | 1 +
 3 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/frontend/src/Editor/Components/DropdownV2/CustomMenuList.jsx b/frontend/src/Editor/Components/DropdownV2/CustomMenuList.jsx
index 31233d15d8..949efa0ca8 100644
--- a/frontend/src/Editor/Components/DropdownV2/CustomMenuList.jsx
+++ b/frontend/src/Editor/Components/DropdownV2/CustomMenuList.jsx
@@ -103,11 +103,9 @@ const CustomMenuList = ({ selectProps, ...props }) => {
       {!optionsLoadingState && (
         <div
           ref={parentRef}
+          className="dropdown-multiselect-widget-custom-menu-list-body"
           style={{
             maxHeight: selectProps.maxMenuHeight || 300,
-            overflowY: 'auto',
-            position: 'relative',
-            padding: '5px 0',
           }}
         >
           <div
diff --git a/frontend/src/Editor/Components/DropdownV2/dropdownV2.scss b/frontend/src/Editor/Components/DropdownV2/dropdownV2.scss
index e69de29bb2..763f03cc86 100644
--- a/frontend/src/Editor/Components/DropdownV2/dropdownV2.scss
+++ b/frontend/src/Editor/Components/DropdownV2/dropdownV2.scss
@@ -0,0 +1,7 @@
+.dropdown-multiselect-widget-custom-menu-list-body {
+    overflow-y: auto;
+    position: relative;
+    padding: 5px 0;
+    background-color: var(--surfaces-surface-01) !important;
+    border-radius: 0 0 8px 8px;
+}
\ No newline at end of file
diff --git a/frontend/src/Editor/Components/MultiselectV2/MultiselectV2.jsx b/frontend/src/Editor/Components/MultiselectV2/MultiselectV2.jsx
index 3c8f0521d8..d77521f7fa 100644
--- a/frontend/src/Editor/Components/MultiselectV2/MultiselectV2.jsx
+++ b/frontend/src/Editor/Components/MultiselectV2/MultiselectV2.jsx
@@ -431,6 +431,7 @@ export const MultiselectV2 = ({
     menu: (provided) => ({
       ...provided,
       marginTop: '5px',
+      borderRadius: '8px',
     }),
   };
   const _width = (labelWidth / 100) * 70; // Max width which label can go is 70% for better UX calculate width based on this value