Fix file list header on mobile
- Fix CSS rules that were overridden for hiding elements
- Use padding rather than height to achieve desired height so that on a
small screen when items wrap the header can grow
Bug: Issue 7317
Change-Id: I00b03bb1df4627d7f8a57b48fcccbb43d5b10284
diff --git a/polygerrit-ui/app/elements/change/gr-file-list-header/gr-file-list-header.html b/polygerrit-ui/app/elements/change/gr-file-list-header/gr-file-list-header.html
index 2befcb2..e0dd5d5 100644
--- a/polygerrit-ui/app/elements/change/gr-file-list-header/gr-file-list-header.html
+++ b/polygerrit-ui/app/elements/change/gr-file-list-header/gr-file-list-header.html
@@ -40,16 +40,13 @@
.patchInfoOldPatchSet.patchInfo-header {
background-color: #fff9c4;
}
- .patchInfoOldPatchSet .latestPatchContainer {
- display: initial;
- }
.patchInfo-header {
background-color: #fafafa;
border-bottom: 1px solid #ddd;
border-top: 1px solid #ddd;
display: flex;
- height: 3.2em;
- padding: 0 calc(var(--default-horizontal-margin) / 2);
+ min-height: 3.2em;
+ padding: .5em calc(var(--default-horizontal-margin) / 2);
}
.patchInfo-header-wrapper {
align-items: center;
@@ -60,10 +57,14 @@
.patchInfo-left {
align-items: center;
display: flex;
+ flex-wrap: wrap;
}
- .latestPatchContainer {
+ .patchInfo-header-wrapper .container.latestPatchContainer {
display: none;
}
+ .patchInfoOldPatchSet .container.latestPatchContainer {
+ display: initial;
+ }
.latestPatchContainer a {
text-decoration: none;
}
@@ -132,7 +133,7 @@
margin-right: 1em;
}
@media screen and (max-width: 50em) {
- .desktop {
+ .patchInfo-header .desktop {
display: none;
}
}
diff --git a/polygerrit-ui/app/elements/change/gr-messages-list/gr-messages-list.html b/polygerrit-ui/app/elements/change/gr-messages-list/gr-messages-list.html
index b2beb47..0fa6f4d 100644
--- a/polygerrit-ui/app/elements/change/gr-messages-list/gr-messages-list.html
+++ b/polygerrit-ui/app/elements/change/gr-messages-list/gr-messages-list.html
@@ -33,10 +33,10 @@
border-bottom: 1px solid #ddd;
border-top: 1px solid #ddd;
display: flex;
- height: 3.2em;
justify-content: space-between;
+ min-height: 3.2em;
+ padding: .5em var(--default-horizontal-margin);
}
- .header,
#messageControlsContainer {
padding: 0 var(--default-horizontal-margin);
}
diff --git a/polygerrit-ui/app/elements/diff/gr-patch-range-select/gr-patch-range-select.html b/polygerrit-ui/app/elements/diff/gr-patch-range-select/gr-patch-range-select.html
index 08e6c2c..ab52e15e 100644
--- a/polygerrit-ui/app/elements/diff/gr-patch-range-select/gr-patch-range-select.html
+++ b/polygerrit-ui/app/elements/diff/gr-patch-range-select/gr-patch-range-select.html
@@ -24,8 +24,9 @@
<dom-module id="gr-patch-range-select">
<template>
<style include="shared-styles">
- .patchRange {
- display: inline-block;
+ :host {
+ align-items: center;
+ display: flex;
}
select {
max-width: 15em;
