Fix mobile display on gr-create-change-dialog
This fixes a issue where things did not look correctly on mobile.
Bug: Issue 10494
Change-Id: Ia152e17c9b132cb78845a5c1974cefc1e3a733a2
diff --git a/polygerrit-ui/app/elements/admin/gr-create-change-dialog/gr-create-change-dialog.html b/polygerrit-ui/app/elements/admin/gr-create-change-dialog/gr-create-change-dialog.html
index 987b63d..da1c871 100644
--- a/polygerrit-ui/app/elements/admin/gr-create-change-dialog/gr-create-change-dialog.html
+++ b/polygerrit-ui/app/elements/admin/gr-create-change-dialog/gr-create-change-dialog.html
@@ -32,9 +32,6 @@
<template>
<style include="shared-styles"></style>
<style include="gr-form-styles">
- :host {
- display: inline-block;
- }
input:not([type="checkbox"]),
gr-autocomplete,
iron-autogrow-textarea {
@@ -43,13 +40,6 @@
.value {
width: 32em;
}
- section {
- align-items: center;
- display: flex;
- }
- #description {
- align-items: initial;
- }
gr-autocomplete {
--gr-autocomplete: {
padding: 0 .15em;
@@ -58,68 +48,71 @@
.hide {
display: none;
}
+ @media only screen and (max-width: 40em) {
+ .value {
+ width: 29em;
+ }
+ }
</style>
<div class="gr-form-styles">
- <div id="form">
- <section class$="[[_computeBranchClass(baseChange)]]">
- <span class="title">Select branch for new change</span>
- <span class="value">
- <gr-autocomplete
- id="branchInput"
- text="{{branch}}"
- query="[[_query]]"
- placeholder="Destination branch">
- </gr-autocomplete>
- </span>
- </section>
- <section class$="[[_computeBranchClass(baseChange)]]">
- <span class="title">Provide base commit sha1 for change</span>
- <span class="value">
- <input
- is="iron-input"
- id="baseCommitInput"
- maxlength="40"
- placeholder="(optional)"
- bind-value="{{baseCommit}}">
- </span>
- </section>
- <section>
- <span class="title">Enter topic for new change</span>
- <span class="value">
- <input
- is="iron-input"
- id="tagNameInput"
- maxlength="1024"
- placeholder="(optional)"
- bind-value="{{topic}}">
- </span>
- </section>
- <section id="description">
- <span class="title">Description</span>
- <span class="value">
- <iron-autogrow-textarea
- id="messageInput"
- class="message"
- autocomplete="on"
- rows="4"
- max-rows="15"
- bind-value="{{subject}}"
- placeholder="Insert the description of the change.">
- </iron-autogrow-textarea>
- </span>
- </section>
- <section class$="[[_computePrivateSectionClass(_privateChangesEnabled)]]">
- <label
- class="title"
- for="privateChangeCheckBox">Private change</label>
- <span class="value">
- <input
- type="checkbox"
- id="privateChangeCheckBox"
- checked$="[[_formatBooleanString(privateByDefault)]]">
- </span>
- </section>
- </div>
+ <section class$="[[_computeBranchClass(baseChange)]]">
+ <span class="title">Select branch for new change</span>
+ <span class="value">
+ <gr-autocomplete
+ id="branchInput"
+ text="{{branch}}"
+ query="[[_query]]"
+ placeholder="Destination branch">
+ </gr-autocomplete>
+ </span>
+ </section>
+ <section class$="[[_computeBranchClass(baseChange)]]">
+ <span class="title">Provide base commit sha1 for change</span>
+ <span class="value">
+ <input
+ is="iron-input"
+ id="baseCommitInput"
+ maxlength="40"
+ placeholder="(optional)"
+ bind-value="{{baseCommit}}">
+ </span>
+ </section>
+ <section>
+ <span class="title">Enter topic for new change</span>
+ <span class="value">
+ <input
+ is="iron-input"
+ id="tagNameInput"
+ maxlength="1024"
+ placeholder="(optional)"
+ bind-value="{{topic}}">
+ </span>
+ </section>
+ <section id="description">
+ <span class="title">Description</span>
+ <span class="value">
+ <iron-autogrow-textarea
+ id="messageInput"
+ class="message"
+ autocomplete="on"
+ rows="4"
+ max-rows="15"
+ bind-value="{{subject}}"
+ placeholder="Insert the description of the change.">
+ </iron-autogrow-textarea>
+ </span>
+ </section>
+ <section class$="[[_computePrivateSectionClass(_privateChangesEnabled)]]">
+ <label
+ class="title"
+ for="privateChangeCheckBox">Private change</label>
+ <span class="value">
+ <input
+ type="checkbox"
+ id="privateChangeCheckBox"
+ checked$="[[_formatBooleanString(privateByDefault)]]">
+ </span>
+ </section>
</div>
<gr-rest-api-interface id="restAPI"></gr-rest-api-interface>
</template>
