Bug 1985029: Use 'auto' instead of unresolvable '20%' in grid-template-rows declaration in 'about:protections' CSS. a=RyanVM

The 20% here has always been unresolvable, so it has effectively always meant
"auto" in our implementation of the CSS grid algorithm, until recently.

Recently, we enabled a behavior-change to our CSS grid implementation that lets
us resolve otherwise-unresolvable percentages like this one (by laying out the
grid multiple times so that we can establish a height that we can then resolve
the percentage against).  The CSS grid spec requires us to do this.

As a result, we're now resolving this formerly unresolvable 20% row-height,
which produces an unintended layout on the about:protections page (with the
first row being a bit too tall and pushing lower content out of its container).

We can get back to the intended layout by just using `auto` instead of 20%
here.

Original Revision: https://phabricator.services.mozilla.com/D262733

Differential Revision: https://phabricator.services.mozilla.com/D262831

Author: dholbert

browser/components/protections/content/protections.css

@@ -626,7 +626,7 @@ label[for="tab-cryptominer"]:hover ~ #highlight-hover {
 
 .etp-card {
   margin-top: 31px;
-  grid-template-rows: 20% auto auto;
+  grid-template-rows: auto auto auto;
 }
 
 /* Lockwise Card */