Improve layout of comment list in mobile

In desktop sizes line links to the left of comments in gr-comment-list
have a wide minimum width to keep alignment in situations that the
labels are long (see I7f4509eb6a). However, this would make the comments
difficult to read on mobile screen sizes because relatively little
horizontal space would be left over.

With this change, a mobile breakpoint is added that moves the links
above the comments in this case.

Change-Id: I221135f488a9a4cfc0c1ba8a5ef0c8e4ceebfb18

polygerrit-ui/app/elements/change/gr-comment-list/gr-comment-list.html

@@ -42,7 +42,7 @@ limitations under the License.
       }
       .container {
         display: flex;
-        margin: 5px 0;
+        margin: .5em 0;
       }
       .lineNum {
         margin-right: .5em;
@@ -53,6 +53,16 @@ limitations under the License.
         flex: 1;
         --gr-formatted-text-prose-max-width: 80ch;
       }
+      @media screen and (max-width: 50em) {
+        .container {
+          flex-direction: column;
+          margin: 0 0 .5em .5em;
+        }
+        .lineNum {
+          min-width: initial;
+          text-align: left;
+        }
+      }
     </style>
     <template is="dom-repeat" items="[[_computeFilesFromComments(comments)]]" as="file">
       <div class="file">[[computeDisplayPath(file)]]:</div>