Translate: Restore translation headers sticking to the viewport, and …

…use a new global variable for the header height.

`position: sticky` only works within a scrollable element, and by adding `overflow:auto` it causes the element to no longer be a scrollable item, so nothing to stick to.
Most GlotPress tables have a `<p class="clear...` present after `.gp-content` which would result in the GlotPress footer elements clearing, but the consistency page does not have this, resulting in the navigation being rendered outside of the `.gp-content` bounding box.
Applying a `.clearfix` class to `.gp-content` appears to work with all these pages instead.

See [11470], #6046.
Fixes WordPress/wporg-mu-plugins#124


git-svn-id: https://meta.svn.wordpress.org/sites/trunk@11489 74240141-8908-4e6f-9713-ba540dce6ec7

wordpress.org/public_html/wp-content/plugins/wporg-gp-customizations/templates/header.php

@@ -34,7 +34,7 @@
 	</div>
 </header>
 
-<div class="gp-content">
+<div class="gp-content clearfix">
 
 	<div id="gp-js-message"></div>
 

wordpress.org/public_html/wp-content/plugins/wporg-gp-customizations/templates/style.css

@@ -1,14 +1,3 @@
-:root {
-	/* It doesn't stick on mobile. That may change soon though, see https://github.com/WordPress/wporg-news-2021/issues/181. */
-	--global-header-height: 0;
-}
-
-@media screen and (min-width: 890px) {
-	:root {
-		--global-header-height: 103px;
-	}
-}
-
 body, html {
 	height: 100%;
 }
@@ -309,7 +298,6 @@ body.wporg-make #headline h2 a:before {
 	margin: 20px auto;
 	max-width: 940px;
 	padding: 0 10px;
-	overflow: auto;
 }
 
 .gp-content h2 {
@@ -2236,7 +2224,7 @@ ul.ct-legend {
 .consistency-table tr.new-translation th {
 	position: -webkit-sticky;
 	position: sticky;
-	top: calc( var(--global-header-height) + var(--wp-admin--admin-bar--height) + 100px );
+	top: calc( var(--wp-global-header-height) + var(--wp-admin--admin-bar--height) + 100px );
 	padding: 20px 0 10px;
 	background: #fff;
 	text-align: left;
@@ -2534,7 +2522,7 @@ table.translations tr.editor td {
 @media screen and (min-width: 890px) {
 	.admin-bar .editor-panel__left .panel-header,
 	.admin-bar .editor-panel__right {
-		top: calc( var(--global-header-height) + var(--wp-admin--admin-bar--height) );
+		top: calc( var(--wp-global-header-height) + var(--wp-admin--admin-bar--height) );
 	}
 }