From 2a885c2cce4d42f3150b6969518fa321f3c5b25e Mon Sep 17 00:00:00 2001
From: Andy Allan <git@gravitystorm.co.uk>
Date: Wed, 21 Jul 2021 15:07:24 +0100
Subject: [PATCH] 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       | 13 +++++--------
 app/views/confirmations/confirm.html.erb |  7 ++++---
 app/views/users/blocked.html.erb         |  7 ++++---
 app/views/users/new.html.erb             |  7 ++++---
 app/views/users/terms.html.erb           |  7 ++++---
 5 files changed, 21 insertions(+), 20 deletions(-)

diff --git a/app/assets/stylesheets/common.scss b/app/assets/stylesheets/common.scss
index 3e4b30a70..0023286bf 100644
--- a/app/assets/stylesheets/common.scss
+++ b/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;
   }
 }
diff --git a/app/views/confirmations/confirm.html.erb b/app/views/confirmations/confirm.html.erb
index 75d72487c..7350f8628 100644
--- a/app/views/confirmations/confirm.html.erb
+++ b/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 %>
-  <h1><%= t ".heading" %></h1>
-  <div class='header-illustration confirm-main'></div>
+  <div class='header-illustration confirm-main'>
+    <h1><%= t ".heading" %></h1>
+  </div>
 <% end %>
 
 <% if params[:confirm_string] %>
diff --git a/app/views/users/blocked.html.erb b/app/views/users/blocked.html.erb
index b49990705..5753ebd9a 100644
--- a/app/views/users/blocked.html.erb
+++ b/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 %>
-  <h1><%= t "users.new.title" %></h1>
-  <div class='header-illustration new-user-main'></div>
+  <div class='header-illustration new-user-main'>
+    <h1><%= t "users.new.title" %></h1>
+  </div>
   <div class='header-illustration new-user-arm'></div>
 <% end %>
 
diff --git a/app/views/users/new.html.erb b/app/views/users/new.html.erb
index 165c9486b..a94d4a812 100644
--- a/app/views/users/new.html.erb
+++ b/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 %>
-  <h1><%= t ".title" %></h1>
-  <div class='header-illustration new-user-main'></div>
+  <div class='header-illustration new-user-main'>
+    <h1><%= t ".title" %></h1>
+  </div>
   <div class='header-illustration new-user-arm'></div>
 <% end %>
 
diff --git a/app/views/users/terms.html.erb b/app/views/users/terms.html.erb
index f32cc17bd..05cf62e3e 100644
--- a/app/views/users/terms.html.erb
+++ b/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 %>
-  <h1><%= t ".heading" %></h1>
-  <div class='header-illustration new-user-terms'></div>
+  <div class='header-illustration new-user-terms'>
+    <h1><%= t ".heading" %></h1>
+  </div>
 <% end %>
 
 <%= form_tag({ :action => "save" }) do %>
-- 
2.39.5