Tweak styles for autocomplete within filter

app/frontend/styles/_accessible-autocomplete.scss

@@ -18,8 +18,3 @@
   pointer-events: none;
   z-index: 0;
 }
-
-.autocomplete__narrow {
-  max-width: 220px;
-  min-width: 220px;
-}

app/frontend/styles/_filter-layout.scss

@@ -3,7 +3,7 @@
 }
 
 .app-filter-layout__filter {
-  @include govuk-media-query(desktop) {
+  @include govuk-media-query(wide) {
     float: left;
     min-width: govuk-grid-width("one-quarter");
   }
@@ -12,7 +12,7 @@
 .js-enabled .app-filter-layout__filter {
   outline: 0 none;
 
-  @include govuk-media-query($until: desktop) {
+  @include govuk-media-query($until: wide) {
     background-color: govuk-colour("light-grey");
     bottom: govuk-spacing(1);
     border: 1px solid govuk-colour("mid-grey");
@@ -32,7 +32,7 @@
 }
 
 .app-filter-layout__content {
-  @include govuk-media-query(desktop) {
+  @include govuk-media-query(wide) {
     float: right;
     max-width: calc(#{govuk-grid-width("three-quarters")} - #{govuk-spacing(6)});
     width: 100%;

app/frontend/styles/_filter.scss

@@ -98,4 +98,19 @@
       background-color: govuk-colour("white");
     }
   }
+
+  .autocomplete__input {
+    @include govuk-font(16);
+    background-color: govuk-colour("white");
+  }
+
+  .autocomplete__wrapper {
+    @include govuk-media-query(wide) {
+      max-width: 20ex;
+    }
+  }
+
+  .autocomplete__option {
+    @include govuk-font(16);
+  }
 }

app/frontend/styles/application.scss

@@ -11,6 +11,14 @@ $govuk-image-url-function: frontend-image-url;
 $govuk-global-styles: true;
 $govuk-new-link-styles: true;
 
+// Add additional breakpoint named `wide`
+$govuk-breakpoints: (
+  mobile:  320px,
+  tablet:  641px,
+  desktop: 769px,
+  wide: 921px,
+);
+
 @import "govuk-frontend-styles";
 @import "govuk-prototype-styles";
 

app/views/filters/_select_filter.html.erb

@@ -4,5 +4,4 @@
     :name,
     label: { hidden: secondary },
     options: { disabled: [""], selected: selected_option(category) },
-    form_group: { classes: %w[autocomplete__narrow] },
     "data-controller": "accessible-autocomplete" %>