This requires a very very long file name :) If it's an easy fix we should definitely truncate!

Marianne, could you take a look?

Reproduced the bug with a looooooong file name and starting to look at sources.

Files app's tool bar has 9px padding between filename and the buttons. (See the screenshot)
I think we can follow this in Quick View toolbar.

Maria, could you confirm?

Deleted: Screenshot 2017-09-22 at 10.18.26.png 560 KB

	Screenshot 2017-09-22 at 10.18.26.png 560 KB View Download

My guess is that the padding should be 8px, +sgabriel@ to double check me. In any case I agree we should use the same padding for the Quick view toolbar. 

The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/e429df83ca90de683373051942d70499fdc375a8

commit e429df83ca90de683373051942d70499fdc375a8
Author: mariannet <mariannet@google.com>
Date: Mon Sep 25 02:41:14 2017

Crop long file names in quick view.

Bug:  680862 
Test: manual tests
Cq-Include-Trybots: master.tryserver.chromium.linux:closure_compilation
Change-Id: I9ce34a9969e0b1512aed3fbe758c42ddfb9ee4a9
Reviewed-on: https://chromium-review.googlesource.com/676552
Reviewed-by: Naoki Fukino <fukino@chromium.org>
Reviewed-by: Keigo Oka <oka@chromium.org>
Commit-Queue: Marianne Thieffry <mariannet@google.com>
Cr-Commit-Position: refs/heads/master@{#503970}
[modify] https://crrev.com/e429df83ca90de683373051942d70499fdc375a8/ui/file_manager/file_manager/foreground/elements/files_quick_view.css
[modify] https://crrev.com/e429df83ca90de683373051942d70499fdc375a8/ui/file_manager/file_manager/foreground/elements/files_quick_view.html

Fix for the overflow has been committed. The only thing left to discuss are the exact pixel values

After the change, the buttons are in wrong position when filename is short.
Let me revert it for now.

Deleted: screenshot.png 149 KB

	screenshot.png 149 KB View Download

The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/5744b42299650f33942901699589c4b9059a66cd

commit 5744b42299650f33942901699589c4b9059a66cd
Author: Keigo Oka <oka@chromium.org>
Date: Mon Sep 25 06:14:53 2017

Revert "Crop long file names in quick view."

This reverts commit e429df83ca90de683373051942d70499fdc375a8.

Reason for revert: Buttons position is wrong when filename is short.

Original change's description:
> Crop long file names in quick view.
> 
> Bug:  680862 
> Test: manual tests
> Cq-Include-Trybots: master.tryserver.chromium.linux:closure_compilation
> Change-Id: I9ce34a9969e0b1512aed3fbe758c42ddfb9ee4a9
> Reviewed-on: https://chromium-review.googlesource.com/676552
> Reviewed-by: Naoki Fukino <fukino@chromium.org>
> Reviewed-by: Keigo Oka <oka@chromium.org>
> Commit-Queue: Marianne Thieffry <mariannet@google.com>
> Cr-Commit-Position: refs/heads/master@{#503970}

TBR=fukino@chromium.org,oka@chromium.org,mariannet@google.com

Change-Id: Ie8fe70059ff64cf0c7813a70973d76aee5a9e6c9
No-Presubmit: true
No-Tree-Checks: true
No-Try: true
Bug:  680862 
Cq-Include-Trybots: master.tryserver.chromium.linux:closure_compilation
Reviewed-on: https://chromium-review.googlesource.com/680773
Reviewed-by: Keigo Oka <oka@chromium.org>
Commit-Queue: Keigo Oka <oka@chromium.org>
Cr-Commit-Position: refs/heads/master@{#503987}
[modify] https://crrev.com/5744b42299650f33942901699589c4b9059a66cd/ui/file_manager/file_manager/foreground/elements/files_quick_view.css
[modify] https://crrev.com/5744b42299650f33942901699589c4b9059a66cd/ui/file_manager/file_manager/foreground/elements/files_quick_view.html

As I checked, one way to fix the problem is to have the following CSS.

   --paper-toolbar-content: {
+    width: 100%;
+    box-sizing: border-box;
+    justify-content: space-between;
     -webkit-padding-end: 0;
   };

Since I changed the toolbar to not use paper-toolbar anymore at [1], the proposed fix at comment #11 will not work as-is. So I am proposing [2] as the new fix, see attached screencast for the behavior.


[1] https://chromium-review.googlesource.com/c/chromium/src/+/683297
[2] https://chromium-review.googlesource.com/#/c/chromium/src/+/685739

Deleted: quick_view_overflow.mp4 1.2 MB

	quick_view_overflow.mp4 1.2 MB View Download

Looks great! Thanks for the screencast :)

The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/78c008023416cee026b2db7e51830076c60a1712

commit 78c008023416cee026b2db7e51830076c60a1712
Author: dpapad <dpapad@chromium.org>
Date: Wed Sep 27 03:01:25 2017

CrOS FileManager: Fix quick view file name overflow.

Bug:  680862 
Cq-Include-Trybots: master.tryserver.chromium.linux:closure_compilation
Change-Id: I3d00553b515af062338e420ca2a03cc595cb52ac
Reviewed-on: https://chromium-review.googlesource.com/685739
Reviewed-by: Naoki Fukino <fukino@chromium.org>
Commit-Queue: Demetrios Papadopoulos <dpapad@chromium.org>
Cr-Commit-Position: refs/heads/master@{#504562}
[modify] https://crrev.com/78c008023416cee026b2db7e51830076c60a1712/ui/file_manager/file_manager/foreground/elements/files_quick_view.css

Thanks :)