MD downloads: add a narrow mode for smaller windows

chrome/browser/resources/md_downloads/item.css

Index: chrome/browser/resources/md_downloads/item.css
diff --git a/chrome/browser/resources/md_downloads/item.css b/chrome/browser/resources/md_downloads/item.css
index 87e78c886c35e45767f195c02c8e4ec8834db383..7e9786352ba6bb84ada06944559cd8d2778b330e 100644
--- a/chrome/browser/resources/md_downloads/item.css
+++ b/chrome/browser/resources/md_downloads/item.css
@@ -12,11 +12,17 @@
   margin-top: -16px;
 }
 
-/* Day separators. */
-:host(:not(:first-of-type):not([hide-date])) :-webkit-any(#content-wrapper,
-                                                          #since) {
-  border-top: 1px solid rgba(0, 0, 0, .2);  /* TODO(dbeam): real color. */
-  padding-top: 32px;
+@media not all and (max-width: 1024px) {
+  /* Day separators. */
+  :host(:not(:first-of-type):not([hide-date])) :-webkit-any(#content-wrapper,
+                                                            #since) {
+    border-top: 1px solid rgba(0, 0, 0, .2);  /* TODO(dbeam): real color. */
+    padding-top: 32px;
+  }
+
+  #date-container > * {
+    -webkit-margin-start: 24px;
+  }
 }
 
 #date-container,
@@ -25,7 +31,6 @@
 }
 
 #date-container > * {
-  -webkit-margin-start: 24px;
   color: #616161;
   font-size: 107.69%;
   font-weight: bold;
@@ -43,6 +48,27 @@
   width: var(--downloads-item-width);
 }
 
+@media all and (max-width: 1024px) {

[tommycli, 2015/07/31 17:54:56]

Should be adjacent to the opposite media query

[Dan Beam, 2015/07/31 18:36:37]

Done.

+  :host {
+    flex-direction: column;
+  }
+
+  :host([hide-date]) #date-container,
+  #end-cap {
+    display: none;
+  }
+
+  #content {
+    margin: 0 auto;
+  }
+
+  #date-container {
+    flex: none !important;
+    margin: 0 auto 32px;
+    width: var(--downloads-item-width);
+  }
+}
+
 #content.no-file {
   background: rgba(255, 255, 255, .5);
 }