From 6e6bc36f4a173e24559e9d9076b3f3d00467226b Mon Sep 17 00:00:00 2001
From: Harshil Sharma <18575143+harshilsharma63@users.noreply.github.com>
Date: Wed, 6 Jul 2022 20:51:16 +0530
Subject: [PATCH] Added max height limit on filter options dropdown (#3313)

* Added max height limit on filter options dropdown

* Updated tests

* lint fix
---
 .../viewHeader/__snapshots__/filterValue.test.tsx.snap      | 6 +++---
 webapp/src/components/viewHeader/filterValue.scss           | 6 ++++++
 webapp/src/components/viewHeader/filterValue.tsx            | 4 +++-
 3 files changed, 12 insertions(+), 4 deletions(-)
 create mode 100644 webapp/src/components/viewHeader/filterValue.scss

diff --git a/webapp/src/components/viewHeader/__snapshots__/filterValue.test.tsx.snap b/webapp/src/components/viewHeader/__snapshots__/filterValue.test.tsx.snap
index 6149516b3..4c3cccca8 100644
--- a/webapp/src/components/viewHeader/__snapshots__/filterValue.test.tsx.snap
+++ b/webapp/src/components/viewHeader/__snapshots__/filterValue.test.tsx.snap
@@ -4,7 +4,7 @@ exports[`components/viewHeader/filterValue return filterValue 1`] = `
 <div>
   <div
     aria-label="menuwrapper"
-    class="MenuWrapper"
+    class="MenuWrapper filterValue"
     role="button"
   >
     <button
@@ -86,7 +86,7 @@ exports[`components/viewHeader/filterValue return filterValue and click Status 1
 <div>
   <div
     aria-label="menuwrapper"
-    class="MenuWrapper"
+    class="MenuWrapper filterValue"
     role="button"
   >
     <button
@@ -105,7 +105,7 @@ exports[`components/viewHeader/filterValue return filterValue and click Status w
 <div>
   <div
     aria-label="menuwrapper"
-    class="MenuWrapper"
+    class="MenuWrapper filterValue"
     role="button"
   >
     <button
diff --git a/webapp/src/components/viewHeader/filterValue.scss b/webapp/src/components/viewHeader/filterValue.scss
new file mode 100644
index 000000000..8294214eb
--- /dev/null
+++ b/webapp/src/components/viewHeader/filterValue.scss
@@ -0,0 +1,6 @@
+.filterValue {
+    .Menu {
+        max-height: 400px;
+        overflow-y: auto;
+    }
+}
diff --git a/webapp/src/components/viewHeader/filterValue.tsx b/webapp/src/components/viewHeader/filterValue.tsx
index 378506a65..34591ecae 100644
--- a/webapp/src/components/viewHeader/filterValue.tsx
+++ b/webapp/src/components/viewHeader/filterValue.tsx
@@ -12,6 +12,8 @@ import Button from '../../widgets/buttons/button'
 import Menu from '../../widgets/menu'
 import MenuWrapper from '../../widgets/menuWrapper'
 
+import './filterValue.scss'
+
 type Props = {
     view: BoardView
     filter: FilterClause
@@ -35,7 +37,7 @@ const filterValue = (props: Props): JSX.Element|null => {
     }
 
     return (
-        <MenuWrapper>
+        <MenuWrapper className='filterValue'>
             <Button>{displayValue}</Button>
             <Menu>
                 {template.options.map((o) => (