Set 800px (50em) as boundary for mobile devices
Change-Id: I4ba648433785961a2292f0408ab73e252c364ce5
diff --git a/polygerrit-ui/app/elements/gr-app.html b/polygerrit-ui/app/elements/gr-app.html
index ef07c19..e7e9e58 100644
--- a/polygerrit-ui/app/elements/gr-app.html
+++ b/polygerrit-ui/app/elements/gr-app.html
@@ -44,7 +44,7 @@
footer {
background-color: var(--primary-color);
color: var(--primary-text-color);
- padding: .5rem 1.25rem;
+ padding: .5rem var(--default-horizontal-margin);
}
header {
align-items: center;
@@ -88,7 +88,7 @@
.feedback {
color: #b71c1c;
}
- @media screen and (max-width: 60em) {
+ @media screen and (max-width: 50em) {
.bigTitle {
font-size: 14px;
font-weight: bold;
diff --git a/polygerrit-ui/app/elements/gr-change-actions.html b/polygerrit-ui/app/elements/gr-change-actions.html
index 7909e9f..2381ce4 100644
--- a/polygerrit-ui/app/elements/gr-change-actions.html
+++ b/polygerrit-ui/app/elements/gr-change-actions.html
@@ -39,7 +39,7 @@
gr-button[loading]:before {
content: attr(data-loading-label);
}
- @media screen and (max-width: 60em) {
+ @media screen and (max-width: 50em) {
.confirmDialog {
width: 90vw;
}
diff --git a/polygerrit-ui/app/elements/gr-change-list-view.html b/polygerrit-ui/app/elements/gr-change-list-view.html
index 633b467..d6f7649 100644
--- a/polygerrit-ui/app/elements/gr-change-list-view.html
+++ b/polygerrit-ui/app/elements/gr-change-list-view.html
@@ -25,7 +25,7 @@
:host {
background-color: var(--view-background-color);
display: block;
- margin: 0 1.25rem;
+ margin: 0 var(--default-horizontal-margin);
}
.loading,
.error {
@@ -53,13 +53,13 @@
nav a:first-of-type {
margin-right: .5em;
}
- @media only screen and (max-width: 60em) {
+ @media only screen and (max-width: 50em) {
:host {
margin: 0;
}
.loading,
.error {
- padding: 0 1.25rem;
+ padding: 0 var(--default-horizontal-margin);
}
}
</style>
diff --git a/polygerrit-ui/app/elements/gr-change-metadata.html b/polygerrit-ui/app/elements/gr-change-metadata.html
index fd493f1..50256e2 100644
--- a/polygerrit-ui/app/elements/gr-change-metadata.html
+++ b/polygerrit-ui/app/elements/gr-change-metadata.html
@@ -54,7 +54,7 @@
.notApproved {
background-color: #ffd4d4;
}
- @media screen and (max-width: 800px), screen and (min-width: 1200px) {
+ @media screen and (max-width: 50em), screen and (min-width: 75em) {
section {
display: flex;
}
diff --git a/polygerrit-ui/app/elements/gr-change-view.html b/polygerrit-ui/app/elements/gr-change-view.html
index 3c59ccf..b8d8bfd 100644
--- a/polygerrit-ui/app/elements/gr-change-view.html
+++ b/polygerrit-ui/app/elements/gr-change-view.html
@@ -137,7 +137,7 @@
margin-bottom: 1em;
padding: 0 var(--default-horizontal-margin);
}
- @media screen and (max-width: 60em) {
+ @media screen and (max-width: 50em) {
.container {
margin: .5em 0 !important;
}
@@ -150,7 +150,7 @@
.header {
align-items: flex-start;
flex-direction: column;
- padding: .5em 1.25rem !important;
+ padding: .5em var(--default-horizontal-margin) !important;
}
gr-change-star {
vertical-align: middle;
diff --git a/polygerrit-ui/app/elements/gr-dashboard-view.html b/polygerrit-ui/app/elements/gr-dashboard-view.html
index e6c1eab..9ecded9 100644
--- a/polygerrit-ui/app/elements/gr-dashboard-view.html
+++ b/polygerrit-ui/app/elements/gr-dashboard-view.html
@@ -23,7 +23,7 @@
:host {
background-color: var(--view-background-color);
display: block;
- margin: 0 1.25rem;
+ margin: 0 var(--default-horizontal-margin);
}
.loading {
margin-top: 1em;
@@ -34,12 +34,12 @@
margin-top: 1em;
width: 100%;
}
- @media only screen and (max-width: 60em) {
+ @media only screen and (max-width: 50em) {
:host {
margin: 0;
}
.loading {
- padding: 0 1.25rem;
+ padding: 0 var(--default-horizontal-margin);
}
}
</style>
diff --git a/polygerrit-ui/app/elements/gr-diff-view.html b/polygerrit-ui/app/elements/gr-diff-view.html
index 35b7fc6..9b067ff 100644
--- a/polygerrit-ui/app/elements/gr-diff-view.html
+++ b/polygerrit-ui/app/elements/gr-diff-view.html
@@ -91,7 +91,7 @@
padding: .3em 0;
text-decoration: none;
}
- @media screen and (max-width: 60em) {
+ @media screen and (max-width: 50em) {
.dash {
display: none;
}
diff --git a/polygerrit-ui/app/elements/gr-file-list.html b/polygerrit-ui/app/elements/gr-file-list.html
index d6b9d94..cf79c6a 100644
--- a/polygerrit-ui/app/elements/gr-file-list.html
+++ b/polygerrit-ui/app/elements/gr-file-list.html
@@ -65,7 +65,7 @@
color: #C62828;
font-weight: bold;
}
- @media screen and (max-width: 60em) {
+ @media screen and (max-width: 50em) {
tr[selected] {
background-color: transparent;
}
diff --git a/polygerrit-ui/app/styles/gr-change-list-styles.html b/polygerrit-ui/app/styles/gr-change-list-styles.html
index 0cce6fb..1edcfaa 100644
--- a/polygerrit-ui/app/styles/gr-change-list-styles.html
+++ b/polygerrit-ui/app/styles/gr-change-list-styles.html
@@ -78,7 +78,7 @@
:host {
font-size: 11px;
}
- @media only screen and (max-width: 60em) {
+ @media only screen and (max-width: 50em) {
:host {
font-size: 14px;
}
