diff --git a/app/views/_tailwind/applications/_address_search_form.html.erb b/app/views/_tailwind/applications/_address_search_form.html.erb
index 463b2ad42..00e443aa6 100644
--- a/app/views/_tailwind/applications/_address_search_form.html.erb
+++ b/app/views/_tailwind/applications/_address_search_form.html.erb
@@ -5,11 +5,9 @@
<%= form_with url: address_applications_path, method: :get, class: "gap-4 flex flex-col items-center" do |form| %>
<%# Not using a heading here so that we don't mess up the heading order on different pages. %>
<%# TODO: There's probably something simpler and more sensible we should do here %>
-
- Find me applications within <%= meters_in_words(Alert::DEFAULT_RADIUS) %> of:
-
- <%= form.label :q, "Street address", class: "sr-only" %>
+
+ Find applications within <%= meters_in_words(Alert::DEFAULT_RADIUS) %> of:
+
- <%# TODO: Do we want this to show the little red cross like other form fields on error? %>
- <%= form.text_field :q,
- value: q,
- placeholder: "e.g. 1 Sowerby St, Goulburn, NSW 2580",
- class: class_names("text-2xl", "text-navy", "w-full", "px-4", "py-3", "sm:py-4", "placeholder-shown:truncate", "focus:ring-4", "focus:ring-sun-yellow", "border-error-red" => error),
- required: "required",
- autofocus: true,
- "x-data" => "{ async initAutocomplete() {
- const { Autocomplete } = await google.maps.importLibrary('places');
- new Autocomplete($el, {componentRestrictions: {country: 'au'}, types: ['address']})}
- }",
- "x-init" => "initAutocomplete()",
- "x-model.fill" => "address" %>
- <% if error %>
- <%# TODO: Add color to tailwind config %>
- <%# TODO: This is the only box in the whole design with rounded corners. Huh? %>
-
- <%= error %>
-
- <% end %>
+
+ <%= form.label :q, "Street address", class: "text-white font-bold text-2xl self-start" %>
+ <%# TODO: Do we want this to show the little red cross like other form fields on error? %>
+ <%= form.text_field :q,
+ value: q,
+ placeholder: "e.g. 1 Sowerby St, Goulburn, NSW 2580",
+ class: class_names("text-2xl", "text-navy", "w-full", "px-4", "py-3", "sm:py-4", "placeholder-shown:truncate", "focus:ring-4", "focus:ring-sun-yellow", "border-error-red" => error),
+ required: "required",
+ autofocus: true,
+ "x-data" => "{ async initAutocomplete() {
+ const { Autocomplete } = await google.maps.importLibrary('places');
+ new Autocomplete($el, {componentRestrictions: {country: 'au'}, types: ['address']})}
+ }",
+ "x-init" => "initAutocomplete()",
+ "x-model.fill" => "address" %>
+ <% if error %>
+ <%# TODO: Add color to tailwind config %>
+ <%# TODO: This is the only box in the whole design with rounded corners. Huh? %>
+
+ <%= error %>
+
+ <% end %>
+
<%= button_tag type: "button", class: "text-white sm:text-xl inline focus:text-navy focus:outline-none focus:bg-sun-yellow", "@click": "geolocate($event)", "x-bind:disabled": "loading" do %>
<%# TODO: Fix occasional clipping of icon problem %>