From da397d32f479a2f38fe79d6d26d10732cb4386ce Mon Sep 17 00:00:00 2001
From: Tolulope Adetula <31691737+Tooluloope@users.noreply.github.com>
Date: Thu, 31 Mar 2022 17:19:29 +0100
Subject: [PATCH] fix: css dropdown for multiselect

---
 .../component/index.styled.tsx                | 61 +++++++++++--------
 1 file changed, 34 insertions(+), 27 deletions(-)

diff --git a/app/client/src/widgets/MultiSelectWidgetV2/component/index.styled.tsx b/app/client/src/widgets/MultiSelectWidgetV2/component/index.styled.tsx
index 4e5aef0d64..209c23be8a 100644
--- a/app/client/src/widgets/MultiSelectWidgetV2/component/index.styled.tsx
+++ b/app/client/src/widgets/MultiSelectWidgetV2/component/index.styled.tsx
@@ -157,7 +157,38 @@ export const DropdownStyles = createGlobalStyle<{
 }>`
 ${({ dropDownWidth, id }) => `
   .multiselect-popover-width-${id} {
-    min-width: ${dropDownWidth}px !important;
+    width: ${dropDownWidth}px !important;
+
+    &.rc-select-dropdown-hidden {
+      display: none !important;
+    }
+    &.multi-select-dropdown {
+      min-height: 100px;
+      position: absolute;
+      background: #fff;
+      width: auto;
+      border-radius: 0px;
+      margin-top: 5px;
+      background: white;
+      box-shadow: 0 6px 20px 0px rgba(0, 0, 0, 0.15) !important;
+      overflow-x: scroll;
+      > div {
+          min-width: ${dropDownWidth}px;
+        }
+      .rc-select-item {
+        font-size: 14px;
+        padding: 5px 16px;
+        align-items: center;
+        cursor: pointer;
+        width: 100%;
+        height: 38px;
+      }
+      .rc-select-item-option-state {
+        .bp3-control.bp3-checkbox {
+          margin-bottom: 0;
+        }
+      }
+    }
   }
 `}
 .rc-select-dropdown-hidden {
@@ -283,35 +314,10 @@ ${({ dropDownWidth, id }) => `
 	animation-name: ${rcSelectDropdownSlideUpOut};
 	animation-play-state: running;
 }
-
 .multi-select-dropdown {
-  min-height: 100px;
-  position: absolute;
-  background: #fff;
-  width: auto;
-  border-radius: 0px;
-  margin-top: 5px;
-  background: white;
-  box-shadow: 0 6px 20px 0px rgba(0, 0, 0, 0.15) !important;
-   overflow-x: scroll;
-  > div {
-      min-width: ${({ dropDownWidth }) => dropDownWidth}px;
-    }
     ${CommonSelectFilterStyle}
-  .rc-select-item {
-    font-size: 14px;
-    padding: 5px 16px;
-    align-items: center;
-    cursor: pointer;
-    width: 100%;
-    height: 38px;
-  }
-  .rc-select-item-option-state {
-    .bp3-control.bp3-checkbox {
-      margin-bottom: 0;
-    }
-  }
 }
+
 `;
 
 export const MultiSelectContainer = styled.div<{
@@ -426,6 +432,7 @@ export const MultiSelectContainer = styled.div<{
       }
       .rc-select-selection-overflow {
         display: flex;
+        flex-wrap: wrap;
         width: 100%;
         align-items: center;
       }