diff --git a/scss/externs/_awesomplete.base.scss b/scss/externs/_awesomplete.base.scss
index 56510acac..181e88883 100644
--- a/scss/externs/_awesomplete.base.scss
+++ b/scss/externs/_awesomplete.base.scss
@@ -15,6 +15,14 @@
   width: 100%;
 }
 
+.awesomplete.black {
+  display: flex;
+  flex-direction: row;
+  flex-grow: 1;
+  position: fixed;
+  min-width: 100%;
+}
+
 .awesomplete > input {
   display: block;
 }
@@ -39,7 +47,9 @@
   left: 0px;
   list-style: none;
   margin: 0;
-  min-width: 100%;
+  min-width: 180px;
+  max-width: 220px;
+  overflow-wrap: break-word;
   padding: 0;
   position: absolute;
   top: auto;
diff --git a/src/controls/legend.js b/src/controls/legend.js
index f4d5faa44..54d6c9a93 100644
--- a/src/controls/legend.js
+++ b/src/controls/legend.js
@@ -257,7 +257,7 @@ const Legend = function Legend(options = {}) {
 
   const layerSearchInput = Input({
     cls: 'o-search-layer-field placeholder-text-smaller smaller',
-    style: { height: '1.5rem', margin: 0, width: '100%' },
+    style: { height: '1.5rem', margin: 0, width: '180px' },
     placeholderText: searchLayersPlaceholderText,
     value: ''
   });
@@ -480,7 +480,14 @@ const Legend = function Legend(options = {}) {
         toolsEl.insertBefore(dom.html(divider.render()), toolsEl.firstChild);
         toolsEl.insertBefore(dom.html(button.render()), toolsEl.firstChild);
       } else {
-        toolsEl.appendChild(dom.html(button.render()));
+        const node = document.createElement('div');
+        if (typeof button.getValue === 'function') {
+          node.classList.add('grow');
+          toolsEl.appendChild(node);
+          node.appendChild(dom.html(button.render()));
+        } else {
+          toolsEl.appendChild(dom.html(button.render()));
+        }
       }
       toolsCmp.addComponent(button);
       button.onRender();