commit 3d6ca103eef208d9c9e5181f8e3810ea0815395e
author Tao Zhou <taoalpha@google.com> Fri Dec 06 14:48:48 2019 +0100
committer Tao Zhou <taoalpha@google.com> Fri Dec 06 13:54:19 2019 +0000
tree 7e024f72953338cf29b9787767389676b349fb27
parent 34f5119418d7604493b601ea8a1020d347d8f60c

Wrap file names into multiple lines if its too long

Increase the small screen breakpoint to 55em (~768px - 14px font size)

Change-Id: I38d0c10666a2546b8505f9ba1b4f93cdfca25998

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

diff --git a/polygerrit-ui/app/elements/change/gr-file-list/gr-file-list.html b/polygerrit-ui/app/elements/change/gr-file-list/gr-file-list.html
index 318633d..0a7f1ce 100644
--- a/polygerrit-ui/app/elements/change/gr-file-list/gr-file-list.html
+++ b/polygerrit-ui/app/elements/change/gr-file-list/gr-file-list.html
@@ -116,6 +116,9 @@
         cursor: pointer;
         flex: 1;
         text-decoration: none;
+        /* Wrap it into multiple lines if too long. */
+        white-space: normal;
+        word-break: break-word;
       }
       .path:hover :first-child {
         text-decoration: underline;
@@ -197,10 +200,6 @@
       .truncatedFileName {
         display: none;
       }
-      .expanded .fullFileName {
-        white-space: normal;
-        word-wrap: break-word;
-      }
       .mobile {
         display: none;
       }
@@ -247,7 +246,9 @@
         margin: -2px 0;
         padding: var(--spacing-s) 0;
       }
-      @media screen and (max-width: 50em) {
+
+      /** small screen breakpoint: 768px */
+      @media screen and (max-width: 55em) {
         .desktop {
           display: none;
         }