Prevent tooltips and dropdowns from overflowing on y axis

assets/js/app.js

@@ -2,6 +2,7 @@ import './external_links';
 import './message_icons';
 import './forms';
 import './copyable_text';
+import './tooltips-and-dropdowns';
 import './main_menu';
 import './font-awesome';
 

assets/js/tooltips-and-dropdowns.js

@@ -0,0 +1,30 @@
+document.addEventListener('DOMContentLoaded', () => {
+    window.updateTooltips = () => {
+        console.debug('Update tooltips');
+        const elements = document.querySelectorAll('.tip, .dropdown');
+
+        // Calculate max potential displacement
+        let max = 0;
+        elements.forEach(el => {
+            const box = el.getBoundingClientRect();
+            if (max < box.height) max = box.height;
+        });
+
+        // Prevent displacement
+        elements.forEach(el => {
+            if (!el.tooltipSetup) {
+                el.tooltipSetup = true;
+                const box = el.getBoundingClientRect();
+                if (box.bottom >= document.body.clientHeight - (max + 32)) {
+                    el.classList.add('top');
+                }
+            }
+        });
+    };
+    window.addEventListener('popstate', () => {
+        updateTooltips();
+    });
+    window.requestAnimationFrame(() => {
+        updateTooltips();
+    });
+});

assets/sass/layout.scss

@@ -49,6 +49,11 @@ body {
 
 		text-transform: initial;
 		font-weight: initial;
+
+		&.top {
+			top: auto;
+			bottom: calc(100% + 8px);
+		}
 	}
 
 	&:hover, &:active {
@@ -157,7 +162,6 @@ body > header {
 					z-index: -1;
 					top: 100%;
 					right: 0;
-					display: none;
 
 					white-space: nowrap;
 					background: $headerBackground;