From e4e359339fc28d0689ec87140578ab20ef995a04 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Javi=20Mart=C3=ADn?= <javim@elretirao.net>
Date: Mon, 2 May 2022 15:11:20 +0200
Subject: [PATCH] Fix banner link on Chromium 101

After upgrading to Chrome/Chromium 101, the test "Cross-Site Scripting
protection banner URL" was failing with the message:

Element <a>...</a> is not clickable (...) Other element would receive
the click: <div class="banner" style="background-color:#FF0000;">...</
div>

The reason was that, when using the structure of a link with one <h2>
and one <h3> inside, previous versions of Chrome/Chromium considered the
margin between the <h2> and the <h3> part of the link.  Version 101 does
the same thing Firefox does and so clicking on the space between the
<h2> and the <h3> doesn't result in clicking the link.

In order to keep the previous behavior, we're adding a `display: block`
tag to a link.

Note that, in the future, we might change the structure of the banner,
since using <h3> as a subheading is discouraged by the W3C, and we
aren't sure about the usability of making the whole banner clickable.
But, for now, we're just fixing the issue so our test suite is green
again.
---
 app/assets/stylesheets/banner.scss | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/app/assets/stylesheets/banner.scss b/app/assets/stylesheets/banner.scss
index d0cc55a2b..fc25fcc62 100644
--- a/app/assets/stylesheets/banner.scss
+++ b/app/assets/stylesheets/banner.scss
@@ -7,11 +7,15 @@
     content: none;
   }
 
-  a > * {
-    padding: 0 rem-calc(16);
+  a {
+    display: block;
 
-    &:empty {
-      display: none;
+    > * {
+      padding: 0 rem-calc(16);
+
+      &:empty {
+        display: none;
+      }
     }
   }