From 95e685aa69adc367db26863489a847faeb739906 Mon Sep 17 00:00:00 2001
From: Alexander Ebert <ebert@woltlab.com>
Date: Thu, 15 Sep 2016 18:25:00 +0200
Subject: [PATCH] Fixed search suggestions on mobile

---
 .../js/WoltLabSuite/Core/Ui/Search/Page.js    | 24 ++++++++++---------
 wcfsetup/install/files/style/ui/dropdown.scss |  7 ++++++
 2 files changed, 20 insertions(+), 11 deletions(-)

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 754b5a03c7..e72682978e 100644
--- 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 cc42877bec..ff2d62c7cf 100644
--- 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 {
-- 
2.20.1