Gallery: Make the minimum window size larger.

ui/file_manager/gallery/css/gallery.css

 /* Copyright (c) 2014 The Chromium Authors. All rights reserved.
  * Use of this source code is governed by a BSD-style license that can be
  * found in the LICENSE file. */
 
 body {
   -webkit-user-select: none;
   font-family: Open Sans, Droid Sans Fallback, sans-serif;
   font-size: 84%;
   margin: 0;
 }
@@ skipping 134 matching lines @@
 }
 
 /* Toolbar */
 
 .gallery > .header,
 .gallery > .toolbar {
   -webkit-box-align: stretch;
   -webkit-box-orient: horizontal;
   -webkit-box-pack: start;
   background-color: rgba(30, 30, 30, 0.8);
-  display: -webkit-box;
+  display: flex;
   left: 0;
   opacity: 0;
   padding: 0 10px;
   pointer-events: none;
   position: absolute;
   right: 0;
   transition: opacity 300ms ease;
 }
 
 .gallery > .header {
   -webkit-app-region: drag;
   -webkit-box-align: center;
   -webkit-box-pack: end;
   border-bottom: 1px solid rgba(50, 50, 50, 0.8);
   display: -webkit-box;
   height: 45px;
   top: 0;
 }
 
 .gallery .header button {
   -webkit-app-region: no-drag;
 }
 
 .gallery > .toolbar {
   border-top: 1px solid rgba(50, 50, 50, 0.8);
   bottom: 0;
   height: 55px;
-  min-width: 800px;
+  overflow: hidden;
 }
 
 .gallery[tools]:not([slideshow]) > .header,
 .gallery[tools]:not([slideshow]) > .toolbar {
   opacity: 1;
   pointer-events: auto;
 }
 
 /* Hide immediately when entering the slideshow. */
 .gallery[tools][slideshow] > .toolbar {
@@ skipping 82 matching lines @@
   pointer-events: none;
 }
 
 .gallery[tools][editing] [dimmed] {
   opacity: 0.2;
 }
 
 /* Filename */
 
 .gallery .filename-spacer {
+  flex: 0 1 auto;
   height: 100%;
+  min-width: 140px;
   overflow: hidden;
   position: relative;
-  width: 270px;
+  width: 210px;
 }
 
 .gallery .filename-spacer > * {
   background-color: transparent;
   overflow: hidden;
   position: absolute;
   transition: visibility 0 linear 180ms, all 180ms linear;
   width: 260px;
 }
 
@@ skipping 91 matching lines @@
   cursor: default;
   pointer-events: none;
 }
 
 .gallery .filename-spacer .saved[highlighted] {
   -webkit-transform: scaleX(1.1) scaleY(1.1) rotate(0);
   opacity: 1;
 }
 
 /* Bubble */
+
 .gallery .toolbar .bubble {
   bottom: 65px;
   font-size: 85%;
   left: 50px;
   position: absolute;
   width: 220px;
 }
 
 .gallery:not([editing]) .toolbar .bubble {
   display: none;
 }
 
+/* Middle spacer */
+
+.gallery .middle-spacer {
+  align-items: center;
+  display: flex;
+  flex: 1 0 auto;
+  flex-direction: column;
+}
+
 /* Toolbar buttons */
 
 .gallery .button-spacer {
-  -webkit-box-flex: 1;
-  display: -webkit-box;
+  display: flex;
+  flex: none;
+  width: 210px; /* 42px button x 5 */
 }
 
 /* Thumbnails */
 
 .gallery .ribbon-spacer {
-  -webkit-box-align: center;
-  -webkit-box-orient: horizontal;
-  -webkit-box-pack: center;
-  display: -webkit-box;
-  height: 100%;
-  left: 280px;
-  position: absolute;
-  right: 280px;
+  height: 55px;
+  margin-bottom: -55px;
 }
 
 .gallery .toolbar .ribbon {
-  -webkit-box-flex: 0;
-  -webkit-box-orient: horizontal;
-  -webkit-box-pack: start;
-  display: -webkit-box;
   height: 100%;
   overflow: hidden;
   transition: opacity 180ms linear, visibility 0 linear;
   z-index: 0;
 }
 
 .gallery[editing] .toolbar .ribbon {
   opacity: 0;
   transition-delay: 0, 180ms;
   visibility: hidden;
 }
 
 .gallery .ribbon-image {
-  -webkit-box-align: center;
-  -webkit-box-orient: horizontal;
-  -webkit-box-pack: center;
   border: 2px solid rgba(255, 255, 255, 0);  /* transparent white */
   cursor: pointer;
-  display: -webkit-box;
+  display: inline-block;
   height: 47px;
   margin: 2px;
   overflow: hidden;
   transition: all 180ms linear;
   width: 47px;
 }
 
 .ribbon-image[vanishing='smooth'] {
   border-left-width: 0;
   border-right-width: 0;
@@ skipping 43 matching lines @@
 /* Editor buttons */
 
 .gallery .edit-bar-spacer {
   -webkit-box-align: center;
   -webkit-box-orient: horizontal;
   -webkit-box-pack: center;
   display: -webkit-box;
   height: 100%;
   left: 280px;
   opacity: 0;
-  position: absolute;
   right: 280px;
   transition: opacity 180ms linear, visibility 0 linear 180ms;
   visibility: hidden;
+  margin-bottom: -55px;
 }
 
 .gallery .toolbar .edit-main {
   -webkit-box-orient: horizontal;
   -webkit-box-pack: center;
   color: white;
   display: -webkit-box;
   height: 55px;
   overflow: visible;
 }
 
 .gallery[editing] .edit-bar-spacer {
   opacity: 1.0;
   pointer-events: auto;
   transition-delay: 100ms, 100ms;
   visibility: visible;
 }
 
 .gallery .header button,
 .gallery .toolbar button,
 .gallery .header button[disabled],
 .gallery .toolbar button[disabled] {
-  -webkit-box-align: center;
-  -webkit-box-flex: 0;
-  -webkit-box-orient: horizontal;
-  -webkit-box-pack: end;
   background-color: rgba(0, 0, 0, 0);
   background-position: center;
   background-repeat: no-repeat;
   border: none;
   box-shadow: none;
   color: white;
   cursor: pointer;
-  display: -webkit-box;
+  display: inline-block;
+  flex: none;
   opacity: 0.99;  /* Workaround for http://crosbug.com/21065 */
   padding: 1px;  /* Instead of a border. */
   position: relative;
   z-index: 10;
 }
 
 .gallery .header button,
 .gallery .toolbar button {
   height: 40px;
   margin: 6px 0;
@@ skipping 139 matching lines @@
 .gallery > .toolbar button[disabled],
 .gallery[tools][locked] > .toolbar button {
   opacity: 0.5;
   pointer-events: none;
 }
 
 .gallery > .toolbar button[hidden] {
   display: none;
 }
 
-.gallery[mode='slide'] > .toolbar > button.mode {
+.gallery[mode='slide'] > .toolbar button.mode {
   background-image: -webkit-image-set(
       url(../images/100/icon_mosaic.png) 1x,
       url(../images/200/icon_mosaic.png) 2x);
 }
 
-.gallery[mode='slide'] > .toolbar > button.mode:active {
+.gallery[mode='slide'] > .toolbar button.mode:active {
   background-image: -webkit-image-set(
       url(../images/100/icon_mosaic_selected.png) 1x,
       url(../images/200/icon_mosaic_selected.png) 2x);
 }
 
-.gallery[mode='mosaic'] > .toolbar > button.mode {
+.gallery[mode='mosaic'] > .toolbar button.mode {
   background-image: -webkit-image-set(
       url(../images/100/icon_1up.png) 1x,
       url(../images/200/icon_1up.png) 2x);
 }
 
-.gallery[mode='mosaic'] > .toolbar > button.mode:active {
+.gallery[mode='mosaic'] > .toolbar button.mode:active {
   background-image: -webkit-image-set(
       url(../images/100/icon_1up_selected.png) 1x,
       url(../images/200/icon_1up_selected.png) 2x);
 }
 
-.gallery > .toolbar > button.slideshow {
+.gallery > .toolbar button.slideshow {
   background-image: -webkit-image-set(
       url(../images/100/icon_slideshow.png) 1x,
       url(../images/200/icon_slideshow.png) 2x);
 }
 
-.gallery > .toolbar > button.slideshow:active,
-.gallery > .toolbar > button.slideshow[pressed] {
+.gallery > .toolbar button.slideshow:active,
+.gallery > .toolbar button.slideshow[pressed] {
   background-image: -webkit-image-set(
       url(../images/100/icon_slideshow_selected.png) 1x,
       url(../images/200/icon_slideshow_selected.png) 2x);
 }
 
-.gallery > .toolbar > button.delete {
+.gallery > .toolbar button.delete {
   background-image: -webkit-image-set(
       url(../images/100/icon_delete.png) 1x,
       url(../images/200/icon_delete.png) 2x);
 }
 
-.gallery > .toolbar > button.delete:active {
+.gallery > .toolbar button.delete:active {
   background-image: -webkit-image-set(
       url(../images/100/icon_delete_selected.png) 1x,
       url(../images/200/icon_delete_selected.png) 2x);
 }
 
-.gallery > .toolbar > button.edit {
+.gallery > .toolbar button.edit {
   background-image: -webkit-image-set(
       url(../images/100/icon_edit.png) 1x,
       url(../images/200/icon_edit.png) 2x);
 }
 
-.gallery > .toolbar > button.edit:active,
-.gallery > .toolbar > button.edit[pressed] {
+.gallery > .toolbar button.edit:active,
+.gallery > .toolbar button.edit[pressed] {
   background-image: -webkit-image-set(
       url(../images/100/icon_edit_selected.png) 1x,
       url(../images/200/icon_edit_selected.png) 2x);
 }
 
-.gallery > .toolbar > button.print {
+.gallery > .toolbar button.print {
   background-image: -webkit-image-set(
       url(../images/100/icon_print.png) 1x,
       url(../images/200/icon_print.png) 2x);
 }
 
-.gallery > .toolbar > button.print:active,
-.gallery > .toolbar > button.print[pressed] {
+.gallery > .toolbar button.print:active,
+.gallery > .toolbar button.print[pressed] {
   background-image: -webkit-image-set(
       url(../images/100/icon_print_selected.png) 1x,
       url(../images/200/icon_print_selected.png) 2x);
 }
 
-.gallery > .toolbar > button.share {
+.gallery > .toolbar button.share {
   background-image: -webkit-image-set(
       url(../images/100/icon_share.png) 1x,
       url(../images/200/icon_share.png) 2x);
 }
 
-.gallery > .toolbar > button.share:active,
-.gallery > .toolbar > button.share[pressed] {
+.gallery > .toolbar button.share:active,
+.gallery > .toolbar button.share[pressed] {
   background-image: -webkit-image-set(
       url(../images/100/icon_share_selected.png) 1x,
       url(../images/200/icon_share_selected.png) 2x);
 }
 
-.gallery > .toolbar > button.share[disabled] {
+.gallery > .toolbar button.share[disabled] {
   display: none;
 }
 
 /* Secondary toolbar (mode-specific tools) */
 
 .gallery .edit-modal {
   -webkit-box-orient: horizontal;
   -webkit-box-pack: center;
   bottom: 80px;
   display: -webkit-box;
@@ skipping 505 matching lines @@
       url(chrome://resources/images/2x/apps/topbar_button_maximize.png) 2x)
       center;
 }
 
 .gallery > .header > .close-button {
   background: -webkit-image-set(
       url(chrome://resources/images/apps/topbar_button_close.png) 1x,
       url(chrome://resources/images/2x/apps/topbar_button_close.png) 2x)
       center;
 }