From 67df905a42493b1e7336f9df298c1b51a55ec04c Mon Sep 17 00:00:00 2001
From: Harshil Sharma <harshilsharma63@gmail.com>
Date: Mon, 21 Jun 2021 15:26:48 +0530
Subject: [PATCH] Fixed issue with dropdown background being height-limited
 (#594)

* Fixed issue with dropdown background being height-limited

* Fixed height issue in a better way
---
 .../properties/user/__snapshots__/user.test.tsx.snap           | 2 +-
 webapp/src/theme.ts                                            | 3 ++-
 webapp/src/widgets/valueSelector.scss                          | 2 +-
 webapp/src/widgets/valueSelector.tsx                           | 2 ++
 4 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/webapp/src/components/properties/user/__snapshots__/user.test.tsx.snap b/webapp/src/components/properties/user/__snapshots__/user.test.tsx.snap
index c338a8a65..25d05dfcd 100644
--- a/webapp/src/components/properties/user/__snapshots__/user.test.tsx.snap
+++ b/webapp/src/components/properties/user/__snapshots__/user.test.tsx.snap
@@ -171,7 +171,7 @@ exports[`components/properties/user user dropdown open 1`] = `
       class=" css-7p3rb2-menu"
     >
       <div
-        class=" css-1m3ubgr-MenuList"
+        class=" css-g29tl0-MenuList"
       >
         <div
           class=" css-gg45go-NoOptionsMessage"
diff --git a/webapp/src/theme.ts b/webapp/src/theme.ts
index 242ecfe6c..42a9bd9e3 100644
--- a/webapp/src/theme.ts
+++ b/webapp/src/theme.ts
@@ -245,7 +245,8 @@ export function getSelectBaseStyle() {
         }),
         menuList: (provided: CSSObject): CSSObject => ({
             ...provided,
-            overflowY: 'unset',
+            overflowY: 'auto',
+            overflowX: 'hidden',
         }),
     }
 }
diff --git a/webapp/src/widgets/valueSelector.scss b/webapp/src/widgets/valueSelector.scss
index 5913b8c05..fdbbde9da 100644
--- a/webapp/src/widgets/valueSelector.scss
+++ b/webapp/src/widgets/valueSelector.scss
@@ -64,7 +64,7 @@
     text-overflow: ellipsis;
     display: inline-block;
 
-    
+
 }
 
 .octo-property-value > .Label {
diff --git a/webapp/src/widgets/valueSelector.tsx b/webapp/src/widgets/valueSelector.tsx
index 7b0c46f74..c26b0bd17 100644
--- a/webapp/src/widgets/valueSelector.tsx
+++ b/webapp/src/widgets/valueSelector.tsx
@@ -131,6 +131,8 @@ const valueSelectorStyle = {
 function ValueSelector(props: Props): JSX.Element {
     return (
         <CreatableSelect
+            captureMenuScroll={true}
+            maxMenuHeight={580}
             isMulti={props.isMulti}
             isClearable={true}
             styles={valueSelectorStyle}