ACS-8661: fix regression with metadata tags layout after Angular 15 upgrade (#10124)

lib/content-services/src/lib/content-metadata/components/content-metadata/content-metadata.component.scss

@@ -65,11 +65,15 @@ $panel-properties-height: 56px !default;
         }
 
         #{$mat-chip} {
-            background: var(--adf-metadata-buttons-background-color);
-            padding: 6px;
-
             &.metadata-properties-tag-chip {
-                overflow-wrap: anywhere;
+                // TODO: bug open https://github.com/angular/components/issues/26584
+                /* stylelint-disable selector-class-pattern */
+                .mdc-evolution-chip__cell--primary,
+                .mdc-evolution-chip__action--primary,
+                .mat-mdc-chip-action-label {
+                    overflow: hidden;
+                }
+                /* stylelint-enable selector-class-pattern */
             }
         }
 

lib/content-services/src/lib/tag/tags-creator/tags-creator.component.html

@@ -16,7 +16,7 @@
         {{ 'TAG.TAGS_CREATOR.NO_TAGS_CREATED' | translate }}
     </p>
     <div class="adf-tags-list" [class.adf-tags-list-fixed]="!tagNameControlVisible" #tagsList>
-        <mat-chip-listbox *ngIf="tags.length > 0" class="adf-tags-chips-container">
+        <mat-chip-listbox *ngIf="tags.length > 0">
             <mat-chip-option *ngFor="let tag of tags" [disableRipple]="true" [title]="tag" class="adf-tags-chip">
                 {{ tag }}
                 <button

lib/content-services/src/lib/tag/tags-creator/tags-creator.component.scss

@@ -42,19 +42,7 @@ adf-tags-creator {
     }
 
     .adf-tags-list {
-        padding-right: 0;
-        display: flex;
-        flex-wrap: wrap;
-        gap: 8px;
-    }
-
-    .adf-tags-chips-container {
         margin-top: 8px;
-
-        .adf-tags-chip {
-            background: var(--adf-metadata-buttons-background-color);
-            height: unset;
-        }
     }
 
     .adf-existing-tags-panel {
@@ -107,6 +95,17 @@ adf-tags-creator {
         }
     }
 
+    // TODO: bug open https://github.com/angular/components/issues/26584
+    /* stylelint-disable selector-class-pattern */
+    .mdc-evolution-chip-set .mat-mdc-standard-chip {
+        .mdc-evolution-chip__cell--primary,
+        .mdc-evolution-chip__action--primary,
+        .mat-mdc-chip-action-label {
+            overflow: hidden;
+        }
+    }
+    /* stylelint-enable selector-class-pattern */
+
     [hidden] {
         visibility: hidden;
         display: none;