diff --git a/app/assets/javascripts/app/controllers/widget/online_notification.js.coffee b/app/assets/javascripts/app/controllers/widget/online_notification.js.coffee
index 3e4daa2a3..2dd7e937e 100644
--- a/app/assets/javascripts/app/controllers/widget/online_notification.js.coffee
+++ b/app/assets/javascripts/app/controllers/widget/online_notification.js.coffee
@@ -64,17 +64,19 @@ class App.OnlineNotificationWidget extends App.Controller
   onShow: =>
     @updateContent()
 
-    # set heigth of notification popover
-    heightApp            = $('#navigation').height()
-    heightPopoverHeader  = $('.js-notificationsContainer .popover-notificationsHeader').height()
-    heightPopoverContent = $('.js-notificationsContainer .popover-content').get(0).scrollHeight
-    height               = heightPopoverHeader + heightPopoverContent
-    if height > heightApp
-      height = heightApp - heightPopoverHeader - 56
-    $('.js-notificationsContainer .popover-content').css('height', "#{height}px")
-
-    # set popover arrow
-    $('.js-notificationsContainer .arrow').css('top', '20px')
+    # set height of notification popover
+    notificationsContainer  = $('.js-notificationsContainer')
+    heightApp               = $('#app').height()
+    heightPopoverSpacer     = 36
+    heightPopoverHeader     = notificationsContainer.find('.popover-notificationsHeader').outerHeight()
+    heightPopoverContent    = notificationsContainer.find('.popover-content').get(0).scrollHeight
+    heightPopoverContentNew = heightPopoverContent
+    if (heightPopoverHeader + heightPopoverContent + heightPopoverSpacer) > heightApp
+      heightPopoverContentNew = heightApp - heightPopoverHeader - heightPopoverSpacer
+      notificationsContainer.addClass('is-overflowing')
+    else
+      notificationsContainer.removeClass('is-overflowing')
+    notificationsContainer.find('.popover-content').css('height', "#{heightPopoverContentNew}px")
 
     # close notification list on click
     $('.js-notificationsContainer').on('click', (e) =>
diff --git a/app/assets/stylesheets/zammad.css.scss b/app/assets/stylesheets/zammad.css.scss
index 3d27efde8..ee1bee5a3 100644
--- a/app/assets/stylesheets/zammad.css.scss
+++ b/app/assets/stylesheets/zammad.css.scss
@@ -2710,18 +2710,23 @@ footer {
   }
 
   .popover--notifications {
+    min-height: 100px;
     @extend .zIndex-5;
-    
+
     &.is-visible {
       @extend .vertical;
     }
 
+    .arrow {
+      top: 23px !important;
+    }
+
     .popover-content {
       @extend .flex;
     }
 
     &.is-overflowing .popover-notificationsHeader {
-      box-shadow: 
+      box-shadow:
         0 1px hsla(240,4%,95%,.5),
         0 2px hsla(240,4%,95%,.2);
     }
@@ -2732,7 +2737,7 @@ footer {
     @extend .end;
     padding-bottom: 22px;
     margin: 21px 17px 0;
-    
+
     .popover-title {
       @extend h1;
       padding: 0;