From 5f2215f4919ae52a858e7aff260c5780c76e3223 Mon Sep 17 00:00:00 2001
From: Alice Gaudon <alice@gaudon.pro>
Date: Wed, 16 Sep 2020 12:38:33 +0200
Subject: [PATCH] Prevent tooltips and dropdowns from overflowing on y axis

---
 assets/js/app.js                    |  1 +
 assets/js/tooltips-and-dropdowns.js | 30 +++++++++++++++++++++++++++++
 assets/sass/layout.scss             |  6 +++++-
 3 files changed, 36 insertions(+), 1 deletion(-)
 create mode 100644 assets/js/tooltips-and-dropdowns.js

diff --git a/assets/js/app.js b/assets/js/app.js
index 039ac2e..48eba69 100644
--- a/assets/js/app.js
+++ b/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';
 
diff --git a/assets/js/tooltips-and-dropdowns.js b/assets/js/tooltips-and-dropdowns.js
new file mode 100644
index 0000000..3fa6e5b
--- /dev/null
+++ b/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();
+    });
+});
\ No newline at end of file
diff --git a/assets/sass/layout.scss b/assets/sass/layout.scss
index dd587d4..e05bbcb 100644
--- a/assets/sass/layout.scss
+++ b/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;