diff --git a/app/assets/javascripts/discourse/components/menu-panel.js.es6 b/app/assets/javascripts/discourse/components/menu-panel.js.es6
index 401c9b7b2..6d1edefb2 100644
--- a/app/assets/javascripts/discourse/components/menu-panel.js.es6
+++ b/app/assets/javascripts/discourse/components/menu-panel.js.es6
@@ -11,28 +11,34 @@ export default Ember.Component.extend({
   _layoutComponent() {
     if (!this.get('visible')) { return; }
 
+    const $window = $(window);
+    let width = this.get('maxWidth') || 300;
+    const windowWidth = parseInt($window.width());
+
+    if ((windowWidth - width) < 50) {
+      width = windowWidth - 50;
+    }
+
     const viewMode = this.get('viewMode');
     const $panelBody = this.$('.panel-body');
 
     if (viewMode === 'drop-down') {
-      // adjust panel position
       const $buttonPanel = $('header ul.icons');
       if ($buttonPanel.length === 0) { return; }
 
       const buttonPanelPos = $buttonPanel.offset();
-      const myWidth = this.$().width();
 
       const posTop = parseInt(buttonPanelPos.top + $buttonPanel.height() - $('header.d-header').offset().top);
-      const posLeft = parseInt(buttonPanelPos.left + $buttonPanel.width() - myWidth);
+      const posLeft = parseInt(buttonPanelPos.left + $buttonPanel.width() - width);
 
       this.$().css({ left: posLeft + "px", top: posTop + "px" });
 
       // adjust panel height
       let contentHeight = parseInt(this.$('.panel-body-contents').height());
-      const fullHeight = parseInt($(window).height());
+      const fullHeight = parseInt($window.height());
 
       const offsetTop = this.$().offset().top;
-      const scrollTop = $(window).scrollTop();
+      const scrollTop = $window.scrollTop();
       if (contentHeight + (offsetTop - scrollTop) + PANEL_BODY_MARGIN > fullHeight) {
         contentHeight = fullHeight - (offsetTop - scrollTop) - PANEL_BODY_MARGIN;
       }
@@ -43,10 +49,12 @@ export default Ember.Component.extend({
       const $header = $('header.d-header');
       const headerOffset = $header.offset();
       const headerOffsetTop = (headerOffset) ? headerOffset.top : 0;
-      const headerHeight = parseInt($header.height() + headerOffsetTop - $(window).scrollTop() + 3);
+      const headerHeight = parseInt($header.height() + headerOffsetTop - $window.scrollTop() + 3);
       this.$().css({ left: "auto", top: headerHeight + "px" });
       $('body').removeClass('drop-down-visible');
     }
+
+    this.$().width(width);
   },
 
   @computed('force')
diff --git a/app/assets/javascripts/discourse/templates/components/search-menu.hbs b/app/assets/javascripts/discourse/templates/components/search-menu.hbs
index 2258348e2..1f9cc018a 100644
--- a/app/assets/javascripts/discourse/templates/components/search-menu.hbs
+++ b/app/assets/javascripts/discourse/templates/components/search-menu.hbs
@@ -1,4 +1,4 @@
-{{#menu-panel visible=visible onVisible="showedSearch" onHidden="cancelHighlight"}}
+{{#menu-panel visible=visible onVisible="showedSearch" onHidden="cancelHighlight" maxWidth="500"}}
   {{plugin-outlet "above-search"}}
   {{search-text-field value=searchService.term id="search-term"}}
 
diff --git a/app/assets/stylesheets/common/base/menu-panel.scss b/app/assets/stylesheets/common/base/menu-panel.scss
index eec9a5b37..4bc8f2650 100644
--- a/app/assets/stylesheets/common/base/menu-panel.scss
+++ b/app/assets/stylesheets/common/base/menu-panel.scss
@@ -7,7 +7,7 @@
     position: absolute;
     top: 3px;
     bottom: 37px;
-    width: 96%;
+    width: 97%;
   }
 }
 
@@ -90,9 +90,10 @@
   }
 
   input[type='text'] {
-    width: 93%;
-    height: 22px;
-    margin: 5px;
+    margin: 0.5em 0 0.5em;
+    box-sizing: border-box;
+    width: 100%;
+    height: 32px;
     padding: 5px;
   }
 
@@ -103,8 +104,8 @@
 
   .searching {
     position: absolute;
-    top: 0.1em;
-    right: 1.25em;
+    top: -3px;
+    right: 0.75em;
     .spinner {
       width: 10px;
       height: 10px;