Fix search box out of screen (#2650)

Programatically set search results max height
flarum · Mar 7, 2021 · 3aa118a · 3aa118a
1 parent 4b0ad69
commit 3aa118a
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 1 deletion.
diff --git a/js/src/forum/components/Search.js b/js/src/forum/components/Search.js
@@ -113,6 +113,13 @@ export default class Search extends Component {
   onupdate() {
     // Highlight the item that is currently selected.
     this.setIndex(this.getCurrentNumericIndex());
+
+    // Since extensions might add elements above the search box on mobile,
+    // we need to calculate and set the max height dynamically.
+    const resultsElementMargin = 14;
+    const maxHeight =
+      window.innerHeight - this.element.querySelector('.Search-input>.FormControl').getBoundingClientRect().bottom - resultsElementMargin;
+    this.element.querySelector('.Search-results').style['max-height'] = `${maxHeight}px`;
   }
 
   oncreate(vnode) {

diff --git a/less/common/Search.less b/less/common/Search.less
@@ -15,7 +15,6 @@
   }
 }
 .Search-results {
-  max-height: 70vh;
   overflow: auto;
   left: auto;
   right: 0;