From b3833b1074d7bc1b9836c7f09f8ad04ab100c714 Mon Sep 17 00:00:00 2001
From: Mark Stacey <markjstacey@gmail.com>
Date: Tue, 6 Aug 2019 16:09:40 -0300
Subject: [PATCH] Prevent hidden popup overlay

A hidden overlay was preventing interactions with the lower 356 pixels
in the popup view when there are zero notifications. It was also
preventing interactions with the 100 pixels above the notifications in
the case where there were two notifications, which obscured the `Send`
button.

The first problem was solved by ensuring the notification wrapper isn't
rendered when there are no notifications. The second problem was solved
by updating the notification wrapper style to avoid setting a height.
---
 .../app/multiple-notifications/index.scss     |  2 --
 .../multiple-notifications.component.js       | 32 +++++++++++--------
 2 files changed, 19 insertions(+), 15 deletions(-)

diff --git a/ui/app/components/app/multiple-notifications/index.scss b/ui/app/components/app/multiple-notifications/index.scss
index e3ee39a74..e8d064bc0 100644
--- a/ui/app/components/app/multiple-notifications/index.scss
+++ b/ui/app/components/app/multiple-notifications/index.scss
@@ -3,7 +3,6 @@
   display: flex;
   flex-direction: column;
   width: 472px;
-  height: 116px;
   position: absolute;
   bottom: 0;
   right: 0;
@@ -37,7 +36,6 @@
 }
 
 .home-notification-wrapper--show-all {
-  height: 356px;;
   justify-content: flex-end;
   margin-bottom: 0;
 
diff --git a/ui/app/components/app/multiple-notifications/multiple-notifications.component.js b/ui/app/components/app/multiple-notifications/multiple-notifications.component.js
index 09020c467..040890e18 100644
--- a/ui/app/components/app/multiple-notifications/multiple-notifications.component.js
+++ b/ui/app/components/app/multiple-notifications/multiple-notifications.component.js
@@ -18,21 +18,27 @@ export default class MultipleNotifications extends PureComponent {
 
     const notificationsToBeRendered = notifications.filter(notificationConfig => notificationConfig.shouldBeRendered)
 
-    return (<div
-      className={classnames(...classNames, {
-        'home-notification-wrapper--show-all': showAll,
-        'home-notification-wrapper--show-first': !showAll,
-      })}
-    >
-      { notificationsToBeRendered.map(notificationConfig => notificationConfig.component) }
+    if (notificationsToBeRendered.length === 0) {
+      return null
+    }
+
+    return (
       <div
-        className="home-notification-wrapper__i-container"
-        onClick={() => this.setState({ showAll: !showAll })}
+        className={classnames(...classNames, {
+          'home-notification-wrapper--show-all': showAll,
+          'home-notification-wrapper--show-first': !showAll,
+        })}
       >
-        {notificationsToBeRendered.length > 1 ? <i className={classnames('fa fa-sm fa-sort-amount-asc', {
-          'flipped': !showAll,
-        })} /> : null}
+        { notificationsToBeRendered.map(notificationConfig => notificationConfig.component) }
+        <div
+          className="home-notification-wrapper__i-container"
+          onClick={() => this.setState({ showAll: !showAll })}
+        >
+          {notificationsToBeRendered.length > 1 ? <i className={classnames('fa fa-sm fa-sort-amount-asc', {
+            'flipped': !showAll,
+          })} /> : null}
+        </div>
       </div>
-    </div>)
+    )
   }
 }