Show footer newsletter details on email field focus (Fixes #15311) (#15415)

bedrock/newsletter/templates/newsletter/includes/form.html

@@ -66,6 +66,7 @@
       {{ field_with_attrs(form.email, placeholder=placeholder, class='mzp-js-email-field')|safe }}
 
       <div id="newsletter-details" class="mzp-c-newsletter-details">
+        <div class="mzp-c-newsletter-details-inner">
         {% if include_country %}
           {{ form.country.label_tag() }}
           <p>{{ form.country|safe }}</p>
@@ -96,6 +97,7 @@
             <input type="checkbox" id="privacy" name="privacy" required aria-required="true" data-testid="newsletter-privacy-checkbox"> {{ ftl('newsletter-form-im-okay-with-mozilla', url=url('privacy.notices.websites')) }}
           </label>
         </p>
+        </div>
       </div>
 
       <p class="mzp-c-form-submit">

media/css/m24/components/footer-newsletter.scss

@@ -8,6 +8,12 @@ $max-footer-content-width: $content-max;
     border-bottom: 4px solid $m24-color-light-gray;
 }
 
+// hide details for JS users
+// (displayed when email field is focused)
+.js .mzp-c-newsletter-details {
+    @include hidden;
+}
+
 // newsletter form
 .moz24-newsletter-container {
     @include container;
@@ -179,7 +185,7 @@ $max-footer-content-width: $content-max;
         }
     }
 
-    .mzp-c-newsletter-details {
+    .mzp-c-newsletter-details-inner {
         max-width: 100%;
 
         @media(min-width: $screen-lg) {