Tweak mobile layout to ensure placeholder text is visible

Thanks to Terry for the inspiration - at the smallest breakpoint we swap the label and placeholder text, to ensure the full instructions are visible!

ds_judgements_public_ui/sass/includes/_search.scss

@@ -54,8 +54,18 @@
     padding-right: calc($spacer__unit * 3);
   }
 
-  &__search-term-label {
+  &__search-term-label.desktop {
+    @media (max-width: $grid__breakpoint-medium) {
+      display: none;
+    }
     @include sr-only;
+
+  }
+
+  &__search-term-label.mobile {
+    @media (min-width: $grid__breakpoint-medium) {
+      display: none;
+    }
   }
 
   &__search-term-input {
@@ -75,6 +85,18 @@
     @media (min-width: $grid__breakpoint-extra-large) {
       width: 35rem;
     }
+
+    &.mobile {
+      @media (min-width: $grid__breakpoint-medium) {
+        display: none;
+      }
+    }
+
+    &.desktop {
+      @media (max-width: $grid__breakpoint-medium) {
+        display: none;
+      }
+    }
   }
 
   input[type=checkbox] {

ds_judgements_public_ui/templates/includes/basic_search_form.html

@@ -4,8 +4,10 @@
     <h2 class="search-component__header--sr-only">{% translate "basicsearchform.title" %}</h2>
     <form action="{% url 'results' %}" role="search" aria-label="Search by keyword or neutral citation" id="analytics-basic-search">
 
-      <label for="search_term" class="search-component__search-term-label">{% translate "basicsearchform.label" %}</label>
-      <input class="search-component__search-term-input" id="search_term" name="query" type="text" value="" placeholder="{% translate "basicsearchform.placeholder" %}">
+      <label for="search_term" class="search-component__search-term-label desktop">{% translate "basicsearchform.label" %}</label>
+      <input class="search-component__search-term-input desktop" id="search_term" name="query" type="text" value="" placeholder="{% translate "basicsearchform.placeholder" %}">
+      <label for="search_term" class="search-component__search-term-label mobile">{% translate "basicsearchform.placeholder" %}</label>
+      <input class="search-component__search-term-input mobile" id="search_term" name="query" type="text" value="" placeholder="{% translate "basicsearchform.label" %}">
       {{ form.search_term }}
       <input type="submit" value="{%  translate "basicsearchform.cta" %}">
 

locale/en_GB/LC_MESSAGES/django.po

@@ -33,7 +33,7 @@ msgstr "Search"
 
 #: ds_judgements_public_ui/templates/includes/basic_search_form.html:8
 msgid "basicsearchform.placeholder"
-msgstr "Enter keyword, party name or neutral citation"
+msgstr "Enter keyword, party name or neutral citation"
 
 #: ds_judgements_public_ui/templates/includes/basic_search_form.html:10
 msgid "basicsearchform.cta"