MD History: Add responsive layout which hides the sidebar in thin windows

ui/webui/resources/cr_elements/cr_toolbar/cr_toolbar_search_field.html

Index: ui/webui/resources/cr_elements/cr_toolbar/cr_toolbar_search_field.html
diff --git a/ui/webui/resources/cr_elements/cr_toolbar/cr_toolbar_search_field.html b/ui/webui/resources/cr_elements/cr_toolbar/cr_toolbar_search_field.html
index b187aff2c54c004d65cf0a3fd7ad31eb878595c8..bce99e09c0a4b341ba417d7faf14d4dd8c44d350 100644
--- a/ui/webui/resources/cr_elements/cr_toolbar/cr_toolbar_search_field.html
+++ b/ui/webui/resources/cr_elements/cr_toolbar/cr_toolbar_search_field.html
@@ -10,11 +10,13 @@
   <template>
     <style>
       :host {
+        -webkit-padding-end: 12px;
         align-items: center;
         display: flex;
         height: 40px;
         transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
-            width 150ms cubic-bezier(0.4, 0, 0.2, 1);
+            width 150ms cubic-bezier(0.4, 0, 0.2, 1),
+            left 150ms cubic-bezier(0.4, 0, 0.2, 1);
         width: 44px;
       }
 
@@ -25,6 +27,7 @@
       paper-icon-button {
         height: 32px;
         margin: 6px;
+        min-width: 32px;
         padding: 6px;
         width: 32px;
       }
@@ -89,16 +92,13 @@
 
       /* Any layout, search open. */
       :host([showing-search]) {
-        width: 100%;
+        width: calc(100% - 12px);

[calamity, 2016/06/17 03:02:00]

Pull 12px into a css var.

[tsergeant, 2016/06/20 05:05:57]

Done.

+        left: 0;
       }
 
       :host([showing-search][spinner-active]) #icon {
         opacity: 0;
       }
-
-      :host([narrow][showing-search]) #icon {
-        -webkit-margin-start: 18px;
-      }
     </style>
     <paper-spinner-lite
         active="[[isSpinnerShown_(spinnerActive, showingSearch)]]">