config_service: make UI adjustable for mobile

appengine/config_service/ui/src/config-ui/config-ui.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/polymer/polymer.html">
 <link rel="import" href="../../bower_components/paper-search/paper-search-bar.html">
 <link rel="import" href="../../bower_components/app-route/app-location.html">
 <link rel="import" href="../../bower_components/app-route/app-route.html">
 <link rel="import" href="../../bower_components/app-layout/app-drawer-layout/app-drawer-layout.html">
 <link rel="import" href="../../bower_components/app-layout/app-header/app-header.html">
 <link rel="import" href="../../bower_components/app-layout/app-header-layout/app-header-layout.html">
 <link rel="import" href="../../bower_components/app-layout/app-toolbar/app-toolbar.html">
 
 <link rel="import" href="../../common/auth-signin.html">
 <link rel="import" href="config-set.html">
 <link rel="import" href="front-page.html">
 
 <dom-module id="config-ui">
   <template>
     <style>
+      @media only screen and (min-width: 768px) {
+        app-toolbar {
+          height: 60px;
+        }
+
+        .logo { 
+          height: 50px;
+        }
+
+        .right { margin-left:15px; }
+      }
+
       * { font-family: sans-serif; }
 
       app-toolbar {
         background-color: var(--google-blue-500);
         color: #232323;
-        height: 60px;
-      }
-
-      .logo { 
-        height: 50px;
-      }
-
-      .right { margin-left:15px; }
-
-      .title {
-        font-size: 125%;
-        color: white;
       }
 
       .link {
         font-size: 75%;
         color: white;
         margin-right: 10px;
       }
+
+      .title {
+        color: white;
+        font-size: 125%;
+      }
     </style>
 
     <app-drawer-layout fullbleed force-narrow>
       <app-header-layout>
         <app-header reveals slot="header">
           <app-toolbar>
             <!--<image class="logo" src="/static/images/chromium.png"/>-->
             <div class="title" main-title>
               Configuration Service
             </div>
@@ skipping 74 matching lines @@
           // If the path is blank, redirect to /
           if (!this.route.path) {
             this.set('route.path', '/');
           }
         });
       },
 
     });
   </script>
 </dom-module>