Improve dropdown alignment and nav menu button style.

themes/bootstrap3/less/bootstrap.less

@@ -99,6 +99,8 @@ label { cursor: pointer; }
 }
 .nav .dropdown-toggle {
   padding-right: 8px;
+  height: inherit;
+  border-radius: 0;
 
   .icon {
     margin-left: 4px;
@@ -139,8 +141,13 @@ button.dropdown-toggle {
   color: inherit;
   background-color: transparent;
 }
-.dropdown label {
-  padding-right: 0.2rem;
+.dropdown-container {
+  label {
+    padding-right: 0.5rem;
+  }
+  .dropdown {
+    display: inline-block;
+  }
 }
 
 // Normalize highlighting

themes/bootstrap3/less/components/search.less

@@ -96,6 +96,9 @@ header .container.navbar { margin-bottom: 0; }
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
 }
+.search-controls .dropdown-menu {
+  min-width: 80px;
+}
 
 @media (min-width: 768px) {
   .search-header {

themes/bootstrap3/scss/bootstrap.scss

@@ -99,6 +99,8 @@ label { cursor: pointer; }
 }
 .nav .dropdown-toggle {
   padding-right: 8px;
+  height: inherit;
+  border-radius: 0;
 
   .icon {
     margin-left: 4px;
@@ -139,8 +141,13 @@ button.dropdown-toggle {
   color: inherit;
   background-color: transparent;
 }
-.dropdown label {
-  padding-right: 0.2rem;
+.dropdown-container {
+  label {
+    padding-right: 0.5rem;
+  }
+  .dropdown {
+    display: inline-block;
+  }
 }
 
 // Normalize highlighting

themes/bootstrap3/scss/components/search.scss

@@ -96,6 +96,9 @@ header .container.navbar { margin-bottom: 0; }
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
 }
+.search-controls .dropdown-menu {
+  min-width: 80px;
+}
 
 @media (min-width: 768px) {
   .search-header {

themes/bootstrap3/templates/_ui/components/menu-button.phtml

@@ -1,11 +1,6 @@
 <?php
   $wrapperTag = $this->wrapperTag ?? 'div';
   $showSelectedValue = $this->showSelectedValue ?? false;
-  $wrapperClass = 'dropdown'; // Bootstrap class
-
-  if ($this->wrapperClass ?? false) {
-    $wrapperClass = $this->wrapperClass . ' dropdown'; // Bootstrap class
-  }
 
   // defaults
   $toggleAttrs = [
@@ -31,7 +26,7 @@
   $selected = $this->defaultSelectedValue ?? '';
 ?>
 <?php ob_start(); ?>
-  <ul class="dropdown-menu">
+  <ul class="dropdown-menu dropdown-menu-right">
     <?php foreach ($this->menuItems as $current): ?>
       <?php
         if ($current['selected'] ?? false) {
@@ -57,9 +52,6 @@
     $label = empty($this->toggleLabel) ? '' : $this->transEsc($this->toggleLabel);
     $buttonText = $showSelectedValue ? $selected : $label;
   ?>
-  <?php if ($showSelectedValue && '' !== $label): ?>
-    <label for="<?=$this->escapeHtmlAttr($toggleAttrs['id'])?>"><?=$this->escapeHtml($label)?></label>
-  <?php endif; ?>
   <?=
     $this->makeTag(
         $toggleTag,
@@ -71,4 +63,23 @@
 <?php $menuContents = ob_get_contents(); ?>
 <?php ob_end_clean(); ?>
 
+<?php if ($showSelectedValue && '' !== $label): ?>
+  <?php
+    // We need an inner wrapper to keep the label out of the dropdown and from
+    // affecting dropdown position
+    $menuContents = '<label for="'. $this->escapeHtmlAttr($toggleAttrs['id']) . '">'
+      . $this->escapeHtml($label)
+      . '</label>'
+      . $this->makeTag(
+          'div',
+          $menuContents,
+          'dropdown',
+          ['escapeContent' => false]
+        );
+    $wrapperClass = trim(($this->wrapperClass ?? '') . ' dropdown-container');
+  ?>
+<?php else: ?>
+  <?php $wrapperClass = trim(($this->wrapperClass ?? '') . ' dropdown'); ?>
+<?php endif; ?>
+
 <?=$this->makeTag($wrapperTag, $menuContents, $wrapperClass, ['escapeContent' => false]) ?>