[breadcrumb] Fix min-widths, padding etc for flexbox layout eliding

After mitigation CL:2098140 lands, the breadcrumb flexbox layout starts
to work as expected: it can flex. Add min-widths, pads to tune the flex
eliding ... best we can, given we have no spec at all for this.

No breadcrumb folder tooltip mentioned in the spec either.

Bug: 1035691
Change-Id: I3fa47a1ffe5daf90a3cc8dfd741ec370117fd3d3
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2098168Reviewed-by: Noel Gordon <noel@chromium.org>
Reviewed-by: Luciano Pacheco <lucmult@chromium.org>
Reviewed-by: Alex Danilo <adanilo@chromium.org>
Commit-Queue: Noel Gordon <noel@chromium.org>
Cr-Commit-Position: refs/heads/master@{#749540}

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

@@ -28,7 +28,8 @@ const breadCrumbTemplate = `
       background-color: currentColor;
       display: inline-flex;
       height: 20px;
-      margin: 8px 0;
+      padding: 8px 0;
+      min-width: 20px;
       width: 20px;
     }
 
@@ -43,14 +44,14 @@ const breadCrumbTemplate = `
       border-radius: 4px;
       color: var(--google-grey-700);
       cursor: pointer;
-      display: inline-flex;
+      display: inline-block;
 
       /* don't use browser's button font. */
       font: inherit;
       margin: 0;
 
       /* text rendering debounce: fix a minimum width. */
-      min-width: 1.2em;
+      min-width: calc(12px + 1em);
 
       /* elide wide text */
       max-width: 200px;
@@ -70,6 +71,7 @@ const breadCrumbTemplate = `
       color: var(--google-grey-900);
       cursor: default;
       font-weight: 500;
+      margin-inline-end: 4px;
     }
 
     span[elider] {
@@ -84,12 +86,15 @@ const breadCrumbTemplate = `
       min-width: 48px;
       position: relative;
       transform: rotate(90deg);
+      width: 48px;
     }
 
     button[elider] {
       border-radius: 50%;
       box-sizing: border-box;
+      display: inline-flex;
       height: 36px;
+      min-width: 36px;
       padding: 0;
       width: 36px;
     }