Ensure the heading text appears above the illustration

The easiest way to do this is to make the text a child of the div
with the background image. The change to min-size is so that if
the text wraps often enough on narrow screens, the header expands
vertically rather than the text spilling over.

Fixes #3259

app/assets/stylesheets/common.scss

@@ -1035,15 +1035,11 @@ tr.turn:hover {
 
 /* Overrides for pages that use new layout conventions */
 
-.header-illustration-heading {
-  height: 200px;
-}
-
 .header-illustration {
   background-position: 0 0;
   background-repeat: no-repeat;
-  position: absolute;
-  height: 200px;
+  position: relative;
+  min-height: 200px;
   width: 100%;
   left: 0;
   bottom: 0;
@@ -1063,9 +1059,10 @@ tr.turn:hover {
   &.new-user-arm {
     height: 110px;
     width: 130px;
-    left: 260px;
-    top: 160px;
+    left: 280px;
+    top: 180px;
     background-image: image-url("sign-up-illustration-arm.png");
+    position: absolute;
     z-index: 100;
   }
 }

app/views/confirmations/confirm.html.erb

@@ -1,7 +1,8 @@
-<% content_for :heading_class, "header-illustration-heading" %>
+<% content_for :heading_class, "pb-0" %>
 <% content_for :heading do %>
+  <div class='header-illustration confirm-main'>
     <h1><%= t ".heading" %></h1>
-  <div class='header-illustration confirm-main'></div>
+  </div>
 <% end %>
 
 <% if params[:confirm_string] %>

app/views/users/blocked.html.erb

@@ -1,7 +1,8 @@
-<% content_for :heading_class, "header-illustration-heading" %>
+<% content_for :heading_class, "pb-0" %>
 <% content_for :heading do %>
+  <div class='header-illustration new-user-main'>
     <h1><%= t "users.new.title" %></h1>
-  <div class='header-illustration new-user-main'></div>
+  </div>
   <div class='header-illustration new-user-arm'></div>
 <% end %>
 

app/views/users/new.html.erb

@@ -2,10 +2,11 @@
   <%= javascript_include_tag "user" %>
 <% end %>
 
-<% content_for :heading_class, "header-illustration-heading" %>
+<% content_for :heading_class, "pb-0" %>
 <% content_for :heading do %>
+  <div class='header-illustration new-user-main'>
     <h1><%= t ".title" %></h1>
-  <div class='header-illustration new-user-main'></div>
+  </div>
   <div class='header-illustration new-user-arm'></div>
 <% end %>
 

app/views/users/terms.html.erb

@@ -2,10 +2,11 @@
   <%= javascript_include_tag "user" %>
 <% end %>
 
-<% content_for :heading_class, "header-illustration-heading" %>
+<% content_for :heading_class, "pb-0" %>
 <% content_for :heading do %>
+  <div class='header-illustration new-user-terms'>
     <h1><%= t ".heading" %></h1>
-  <div class='header-illustration new-user-terms'></div>
+  </div>
 <% end %>
 
 <%= form_tag({ :action => "save" }) do %>