fix popover out of visible area

app/assets/javascripts/app/lib/bootstrap/popover-enhance.js

@@ -27,4 +27,38 @@ $.fn.popover.Constructor.prototype.leave = function(obj){
       });
     })
   }
-};
+};
+
+/*
+
+  Add global 10px padding
+
+*/
+
+$.fn.popover.Constructor.DEFAULTS.viewport.padding = 10;
+
+/* 
+
+  Extend zammad popover template
+
+  adds a popover-body around popover-title and popover-content 
+  to make the popover scrollable without hiding the arrow
+
+*/
+
+$.fn.popover.Constructor.DEFAULTS.template = '<div class="popover" role="tooltip"><div class="arrow"></div><div class="popover-body"><h2 class="popover-title"></h2><div class="popover-content"></div></div></div>';
+
+/*
+
+  Add maxHeight to popovers
+
+*/
+
+var originalShow = $.fn.popover.Constructor.prototype.show;
+
+$.fn.popover.Constructor.prototype.show = function(){
+  originalShow.call(this);
+
+  var maxHeight = $(this.options.viewport.selector).height() - 2 * this.options.viewport.padding;
+  this.$tip.find('.popover-body').css('maxHeight', maxHeight);
+}

app/assets/stylesheets/zammad.css.scss

@@ -1,8 +1,13 @@
+html {
+  height: 100%;
+}
+
 body {
   font-family: "Fira Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
   line-height: 1.45;
   font-weight: normal;
   background: hsl(210,17%,98%);
+  height: 100%;
 }
 
 p {
@@ -2810,9 +2815,12 @@ footer {
   z-index: 1110;
   box-shadow: 0 1px 14px rgba(0,8,14,.25);
   word-wrap: break-word;
-  // max-height: calc(100vh - 20px);
 }
 
+  .popover-body {
+    overflow: auto;
+  }
+
   .popover-title {
     border: none;
     background: none;
@@ -2821,7 +2829,6 @@ footer {
 
   .popover-content {
     padding: 0 17px 10px;
-    overflow-y: auto;
   }
 
   .popover.right { margin-left: 4px; }