[breadcrumb] Move the elider drop-down menu vertically down

To expose more of the elider button tap-target surface, move the drop-
down menu vertically down. Use for 4px for now, to semi-align with the
other toolbar action-icons that have a drop-down menu [1].

[1] In future CLs, we should consider moving all the action-icon menus
down by 8px so their menu top position aligns with their <button> tap-
target box bottom position => issue 1059490.
  .___.
  |   | <= <button> tap-target 48px box
  |___|_________.
  |             |
  | menu-item 1 |
  | menu-item 2 | <= drop-down menu box
  | menu-item 3 |
  |_____________|

Bug: 1035691,1059490
Change-Id: I1fbea5c42f47906775dbb3c89c9104d02168c888
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2096321
Commit-Queue: Luciano Pacheco <lucmult@chromium.org>
Auto-Submit: Noel Gordon <noel@chromium.org>
Reviewed-by: Luciano Pacheco <lucmult@chromium.org>
Cr-Commit-Position: refs/heads/master@{#749004}

ui/file_manager/file_manager/foreground/js/ui/breadcrumb.js

@@ -393,7 +393,8 @@ class BreadCrumb extends HTMLElement {
 
     // Show drop-down below the elider button.
     const menu = this.shadowRoot.querySelector('cr-action-menu');
-    menu.showAt(elider, {top: elider.offsetTop + elider.offsetHeight});
+    const top = elider.offsetTop + elider.offsetHeight + 4;
+    menu.showAt(elider, {top: top});
 
     // Style drop-down and horizontal position.
     const dialog = menu.getDialog();