From b81a1f4051d1908f115a444289ced5cf3e5632d6 Mon Sep 17 00:00:00 2001
From: Jen Jones Arnesen <jennifer@dhis2.org>
Date: Wed, 17 Feb 2021 11:49:33 +0100
Subject: [PATCH] fix: hide filter modal when in small screen [DHIS2-10439,
 DHIS2-10138] (#1545)

Add a div surrounding the popover content, in order to target it in css without having to use !important, and set display:none in small screen
---
 src/components/ItemFilter/FilterSelector.js      | 16 ++++++++++------
 .../ItemFilter/styles/FilterSelector.module.css  |  4 ++++
 src/components/ItemSelector/ItemSelector.js      | 16 +++++++++-------
 .../ItemSelector/styles/ItemSelector.module.css  |  4 ++--
 4 files changed, 25 insertions(+), 15 deletions(-)

diff --git a/src/components/ItemFilter/FilterSelector.js b/src/components/ItemFilter/FilterSelector.js
index 97c3942d3..3d0d88504 100644
--- a/src/components/ItemFilter/FilterSelector.js
+++ b/src/components/ItemFilter/FilterSelector.js
@@ -53,12 +53,16 @@ const FilterSelector = props => {
                     placement="bottom-start"
                     dataTest="dashboard-filter-popover"
                 >
-                    <DimensionsPanel
-                        style={{ width: '320px' }}
-                        dimensions={props.dimensions}
-                        onDimensionClick={selectDimension}
-                        selectedIds={Object.keys(props.initiallySelectedItems)}
-                    />
+                    <div className={classes.popover}>
+                        <DimensionsPanel
+                            style={{ width: '320px' }}
+                            dimensions={props.dimensions}
+                            onDimensionClick={selectDimension}
+                            selectedIds={Object.keys(
+                                props.initiallySelectedItems
+                            )}
+                        />
+                    </div>
                 </Popover>
             )}
             {!isEmpty(props.dimension) ? (
diff --git a/src/components/ItemFilter/styles/FilterSelector.module.css b/src/components/ItemFilter/styles/FilterSelector.module.css
index 7300c0839..66ed87bf7 100644
--- a/src/components/ItemFilter/styles/FilterSelector.module.css
+++ b/src/components/ItemFilter/styles/FilterSelector.module.css
@@ -2,4 +2,8 @@
     .buttonContainer {
         display: none;
     }
+
+    .popover {
+        display: none;
+    }
 }
diff --git a/src/components/ItemSelector/ItemSelector.js b/src/components/ItemSelector/ItemSelector.js
index 5bb026ab2..9fe11264a 100644
--- a/src/components/ItemSelector/ItemSelector.js
+++ b/src/components/ItemSelector/ItemSelector.js
@@ -104,13 +104,15 @@ const ItemSelector = () => {
                     arrow={false}
                     maxWidth={700}
                 >
-                    <FlyoutMenu
-                        className={classes.menu}
-                        dataTest="item-menu"
-                        maxWidth="700px"
-                    >
-                        {getMenuGroups()}
-                    </FlyoutMenu>
+                    <div className={classes.popover}>
+                        <FlyoutMenu
+                            className={classes.menu}
+                            dataTest="item-menu"
+                            maxWidth="700px"
+                        >
+                            {getMenuGroups()}
+                        </FlyoutMenu>
+                    </div>
                 </Popover>
             )}
         </>
diff --git a/src/components/ItemSelector/styles/ItemSelector.module.css b/src/components/ItemSelector/styles/ItemSelector.module.css
index 5bcf6831e..0c04e6bbf 100644
--- a/src/components/ItemSelector/styles/ItemSelector.module.css
+++ b/src/components/ItemSelector/styles/ItemSelector.module.css
@@ -4,7 +4,7 @@
 }
 
 @media only screen and (max-width: 480px) {
-    .menu {
-        display: none !important;
+    .popover {
+        display: none;
     }
 }