CrOS Gallery: Avoid the ribbon overlapping the <video> scrubber.

Currently video taller than the aspect of the gallery window can have
its scrubber controls overlapped by the thumbnail ribbon at the bottom.

This just adds a CSS rule to moves the video element away from the top
and bottom edges when the ribbon is visible. If the video is "wide"
enough, there's no effect.

Bug: 850372
Change-Id: I26db28fab80ef5be136692b25c14b704a4a3f7b2
Reviewed-on: https://chromium-review.googlesource.com/1109442Reviewed-by: Noel Gordon <noel@chromium.org>
Commit-Queue: Trent Apted <tapted@chromium.org>
Cr-Commit-Position: refs/heads/master@{#569551}

ui/file_manager/gallery/css/gallery.css

@@ -110,7 +110,9 @@ paper-ripple {
    * center within the container. Note that this makes transitions janky, but
    * transitions with video controls look silly, so they're disabled.
    */
+  align-items: center;
   display: flex;
+  justify-content: center;
 }
 
 .gallery[tools] .image-container[cursor='default'] {
@@ -169,11 +171,18 @@ paper-ripple {
 }
 
 .gallery .video-container > .video {
-  margin: auto auto;
   max-height: 100%;
   max-width: 100%;
-  object-fit: contain;
-  object-position: 50% 50%;
+}
+
+/*
+ * Move the video element away from the top and bottom edges when the ribbon is
+ * visible so that it doesn't overlap the scrubber when a video is sufficiently
+ * tall.
+ */
+.gallery[tools] .video-container > .video {
+  box-sizing: border-box;
+  padding: 48px 0;
 }
 
 @media print {