config_service: add a popup for icons and make cards more compact.

appengine/config_service/ui/src/config-ui/front-page.html

 <!--
   Copyright 2017 The LUCI Authors. All rights reserved.
   Use of this source code is governed under the Apache License, Version 2.0
   that can be found in the LICENSE file.
 -->
 
 <link rel="import" href="../../bower_components/app-layout/app-layout.html">
 <link rel="import" href="../../bower_components/iron-ajax/iron-ajax.html">
 <link rel="import" href="../../bower_components/paper-button/paper-button.html">
 <link rel="import" href="../../bower_components/paper-search/paper-search-bar.html">
@@ skipping 21 matching lines @@
         to {opacity: 1}
       }
 
       .loading { text-align: center; }
 
       .search-bar {
         padding-top: 7%;
         padding-bottom: 2%;
       }
 
+      .name {
+        font-family: sans-serif;
+        word-wrap: break-word;
+        text-align: center;
+      }
+
       paper-search-bar {
         @apply --shadow-elevation-4dp;
         width: 40%;
         height: 100%;
         margin: auto;
       }
     </style>
 
     <iron-ajax
         auto
@@ skipping 11 matching lines @@
     </div>
     
     <div class="config-list">
       <template is="dom-if" if="[[isLoading]]">
         <div class="center loading">
           <paper-spinner active></paper-spinner>
         </div>
       </template>
       <template is="dom-if" if="[[_not(isLoading)]]">
         <template is="dom-if" if="[[_isEmpty(searchResults)]]">
-          <div class="center">No config sets found.</div>
+          <div class="center name">No config sets found.</div>
         </template>
         <template is="dom-if" if="[[_not(_isEmpty(searchResults))]]">
           <template is="dom-repeat" items="[[searchResults]]" as="config">
             <div class="center config-card">
               <config-set-card
                   name="[[config.config_set]]" 
                   last-import-attempt="[[_getLastImportAttempt(config.last_import_attempt)]]">
               </config-set-card>
             </div>
           </template>
@@ skipping 62 matching lines @@
         var tempResults = this.configSetList.filter(e => e.config_set.includes(this.query));
         tempResults.sort(function(a, b) {
           return this._formatName(a.config_set).localeCompare(this._formatName(b.config_set));
         }.bind(this));
         this.searchResults = tempResults;
       },
 
     });
   </script>
 </dom-module>