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

chrome/browser/resources/md_history/history.html

Index: chrome/browser/resources/md_history/history.html
diff --git a/chrome/browser/resources/md_history/history.html b/chrome/browser/resources/md_history/history.html
index 009049ab7fe815776d2511e4cbf1388d352e030d..33bb2403dd2475f18ae7039408ebefa5ed75f359 100644
--- a/chrome/browser/resources/md_history/history.html
+++ b/chrome/browser/resources/md_history/history.html
@@ -20,40 +20,43 @@
       flex-direction: column;
     }
 
+    history-app {
+      flex: 1;
+    }
+
     /* Minimal styling required to display app shim. */
-    .loading history-app,
-    .app-shim {
-      display: none;
+    .loading history-app {
+      visibility: hidden;
     }
 
-    history-app {
-      flex: 1;
+    .app-shim {
+      display: none;
     }
 
     .loading .app-shim {
       display: flex;
       font-size: 123%;
+      left: 0;
+      position: absolute;
+      right: 0;
     }
 
     .loading #loading-toolbar {
       -webkit-padding-start: 24px;
       align-items: center;
+      background: var(--md-toolbar-color);
       color: #fff;
-      flex-direction: row;
       font-weight: 400;
       height: 56px;
     }
 
-    .loading #loading-toolbar {
-      background: var(--md-toolbar-color);
-    }
-
     .loading #loading-message {
       align-items: center;
+      bottom: 0;
       color: #b4b4b4;
-      flex: 1;
       font-weight: 500;
       justify-content: center;
+      top: 0;
     }
   </style>
 </head>