Change destination item layout to accomodate longer destination names.

BUG=176158

Review URL: https://codereview.chromium.org/158983004

git-svn-id: svn://svn.chromium.org/chrome/trunk/src@251242 0039d316-1c4b-4281-b951-d872f2087c98

chrome/browser/resources/print_preview/search/destination_list_item.css

@@ -19,25 +19,39 @@
   opacity: 0.4;
 }
 
+.destination-list-item-content {
+  display: flex;
+}
+
 .destination-list-item-icon {
   -webkit-margin-end: 8px;
   -webkit-transition: opacity 150ms;
   display: inline-block;
+  flex: 0 0 auto;
   height: 24px;
   vertical-align: middle;
   width: 24px;
 }
 
 .destination-list-item-name {
+  flex: 0 1 auto;
+  line-height: 24px;
+  overflow: hidden;
+  text-overflow: ellipsis;
   vertical-align: middle;
+  white-space: nowrap;
 }
 
 .destination-list-item .offline-status {
   -webkit-margin-start: 1em;
+  flex: 0 0 auto;
   font-size: 75%;
+  line-height: 24px;
   opacity: 0.6;
+  vertical-align: middle;
 }
 
 .register-promo {
   -webkit-margin-start: 1em;
+  flex: 0 0 auto;
 }
\ No newline at end of file

chrome/browser/resources/print_preview/search/destination_list_item.html

 <li id="destination-list-item-template" class="destination-list-item" hidden>
-  <img class="destination-list-item-icon">
-  <span class="destination-list-item-name"></span>
-  <span class="offline-status" hidden></span>
-  <span class="register-promo" hidden>
-    <button i18n-content="registerPromoButtonText"
-            class="register-promo-button">
-    </button>
+  <span class="destination-list-item-content">
+    <img class="destination-list-item-icon">
+    <span class="destination-list-item-name"></span>
+    <span class="offline-status" hidden></span>
+    <span class="register-promo" hidden>
+      <button i18n-content="registerPromoButtonText"
+              class="register-promo-button">
+      </button>
+    </span>
   </span>
 </li>