fixed search widget's input alignment

Author: Oaphi

app/assets/stylesheets/search.scss

@@ -1,5 +1,28 @@
 @import 'variables';
 
+.search-widget {
+  gap: 0.5em;
+
+  .search-widget-input {
+    flex-grow: 1;
+    margin: 0;
+  }
+
+  @media screen and (max-width: $screen-md) {
+    flex-direction: row;
+  }
+
+  @media screen and (max-width: $screen-sm) {
+    align-items: start;
+    flex-direction: column;
+    gap: 0.15em;
+
+    .search-widget-input {
+      width: 100%;
+    }
+  }
+}
+
 .search-filters:not([open]) {
   border-top: 1px solid $muted-graphic;
 }

app/views/search/_widget.html.erb

@@ -1,9 +1,9 @@
-<div class="form-group-horizontal">
-  <div class="form-group">
+<div class="form-group-horizontal search-widget">
+  <div class="form-group search-widget-input">
     <%= label_tag :search, 'Search term', class: "form-element" %>
     <%= search_field_tag :search, params[:search], class: 'form-element' %>
   </div>
-  <div class="actions has-padding-bottom-1">
+  <div class="actions">
     <%= submit_tag 'Search', class: 'button is-medium is-outlined', name: nil %>
   </div>
 </div>