Fix up save search grey box on mobile. Fixes #1759

openaustralia · Feb 7, 2024 · b77fb73 · b77fb73
1 parent f3170e0
commit b77fb73
Showing 1 changed file with 8 additions and 8 deletions.
diff --git a/app/views/_tailwind/applications/_create_alert_form.html.erb b/app/views/_tailwind/applications/_create_alert_form.html.erb
@@ -1,14 +1,14 @@
 <% if current_user %>
-  <div class="flex items-center justify-between px-4 py-2 bg-light-grey">
-    <div class="flex gap-6 pl-4">
-      <%= image_tag "tailwind/bookmark.svg", alt: "" %>
+  <div class="flex items-start gap-6 px-8 py-4 mt-8 sm:pr-4 sm:py-2 sm:items-center bg-light-grey">
+    <%= image_tag "tailwind/bookmark.svg", alt: "", class: "mt-2 sm:mt-0" %>
+    <div class="flex flex-col gap-4 sm:flex-row sm:justify-between grow sm:items-center">
       <p class="text-2xl font-bold text-navy">Save this search as an email alert</p>
+      <%= form_with model: [:profile, alert], builder: FormBuilders::Tailwind do |f| %>
+        <%= f.hidden_field :address %>
+        <%= f.hidden_field :radius_meters %>
+        <%= f.button "Save" %>
+      <% end %>
     </div>
-    <%= form_with model: [:profile, alert], builder: FormBuilders::Tailwind do |f| %>
-      <%= f.hidden_field :address %>
-      <%= f.hidden_field :radius_meters %>
-      <%= f.button "Save" %>
-    <% end %>
   </div>
 <% else %>
   <div class="flex flex-col items-center justify-between gap-8 md:flex-row bg-light-grey px-14 mt-14">