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.

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>)
+    )
   }
 }