From d39f12a017e0d732f323accbc38b699c9f3b221b Mon Sep 17 00:00:00 2001
From: Paul Robert Lloyd <me+git@paulrobertlloyd.com>
Date: Mon, 16 May 2022 13:16:00 +0100
Subject: [PATCH] Tweak styles for autocomplete within filter

---
 app/frontend/styles/_accessible-autocomplete.scss |  5 -----
 app/frontend/styles/_filter-layout.scss           |  6 +++---
 app/frontend/styles/_filter.scss                  | 15 +++++++++++++++
 app/frontend/styles/application.scss              |  8 ++++++++
 app/views/filters/_select_filter.html.erb         |  1 -
 5 files changed, 26 insertions(+), 9 deletions(-)

diff --git a/app/frontend/styles/_accessible-autocomplete.scss b/app/frontend/styles/_accessible-autocomplete.scss
index 1b05d2fe6..3ffd9adaf 100644
--- a/app/frontend/styles/_accessible-autocomplete.scss
+++ b/app/frontend/styles/_accessible-autocomplete.scss
@@ -18,8 +18,3 @@
   pointer-events: none;
   z-index: 0;
 }
-
-.autocomplete__narrow {
-  max-width: 220px;
-  min-width: 220px;
-}
diff --git a/app/frontend/styles/_filter-layout.scss b/app/frontend/styles/_filter-layout.scss
index 0dbd1f028..b9fb838ef 100644
--- a/app/frontend/styles/_filter-layout.scss
+++ b/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%;
diff --git a/app/frontend/styles/_filter.scss b/app/frontend/styles/_filter.scss
index 2b4f17953..42b7e2f6a 100644
--- a/app/frontend/styles/_filter.scss
+++ b/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);
+  }
 }
diff --git a/app/frontend/styles/application.scss b/app/frontend/styles/application.scss
index abe376e99..b9de7492c 100644
--- a/app/frontend/styles/application.scss
+++ b/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";
 
diff --git a/app/views/filters/_select_filter.html.erb b/app/views/filters/_select_filter.html.erb
index d7b243769..e2c71988e 100644
--- a/app/views/filters/_select_filter.html.erb
+++ b/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" %>