[ADF-4264] Fix content node selector breadcrumb and styling (#4527)

lib/content-services/content-node-selector/content-node-selector-panel.component.html

@@ -42,6 +42,7 @@
                 [target]="documentList"
                 [transform]="breadcrumbTransform"
                 [folderNode]="breadcrumbFolderNode"
+                [root]="breadcrumbFolderTitle"
                 data-automation-id="content-node-selector-content-breadcrumb">
             </adf-dropdown-breadcrumb>
         </adf-toolbar-title>

lib/content-services/content-node-selector/content-node-selector-panel.component.ts

@@ -153,6 +153,7 @@ export class ContentNodeSelectorPanelComponent implements OnInit {
     inDialog: boolean = false;
     _chosenNode: Node = null;
     folderIdToShow: string | null = null;
+    breadcrumbFolderTitle: string | null = null;
 
     pagination: PaginationModel = this.DEFAULT_PAGINATION;
 
@@ -234,6 +235,7 @@ export class ContentNodeSelectorPanelComponent implements OnInit {
      */
     siteChanged(chosenSite: SiteEntry): void {
         this.siteId = chosenSite.entry.guid;
+        this.setTitleIfCustomSite(chosenSite);
         this.updateResults();
 
     }
@@ -409,4 +411,12 @@ export class ContentNodeSelectorPanelComponent implements OnInit {
     onNodeSelect(event: any): void {
         this.attemptNodeSelection(event.detail.node.entry);
     }
+
+    setTitleIfCustomSite(site: SiteEntry) {
+        if (this.customResourcesService.isCustomSource(site.entry.guid)) {
+            this.breadcrumbFolderTitle = site.entry.title;
+        } else {
+            this.breadcrumbFolderTitle = null;
+        }
+    }
 }

lib/content-services/content-node-selector/name-location-cell/name-location-cell.component.scss

@@ -2,10 +2,8 @@
     $foreground: map-get($theme, foreground);
 
     .adf-name-location-cell {
+        display: grid;
         &-location {
-            white-space: nowrap;
-            overflow: hidden;
-            text-overflow: ellipsis;
             color: mat-color($foreground, base, 0.5);
             font-size: 12px;
         }

lib/content-services/content-node-selector/name-location-cell/name-location-cell.component.ts

@@ -21,8 +21,8 @@ import { DataRow } from '@alfresco/adf-core';
 @Component({
     selector: 'adf-name-location-cell',
     template: `
-        <div class="adf-name-location-cell-name">{{ name }}</div>
-        <div class="adf-name-location-cell-location" [title]="path">{{ path }}</div>
+        <div class="adf-name-location-cell-name adf-datatable-cell-value">{{ name }}</div>
+        <div class="adf-name-location-cell-location adf-datatable-cell-value" [title]="path">{{ path }}</div>
     `,
     styleUrls: ['./name-location-cell.component.scss'],
     encapsulation: ViewEncapsulation.None,

lib/core/datatable/components/datatable/datatable.component.html

@@ -160,10 +160,12 @@
                         </ng-container>
                     </div>
                     <div *ngIf="col.template" class="adf-datatable-cell-container">
-                        <ng-container
-                            [ngTemplateOutlet]="col.template"
-                            [ngTemplateOutletContext]="{ $implicit: { data: data, row: row, col: col }, value: data.getValue(row, col) }">
-                        </ng-container>
+                        <div class="adf-cell-value">
+                            <ng-container
+                                [ngTemplateOutlet]="col.template"
+                                [ngTemplateOutletContext]="{ $implicit: { data: data, row: row, col: col }, value: data.getValue(row, col) }">
+                            </ng-container>
+                        </div>
                     </div>
                 </div>