Make text in visual signals fill the remaining space

This text, contained in the .xf-panel-text element, can have two
different widths depending on the Files Transfer Details flag, so make
it flex to fill up the entire space in both cases.

Bug: 1137316
Change-Id: Ibea7905e7c764e0e5d1a0caf096fdba427cbb911
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2467498Reviewed-by: Noel Gordon <noel@chromium.org>
Commit-Queue: Austin Tankiang <austinct@chromium.org>
Cr-Commit-Position: refs/heads/master@{#816883}

ui/file_manager/file_manager/foreground/elements/xf_panel_item.js

@@ -66,7 +66,8 @@ class PanelItem extends HTMLElement {
                   border-radius: 4px;
                   display: flex;
                   flex-direction: row;
-                  max-width: 400px;
+                  height: 68px;
+                  width: 400px;
               }
 
               .xf-button {
@@ -75,9 +76,9 @@ class PanelItem extends HTMLElement {
               }
 
               .xf-panel-text {
+                  flex: 1;
                   font: 13px Roboto;
                   line-height: 20px;
-                  max-width: 216px;
                   overflow: hidden;
                   text-overflow: ellipsis;
                   white-space: nowrap;
@@ -87,10 +88,6 @@ class PanelItem extends HTMLElement {
                   outline: none;
               }
 
-              :host([panel-type='3']) .xf-panel-text {
-                  width: 216px;
-              }
-
               :host([panel-type='3']) .xf-panel-label-text {
                   display: -webkit-box;
                   -webkit-line-clamp: 2;
@@ -105,7 +102,6 @@ class PanelItem extends HTMLElement {
 
               .xf-panel-label-text {
                   color: var(--google-grey-900);
-                  max-width: 216px;
                   text-overflow: ellipsis;
                   overflow: hidden;
                   white-space: nowrap;
@@ -124,7 +120,6 @@ class PanelItem extends HTMLElement {
               }
 
               :host(:not([detailed-panel])) .xf-grow-padder {
-                  flex-grow: 16;
                   width: 24px;
               }
 
@@ -153,15 +148,6 @@ class PanelItem extends HTMLElement {
                   padding-bottom: var(--progress-padding-bottom);
               }
 
-              :host(:not([panel-type='0'])) .xf-panel-item {
-                  height: 68px;
-              }
-
-              :host([detailed-panel]) .xf-panel-item {
-                  height: 68px;
-                  width: 400px;
-              }
-
               :host([detailed-panel]:not([detailed-summary])) .xf-panel-text {
                   margin-inline-end: 24px;
                   margin-inline-start: 24px;
@@ -173,7 +159,6 @@ class PanelItem extends HTMLElement {
 
               :host([detailed-panel]:not([detailed-summary])) xf-button {
                   margin-inline-end: 12px;
-                  margin-inline-start: auto;
               }
 
               :host([detailed-panel]:not([detailed-summary])) #indicator {