From bdbef0f87e508103b2998b1c691e8b7c207386c8 Mon Sep 17 00:00:00 2001
From: Will Cowen <131372109+willcAND@users.noreply.github.com>
Date: Tue, 25 Jul 2023 09:29:50 +0100
Subject: [PATCH] added wrapping div to align width of input & autosuggest
 results (#2756)

---
 src/components/autosuggest/_autosuggest.scss |  5 ++
 src/components/autosuggest/_macro.njk        | 51 ++++++++++----------
 2 files changed, 31 insertions(+), 25 deletions(-)

diff --git a/src/components/autosuggest/_autosuggest.scss b/src/components/autosuggest/_autosuggest.scss
index 2398f3b68f..fa5b4cf321 100644
--- a/src/components/autosuggest/_autosuggest.scss
+++ b/src/components/autosuggest/_autosuggest.scss
@@ -91,6 +91,11 @@
     }
   }
 
+  &__wrapper {
+    max-width: max-content;
+    width: 100%;
+  }
+
   &__panel.ons-panel--warn {
     background: none;
     border: 0;
diff --git a/src/components/autosuggest/_macro.njk b/src/components/autosuggest/_macro.njk
index b52d61f658..42e8921c96 100644
--- a/src/components/autosuggest/_macro.njk
+++ b/src/components/autosuggest/_macro.njk
@@ -43,31 +43,32 @@
             <div class="ons-autosuggest__instructions ons-u-vh ons-js-autosuggest-instructions" id="{{ params.id }}-instructions" tabindex="-1">{{ params.instructions }}</div>
             <div class="ons-autosuggest__status ons-u-vh ons-js-autosuggest-aria-status" aria-live="assertive" aria-atomic="true" role="status" tabindex="-1"></div>
         {% endset %}
+        <div class="ons-autosuggest__wrapper">
+            {{ onsInput({
+                "id": params.id,
+                "classes": "ons-js-autosuggest-input " + (params.classes if params.classes else ''),
+                "width": params.width,
+                "label": {
+                    "text": params.label.text,
+                    "description": params.label.description,
+                    "id": params.label.id,
+                    "classes": params.label.classes
+                },
+                "autocomplete": params.autocomplete,
+                "legend": params.legend,
+                "legendClasses": params.legendClasses,
+                "value": params.value,
+                "attributes": params.attributes,
+                "error": params.error,
+                "mutuallyExclusive": params.mutuallyExclusive,
+                "accessiblePlaceholder": params.accessiblePlaceholder,
+                "name": params.name,
+                "autosuggestResults": autosuggestResults
+            }) }}
 
-        {{ onsInput({
-            "id": params.id,
-            "classes": "ons-js-autosuggest-input " + (params.classes if params.classes else ''),
-            "width": params.width,
-            "label": {
-                "text": params.label.text,
-                "description": params.label.description,
-                "id": params.label.id,
-                "classes": params.label.classes
-            },
-            "autocomplete": params.autocomplete,
-            "legend": params.legend,
-            "legendClasses": params.legendClasses,
-            "value": params.value,
-            "attributes": params.attributes,
-            "error": params.error,
-            "mutuallyExclusive": params.mutuallyExclusive,
-            "accessiblePlaceholder": params.accessiblePlaceholder,
-            "name": params.name,
-            "autosuggestResults": autosuggestResults
-         }) }}
-
-         {% if not params.mutuallyExclusive %}
-            {{ autosuggestResults | safe }}
-         {% endif %}
+            {% if not params.mutuallyExclusive %}
+                {{ autosuggestResults | safe }}
+            {% endif %}
+         </div>
     </div>
 {% endmacro %}