Fix vertical alignment of header icon and text

There is generally a slight misalignment of icon and text as can be
seen in this screenshot: https://imgur.com/a/tDUHGk0

It was also noted in the referenced bug that increasing the icon height
is impossible, because then the alignment gets totally messed up.

3 problems contribute to this misalignment:

1. `.titleText` element being a span. This generally makes alignment of
   icons next to text very tricky. Let's use a flex element instead.

2. `vertical-align: text-bottom` for the icon is a very unusual choice
   for the vertical-align property and does not really make a lot of
   sense. Let's just use the `align-items: center` style for flex
   elements, see above.

3. `.bigTitle` has a custom font size, but not a custom line-height.
   That is generally problematic as can be seen here: The element will
   get a height of 20px as an inline element, but contains text with a
   24.5px font. No surprise that we see misalignment. Let's make sure
   that the line-height and thus the height of the text element has a
   proper value. 1.2*font-size is what browsers would normally use.

This was checked to behave well on gerrit-review, android-review and
chromium-review.

Release-Notes: skip
Bug: Issue 337076005
Change-Id: Ia09bbe92158f7b4b1d6b88e599e0635fa9b15d5e
(cherry picked from commit 06cfcb6ef54d78d7e68dfc0f17a15d30d6aae414)

polygerrit-ui/app/elements/core/gr-main-header/gr-main-header.ts

diff --git a/polygerrit-ui/app/elements/core/gr-main-header/gr-main-header.ts b/polygerrit-ui/app/elements/core/gr-main-header/gr-main-header.ts
index fca600d..baa17ca 100644
--- a/polygerrit-ui/app/elements/core/gr-main-header/gr-main-header.ts
+++ b/polygerrit-ui/app/elements/core/gr-main-header/gr-main-header.ts
@@ -198,11 +198,17 @@
         .bigTitle {
           color: var(--header-text-color);
           font-size: var(--header-title-font-size);
+          line-height: calc(var(--header-title-font-size) * 1.2);
           text-decoration: none;
         }
         .bigTitle:hover {
           text-decoration: underline;
         }
+        .titleText {
+          /* Vertical alignment of icons and text with just block/inline display is too troublesome. */
+          display: flex;
+          align-items: center;
+        }
         .titleText::before {
           --icon-width: var(--header-icon-width, var(--header-icon-size, 0));
           --icon-height: var(--header-icon-height, var(--header-icon-size, 0));
@@ -210,14 +216,15 @@
           background-size: var(--icon-width) var(--icon-height);
           background-repeat: no-repeat;
           content: '';
-          display: inline-block;
+          /* Any direct child of a flex element implicitly has 'display: block', but let's make that explicit here. */
+          display: block;
+          width: var(--icon-width);
           height: var(--icon-height);
           /* If size or height are set, then use 'spacing-m', 0px otherwise. */
           margin-right: clamp(0px, var(--icon-height), var(--spacing-m));
-          vertical-align: text-bottom;
-          width: var(--icon-width);
         }
         .titleText::after {
+          /* The height will be determined by the line-height of the .bigTitle element. */
           content: var(--header-title-content);
           white-space: nowrap;
         }
@@ -357,7 +364,7 @@
   <nav>
     <a href=${`//${window.location.host}${getBaseUrl()}/`} class="bigTitle">
       <gr-endpoint-decorator name="header-title">
-        <span class="titleText"></span>
+        <div class="titleText"></div>
       </gr-endpoint-decorator>
     </a>
     <ul class="links">

polygerrit-ui/app/elements/core/gr-main-header/gr-main-header_test.ts

diff --git a/polygerrit-ui/app/elements/core/gr-main-header/gr-main-header_test.ts b/polygerrit-ui/app/elements/core/gr-main-header/gr-main-header_test.ts
index 955846f..6d0c86e 100644
--- a/polygerrit-ui/app/elements/core/gr-main-header/gr-main-header_test.ts
+++ b/polygerrit-ui/app/elements/core/gr-main-header/gr-main-header_test.ts
@@ -40,7 +40,7 @@
         <nav>
           <a class="bigTitle" href="//localhost:9876/">
             <gr-endpoint-decorator name="header-title">
-              <span class="titleText"> </span>
+              <div class="titleText"></div>
             </gr-endpoint-decorator>
           </a>
           <ul class="links">