config_service: make UI adjustable for mobile

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

Index: appengine/config_service/ui/src/config-ui/front-page.html
diff --git a/appengine/config_service/ui/src/config-ui/front-page.html b/appengine/config_service/ui/src/config-ui/front-page.html
index 2b6c1a7735b50044e5a7f1507d77eb9a9afd6417..85fbb95c3dba80d96103335fd69f122ebf4ed1f0 100644
--- a/appengine/config_service/ui/src/config-ui/front-page.html
+++ b/appengine/config_service/ui/src/config-ui/front-page.html
@@ -17,11 +17,18 @@
 <dom-module id="front-page">
   <template>
     <style>
-      .center {
-        width: 23%;
-        margin: auto;
+      @media only screen and (min-width: 768px) {
+        .center {
+          width: 550px;
+        }
+
+        paper-search-bar {
+          width: 900px;
+        }
       }
 
+      .loading { text-align: center; }
+
       .config-card { 
         padding-bottom: 1%;
         animation: fadein 1.5s;
@@ -32,8 +39,6 @@
         to {opacity: 1}
       }
 
-      .loading { text-align: center; }
-
       .search-bar {
         padding-top: 7%;
         padding-bottom: 2%;
@@ -45,12 +50,16 @@
         text-align: center;
       }
 
+      .center {
+        margin: auto;
+      }
+
       paper-search-bar {
         @apply --shadow-elevation-4dp;
-        width: 40%;
         height: 100%;
         margin: auto;
       }
+
     </style>
 
     <iron-ajax