Fix for inline button group (#509)

This has got broken somehow.

Have added in a quick fix whilst awaiting this being merged and released
upstream in NHS frontend.

Author: frankieroberto

app/assets/sass/components/_button.scss

@@ -3,9 +3,12 @@
 // This button is slightly shorter than the usual one,
 // so that when it sits to the right of a text input
 // (eg a search box) it is the same height.
+//
+// Remove this when https://github.com/nhsuk/nhsuk-frontend/pull/1643 has
+// been merged and released.
 .app-button--small {
   @include nhsuk-font-size(16);
-  padding: nhsuk-spacing(2) 12px;
+  padding: 5px 12px;
 }
 
 .app-button--min-width {

app/assets/sass/components/_form-group.scss

@@ -0,0 +1,43 @@
+// Inline form box-flex-group:
+// Used to group inputs with buttons.
+//
+// Remove this when https://github.com/nhsuk/nhsuk-frontend/pull/1643 has
+// been merged and released.
+.app-form-group--inline {
+  display: block;
+
+  .nhsuk-form-group {
+    // Set max-width to override potential width override class on the input
+    max-width: 100%;
+    margin-bottom: nhsuk-spacing(2);
+  }
+
+  @include nhsuk-media-query($until: tablet) {
+    // Unlike GOV.UK Frontend, always stack on small screens
+    // stylelint-disable-next-line declaration-no-important
+    display: block !important;
+  }
+
+  @include nhsuk-media-query($from: tablet) {
+    display: flex;
+    gap: nhsuk-spacing(2);
+    align-items: flex-end;
+
+    .nhsuk-form-group {
+      flex-grow: 1;
+      margin-bottom: 0; // Remove margin when nested groups are inline
+    }
+
+    .nhsuk-button,
+    .nhsuk-button-group {
+      flex-grow: 0;
+    }
+
+    // Remove inline button margin but reserve space for button shadow,
+    // making sure 44px box maintains alignment with other form controls
+    // https://nhsuk.github.io/nhsuk-frontend/examples/form-alignment/
+    .nhsuk-button {
+      margin-bottom: $nhsuk-button-shadow-size + $nhsuk-border-width-form-element;
+    }
+  }
+}

app/assets/sass/components/_search.scss

@@ -18,7 +18,7 @@
 @import 'components/table';
 @import 'components/button';
 @import 'components/filters';
-@import 'components/search';
+@import 'components/form-group';
 @import 'components/section';
 @import 'components/tag';
 @import 'components/numbered-heading';

app/assets/sass/main.scss

@@ -20,27 +20,22 @@ <h1 class="nhsuk-heading-xl">Records</h1>
 
         <form action="/records" method="get" novalidate>
 
-          <div class="app-search">
-
-            <div class="app-search--input">
-              {{ input({
-                type: "search",
-                name: "nameOrNhsNumber",
-                value: data.nameOrNhsNumber,
-                label: {
-                  text: "Patient name or NHS number"
-                }
-              }) }}
-            </div>
-
-            <div class="app-search--button">
-              {{ button({
-                classes: "nhsuk-u-margin-left-4 app-button--small",
-                text: "Search"
-              }) }}
-            </div>
+          <div class="app-form-group--inline nhsuk-u-margin-bottom-4">
+            {{ input({
+              type: "search",
+              name: "nameOrNhsNumber",
+              value: data.nameOrNhsNumber,
+              label: {
+                text: "Patient name or NHS number"
+              }
+            }) }}
+            {{ button({
+              classes: "nhsuk-button--secondary app-button--small",
+              text: "Search"
+            }) }}
           </div>
 
+
           {% set additionalFiltersHtml %}
             {% set vaccineItems = [] %}
             {% for vaccine in (vaccinesRecorded | sort(false, false)) %}