Merge branch 'stable-3.8' into stable-3.9
* stable-3.8:
Fix vertical alignment of header icon and text
Change-Id: I3768226fba9b3ced95bf83c57a033f7c596ed0fb
Release-Notes: skip
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 7bfb4de..ae59fb6 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
@@ -209,11 +209,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));
@@ -221,14 +227,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;
}
@@ -368,7 +375,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">
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 dfb44b70..40430fb 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
@@ -42,7 +42,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">
