<p><span class="issue-keyword tooltipped tooltipped-se" aria-label="This pull request closes issue #3259.">Fixes</span> <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="945636055" data-permission-text="Title is private" data-url="https://github.com/openstreetmap/openstreetmap-website/issues/3259" data-hovercard-type="issue" data-hovercard-url="/openstreetmap/openstreetmap-website/issues/3259/hovercard" href="https://github.com/openstreetmap/openstreetmap-website/issues/3259">#3259</a></p>
<p>The first problem was that there was a missing class there, since the CSS rule applied only to a certain list of classes and those class names are based on the controller. So this was inadvertantly broken in <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="852515143" data-permission-text="Title is private" data-url="https://github.com/openstreetmap/openstreetmap-website/issues/3165" data-hovercard-type="pull_request" data-hovercard-url="/openstreetmap/openstreetmap-website/pull/3165/hovercard" href="https://github.com/openstreetmap/openstreetmap-website/pull/3165">#3165</a>.</p>
<p>The main problem is that the text appeared behind the background illustration. This predates any of our recent CSS work, but was probably less noticed back then since the titles were in a much smaller font. Here's a screenshot from early 2019 codebase. The titles need to be very long before being overlapped by the illustration.</p>
<p><a target="_blank" rel="noopener noreferrer" href="https://user-images.githubusercontent.com/360803/126503768-18f8a10c-3f46-4794-93d4-8ed708d4f2a5.png"><img src="https://user-images.githubusercontent.com/360803/126503768-18f8a10c-3f46-4794-93d4-8ed708d4f2a5.png" alt="Screenshot from 2021-07-21 12-10-13" style="max-width:100%;"></a></p>
<p>So in this PR I've refactored the heading, so that the titles are a child of the div that has the background illustration, and this means the text naturally appears over the top.</p>
<p><a target="_blank" rel="noopener noreferrer" href="https://user-images.githubusercontent.com/360803/126504048-64c95b39-ff05-4fbc-89b5-8c3a9848e27d.png"><img src="https://user-images.githubusercontent.com/360803/126504048-64c95b39-ff05-4fbc-89b5-8c3a9848e27d.png" alt="Screenshot from 2021-07-21 15-04-48" style="max-width:100%;"></a></p>
<p>I've also tweaked the div to be <code>min-height</code> instead of <code>height</code>, so that even with very long texts and very narrow windows, the title stays within the header rather than overlapping the rest of the content. This is probably unimportant in the real world.</p>
<hr>
<h4>You can view, comment on, or merge this pull request online at:</h4>
<p> <a href='https://github.com/openstreetmap/openstreetmap-website/pull/3264'>https://github.com/openstreetmap/openstreetmap-website/pull/3264</a></p>
<h4>Commit Summary</h4>
<ul>
<li>Refactor to use a heading class for height when using header-illustrations</li>
<li>Ensure the heading text appears above the illustration</li>
</ul>
<h4>File Changes</h4>
<ul>
<li>
<strong>M</strong>
<a href="https://github.com/openstreetmap/openstreetmap-website/pull/3264/files#diff-e86a39e6d0b163f152db8843fc7d647a3f5d648de4a74f1732bef4474b6e5bc8">app/assets/stylesheets/common.scss</a>
(18)
</li>
<li>
<strong>M</strong>
<a href="https://github.com/openstreetmap/openstreetmap-website/pull/3264/files#diff-596485415afaa248c73d36eeb3a5be71b78f19acaedd02fd5dbf9bad11145d18">app/views/confirmations/confirm.html.erb</a>
(6)
</li>
<li>
<strong>M</strong>
<a href="https://github.com/openstreetmap/openstreetmap-website/pull/3264/files#diff-d69cede985be97f6eac46f40057c71e3b8b33e5ae40514adbd0bc0283ed3e31a">app/views/users/blocked.html.erb</a>
(6)
</li>
<li>
<strong>M</strong>
<a href="https://github.com/openstreetmap/openstreetmap-website/pull/3264/files#diff-8dd599ea27028815c7fa912755a38dd05e4a768470cc792840b85fd1e486d69a">app/views/users/new.html.erb</a>
(6)
</li>
<li>
<strong>M</strong>
<a href="https://github.com/openstreetmap/openstreetmap-website/pull/3264/files#diff-f6ed49e0cedc003a3fa0c339f473b25280b800f6d25c59269d60adc773b0848c">app/views/users/terms.html.erb</a>
(6)
</li>
</ul>
<h4>Patch Links:</h4>
<ul>
<li><a href='https://github.com/openstreetmap/openstreetmap-website/pull/3264.patch'>https://github.com/openstreetmap/openstreetmap-website/pull/3264.patch</a></li>
<li><a href='https://github.com/openstreetmap/openstreetmap-website/pull/3264.diff'>https://github.com/openstreetmap/openstreetmap-website/pull/3264.diff</a></li>
</ul>
<p style="font-size:small;-webkit-text-size-adjust:none;color:#666;">—<br />You are receiving this because you are subscribed to this thread.<br />Reply to this email directly, <a href="https://github.com/openstreetmap/openstreetmap-website/pull/3264">view it on GitHub</a>, or <a href="https://github.com/notifications/unsubscribe-auth/AAK2OLJYBNVWDS5ZXPB7XC3TY3JU7ANCNFSM5AYCEO2Q">unsubscribe</a>.<img src="https://github.com/notifications/beacon/AAK2OLIBDYANKS3Z72H4IY3TY3JU7A5CNFSM5AYCEO22YY3PNVWWK3TUL52HS4DFUVEXG43VMWVGG33NNVSW45C7NFSM4OE4GTWA.gif" height="1" width="1" alt="" /></p>
<script type="application/ld+json">[
{
"@context": "http://schema.org",
"@type": "EmailMessage",
"potentialAction": {
"@type": "ViewAction",
"target": "https://github.com/openstreetmap/openstreetmap-website/pull/3264",
"url": "https://github.com/openstreetmap/openstreetmap-website/pull/3264",
"name": "View Pull Request"
},
"description": "View this Pull Request on GitHub",
"publisher": {
"@type": "Organization",
"name": "GitHub",
"url": "https://github.com"
}
}
]</script>