Fixed search suggestions on mobile

diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Search/Page.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Search/Page.js
index 754b5a03c77f477a29559b83b9eb20c2cdb96de9..e72682978efe7d139d95da8bb3ddd72253ad6f76 100644 (file)
--- a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Search/Page.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Search/Page.js
@@ -1,4 +1,4 @@
-define(['Core', 'Dom/Traverse', 'Dom/Util', 'Ui/SimpleDropdown', './Input'], function(Core, DomTraverse, DomUtil, UiSimpleDropdown, UiSearchInput) {
+define(['Core', 'Dom/Traverse', 'Dom/Util', 'Ui/Screen', 'Ui/SimpleDropdown', './Input'], function(Core, DomTraverse, DomUtil, UiScreen, UiSimpleDropdown, UiSearchInput) {
        "use strict";
        
        return {
@@ -12,16 +12,18 @@ define(['Core', 'Dom/Traverse', 'Dom/Util', 'Ui/SimpleDropdown', './Input'], fun
                                callbackDropdownInit: function(dropdownMenu) {
                                        dropdownMenu.classList.add('dropdownMenuPageSearch');
                                        
-                                       elData(dropdownMenu, 'dropdown-alignment-horizontal', 'right');
-                                       
-                                       var minWidth = searchInput.clientWidth;
-                                       dropdownMenu.style.setProperty('min-width', minWidth + 'px', '');
-                                       
-                                       // calculate offset to ignore the width caused by the submit button
-                                       var parent = searchInput.parentNode;
-                                       var offsetRight = (DomUtil.offset(parent).left + parent.clientWidth) - (DomUtil.offset(searchInput).left + minWidth);
-                                       var offsetTop = DomUtil.styleAsInt(window.getComputedStyle(parent), 'padding-bottom');
-                                       dropdownMenu.style.setProperty('transform', 'translateX(-' + Math.ceil(offsetRight) + 'px) translateY(-' + offsetTop + 'px)', '');
+                                       if (UiScreen.is('screen-lg')) {
+                                               elData(dropdownMenu, 'dropdown-alignment-horizontal', 'right');
+                                               
+                                               var minWidth = searchInput.clientWidth;
+                                               dropdownMenu.style.setProperty('min-width', minWidth + 'px', '');
+                                               
+                                               // calculate offset to ignore the width caused by the submit button
+                                               var parent = searchInput.parentNode;
+                                               var offsetRight = (DomUtil.offset(parent).left + parent.clientWidth) - (DomUtil.offset(searchInput).left + minWidth);
+                                               var offsetTop = DomUtil.styleAsInt(window.getComputedStyle(parent), 'padding-bottom');
+                                               dropdownMenu.style.setProperty('transform', 'translateX(-' + Math.ceil(offsetRight) + 'px) translateY(-' + offsetTop + 'px)', '');
+                                       }
                                },
                                callbackSelect: function() {
                                        setTimeout(function() {

diff --git a/wcfsetup/install/files/style/ui/dropdown.scss b/wcfsetup/install/files/style/ui/dropdown.scss
index cc42877bec450c462c3ba31d12fbe9f2b963d889..ff2d62c7cfe5e6ce299f762ee6437e7ea64c9c86 100644 (file)
--- a/wcfsetup/install/files/style/ui/dropdown.scss
+++ b/wcfsetup/install/files/style/ui/dropdown.scss
@@ -57,6 +57,13 @@
 
 .dropdownMenu {
        @include dropdownMenu;
+       
+       @include screen-md-down {
+               &.dropdownMenuPageSearch {
+                       left: 0 !important;
+                       right: 0 !important;
+               }
+       }
 }
 
 .dropdownIndicator::after {