Improve mobile experience for diff view

+ Also fixes layout issues in desktop diff view in Safari.

Bug: Issue 3908
Change-Id: I5d01f293132661a32c6d7a8d31855436292dce56

polygerrit-ui/app/elements/gr-diff-side.html

@@ -23,6 +23,7 @@ limitations under the License.
       :host,
       .container {
         display: flex;
+        flex: 0 0 auto;
       }
       .lineNum:before,
       .code:before {
@@ -45,9 +46,6 @@ limitations under the License.
       .canComment .lineNum:hover {
         background-color: #ccc;
       }
-      .code {
-        white-space: pre;
-      }
       .lightHighlight {
         background-color: var(--light-highlight-color);
       }
@@ -67,6 +65,10 @@ limitations under the License.
         /* >> character */
         content: '\00BB';
       }
+      .numbers,
+      .content {
+        white-space: pre;
+      }
       .numbers .filler {
         background-color: #eee;
       }

polygerrit-ui/app/elements/gr-diff-view.html

@@ -42,6 +42,9 @@ limitations under the License.
       .jumpToFileContainer {
         display: inline-block;
       }
+      .mobileJumpToFileContainer {
+        display: none;
+      }
       .downArrow {
         display: inline-block;
         font-size: .6em;
@@ -88,6 +91,21 @@ limitations under the License.
         padding: .3em 0;
         text-decoration: none;
       }
+      @media screen and (max-width: 60em) {
+        .dash {
+          display: none;
+        }
+        .reviewed {
+          vertical-align: -.1em;
+        }
+        .jumpToFileContainer {
+          display: none;
+        }
+        .mobileJumpToFileContainer {
+          display: block;
+          width: 100%;
+        }
+      }
     </style>
     <gr-ajax id="changeDetailXHR"
         auto
@@ -104,7 +122,8 @@ limitations under the License.
         last-response="{{_projectConfig}}"></gr-ajax>
     <h3>
       <a href$="[[_computeChangePath(_changeNum)]]">[[_changeNum]]</a><span>:</span>
-      <span>[[_change.subject]]</span> —
+      <span>[[_change.subject]]</span>
+      <span class="dash">—</span>
       <input id="reviewed"
           class="reviewed"
           type="checkbox"
@@ -126,6 +145,17 @@ limitations under the License.
           </div>
         </iron-dropdown>
       </div>
+      <div class="mobileJumpToFileContainer">
+        <select on-change="_handleMobileSelectChange">
+          <template is="dom-repeat" items="[[_fileList]]" as="path">
+            <option
+                value$="[[path]]"
+                selected$="[[_computeFileSelected(path, _path)]]">
+              [[path]]
+            </option>
+          </template>
+        </select>
+      </div>
     </h3>
     <gr-diff id="diff"
         change-num="[[_changeNum]]"
@@ -373,6 +403,12 @@ limitations under the License.
         this.$.dropdown.close();
       },
 
+      _handleMobileSelectChange: function(e) {
+        var path = Polymer.dom(e).rootTarget.value;
+        page.show(
+            this._computeDiffURL(this._changeNum, this._patchRange, path));
+      },
+
       _handleFilesResponse: function(e, req) {
         this._fileList = Object.keys(e.detail.response).sort();
       },

polygerrit-ui/app/elements/gr-diff.html

@@ -45,7 +45,6 @@ limitations under the License.
         display: flex;
         font: 12px var(--monospace-font-family);
         overflow-x: auto;
-        white-space: pre;
       }
       gr-diff-side:first-of-type {
         --light-highlight-color: #fee;

polygerrit-ui/app/styles/main.css

@@ -24,6 +24,9 @@ limitations under the License.
   margin: 0;
   padding: 0;
 }
+html {
+  -webkit-text-size-adjust: none;
+}
 html,
 body {
   height: 100%;