<p><b>@gravitystorm</b> requested changes on this pull request.</p>

<hr>

<p>In <a href="https://github.com/openstreetmap/openstreetmap-website/pull/2537#discussion_r384602705">app/assets/stylesheets/common.scss</a>:</p>
<pre style='color:#555'>> @@ -403,8 +403,8 @@ body.compact {
     }
 
     h2 {
-      padding: $lineheight $lineheight $lineheight/2;
-      font-size: 1.5rem;
+      padding: $lineheight 0 $lineheight/2 $lineheight;
+      font-size: 1.35rem;
</pre>
<p>We should keep the current header size here.</p>

<hr>

<p>In <a href="https://github.com/openstreetmap/openstreetmap-website/pull/2537#discussion_r384604751">app/assets/stylesheets/common.scss</a>:</p>
<pre style='color:#555'>> @@ -403,8 +403,8 @@ body.compact {
     }
 
     h2 {
-      padding: $lineheight $lineheight $lineheight/2;
-      font-size: 1.5rem;
+      padding: $lineheight 0 $lineheight/2 $lineheight;
</pre>
<p>Setting padding-right to 0  breaks the positioning of the close icons in all the other sidebars, since they depend on the h2 padding to keep the icon away from the edge of the panel.</p>
<p><a target="_blank" rel="noopener noreferrer" href="https://user-images.githubusercontent.com/360803/75364445-0a697200-58bc-11ea-9307-332339f86e0f.png"><img src="https://user-images.githubusercontent.com/360803/75364445-0a697200-58bc-11ea-9307-332339f86e0f.png" alt="Screenshot from 2020-02-26 17-13-18" style="max-width:100%;"></a></p>

<hr>

<p>In <a href="https://github.com/openstreetmap/openstreetmap-website/pull/2537#discussion_r384607446">app/assets/stylesheets/common.scss</a>:</p>
<pre style='color:#555'>> +  .welcome-header {
+    display: flex;
+    h2 {
+      flex: 1 1 0;
+    }
+    .button {
+      width: auto;
+      border: none;
+      background-color: transparent;
+      padding: 1em;
+    }
+  }
</pre>
<p>Can the same effect be achieved using bootstrap utility classes? e.g. <a href="https://getbootstrap.com/docs/4.3/utilities/flex/" rel="nofollow">https://getbootstrap.com/docs/4.3/utilities/flex/</a> . I'd like to avoid writing CSS if a utility class can do the same thing.</p>

<hr>

<p>In <a href="https://github.com/openstreetmap/openstreetmap-website/pull/2537#discussion_r384632545">app/views/layouts/map.html.erb</a>:</p>
<pre style='color:#555'>> @@ -40,8 +40,12 @@
 
     <% unless current_user %>
       <div class="welcome">
-        <h2><%= t "layouts.intro_header" %></h2>
-        <div class="close-wrap"><span class="icon close"></span></div>
+        <div class="welcome-header">
+          <h2><%= t "layouts.intro_header" %></h2>
+          <button type="button" class="button close" aria-label="Close">
+            <span class="icon close"></span>
+          </button>
+        </div>
</pre>
<p>It might be easier to just put the close icon within the h2, and adjust the javascript handler to match. For example, the search sidebar close button is done like this:</p>
<pre><code><h2>
    <a class="geolink" href="<%= root_path %>"><span class="icon close"></span></a>
    <%= t("site.sidebar.search_results") %>
</h2>
</code></pre>
<p>It doesn't have any problems with the text overlapping the icon, since it's floated to the right, rather than absolutely positioned.</p>

<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/2537?email_source=notifications&email_token=AAK2OLLN32YXC26QQKY522TRE2ODPA5CNFSM4KVHOPV2YY3PNVWWK3TUL52HS4DFWFIHK3DMKJSXC5LFON2FEZLWNFSXPKTDN5WW2ZLOORPWSZGOCXBBESI#pullrequestreview-365040201">view it on GitHub</a>, or <a href="https://github.com/notifications/unsubscribe-auth/AAK2OLPHGRZCX6GIDM3QXRDRE2ODPANCNFSM4KVHOPVQ">unsubscribe</a>.<img src="https://github.com/notifications/beacon/AAK2OLMVPVV4FIGTXRLAAMDRE2ODPA5CNFSM4KVHOPV2YY3PNVWWK3TUL52HS4DFWFIHK3DMKJSXC5LFON2FEZLWNFSXPKTDN5WW2ZLOORPWSZGOCXBBESI.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/2537?email_source=notifications\u0026email_token=AAK2OLLN32YXC26QQKY522TRE2ODPA5CNFSM4KVHOPV2YY3PNVWWK3TUL52HS4DFWFIHK3DMKJSXC5LFON2FEZLWNFSXPKTDN5WW2ZLOORPWSZGOCXBBESI#pullrequestreview-365040201",
"url": "https://github.com/openstreetmap/openstreetmap-website/pull/2537?email_source=notifications\u0026email_token=AAK2OLLN32YXC26QQKY522TRE2ODPA5CNFSM4KVHOPV2YY3PNVWWK3TUL52HS4DFWFIHK3DMKJSXC5LFON2FEZLWNFSXPKTDN5WW2ZLOORPWSZGOCXBBESI#pullrequestreview-365040201",
"name": "View Pull Request"
},
"description": "View this Pull Request on GitHub",
"publisher": {
"@type": "Organization",
"name": "GitHub",
"url": "https://github.com"
}
}
]</script>