From 23e1467bba08f011b35feb9157aa6b51640fc5b0 Mon Sep 17 00:00:00 2001
From: Mykyta Maliarchuk <84377976+nikita-web-ua@users.noreply.github.com>
Date: Mon, 29 Apr 2024 09:26:00 +0200
Subject: [PATCH] [ACS-7572] link rules dialog fixes (#9607)

---
 .../dropdown-breadcrumb.component.html        |  1 +
 .../dropdown-breadcrumb.component.scss        |  9 ++++---
 ...content-node-selector-panel.component.html |  1 +
 ...content-node-selector-panel.component.scss | 24 +++----------------
 .../content-node-selector.component.scss      | 24 -------------------
 .../sites-dropdown.component.html             |  2 +-
 lib/core/src/lib/styles/_mat-selectors.scss   |  3 ++-
 7 files changed, 14 insertions(+), 50 deletions(-)

diff --git a/lib/content-services/src/lib/breadcrumb/dropdown-breadcrumb.component.html b/lib/content-services/src/lib/breadcrumb/dropdown-breadcrumb.component.html
index f0ef44288b2..0a646d11433 100644
--- a/lib/content-services/src/lib/breadcrumb/dropdown-breadcrumb.component.html
+++ b/lib/content-services/src/lib/breadcrumb/dropdown-breadcrumb.component.html
@@ -18,6 +18,7 @@
         <mat-select
             #dropdown
             *ngIf="hasPreviousNodes()"
+            panelClass="adf-breadcrumb-dropdown-panel"
             class="adf-dropdown-breadcrumb-path-select"
             tabindex="-1"
             role="button"
diff --git a/lib/content-services/src/lib/breadcrumb/dropdown-breadcrumb.component.scss b/lib/content-services/src/lib/breadcrumb/dropdown-breadcrumb.component.scss
index 3e956e7cfa9..aeaf451fd98 100644
--- a/lib/content-services/src/lib/breadcrumb/dropdown-breadcrumb.component.scss
+++ b/lib/content-services/src/lib/breadcrumb/dropdown-breadcrumb.component.scss
@@ -1,3 +1,5 @@
+@import 'styles/mat-selectors';
+
 $dropdown-horizontal-offset: 30px;
 
 .adf {
@@ -47,7 +49,6 @@ $dropdown-horizontal-offset: 30px;
         width: 0;
         height: 0;
         overflow: hidden;
-        margin-top: 35px;
 
         &-select {
             width: 0;
@@ -64,8 +65,6 @@ $dropdown-horizontal-offset: 30px;
     }
 
     &-dropdown-breadcrumb-path-option.adf-dropdown-breadcrumb-path-option-node {
-        height: 28px;
-        line-height: 28px;
         padding: 0 12px;
         font-size: var(--theme-caption-font-size);
     }
@@ -98,3 +97,7 @@ $dropdown-horizontal-offset: 30px;
         margin-right: $dropdown-horizontal-offset;
     }
 }
+
+#{$cdk-overlay-pane}:has(>.adf-breadcrumb-dropdown-panel){
+    min-width: fit-content;
+}
diff --git a/lib/content-services/src/lib/content-node-selector/content-node-selector-panel/content-node-selector-panel.component.html b/lib/content-services/src/lib/content-node-selector/content-node-selector-panel/content-node-selector-panel.component.html
index 575cde7b354..c4e196d26f9 100644
--- a/lib/content-services/src/lib/content-node-selector/content-node-selector-panel/content-node-selector-panel.component.html
+++ b/lib/content-services/src/lib/content-node-selector/content-node-selector-panel/content-node-selector-panel.component.html
@@ -1,5 +1,6 @@
 <div class="adf-content-node-selector-content">
     <mat-form-field floatPlaceholder="never"
+                    appearance="outline"
                     class="adf-content-node-selector-content-input"
                     subscriptSizing="dynamic"
                     *ngIf="showSearch">
diff --git a/lib/content-services/src/lib/content-node-selector/content-node-selector-panel/content-node-selector-panel.component.scss b/lib/content-services/src/lib/content-node-selector/content-node-selector-panel/content-node-selector-panel.component.scss
index 266580fd152..976a52e1728 100644
--- a/lib/content-services/src/lib/content-node-selector/content-node-selector-panel/content-node-selector-panel.component.scss
+++ b/lib/content-services/src/lib/content-node-selector/content-node-selector-panel/content-node-selector-panel.component.scss
@@ -45,6 +45,7 @@ h2.adf-search-results-label {
 
         &-input {
             width: 100%;
+            margin: 16px 0;
 
             &-icon {
                 color: var(--adf-theme-foreground-icon-color-054);
@@ -58,32 +59,13 @@ h2.adf-search-results-label {
 
         .adf-site-dropdown-container {
             display: block;
-            margin-bottom: 15px;
 
-            #{$mat-form-field-label} {
-                padding-top: 16px;
-            }
-
-            #{$mat-floating-label-above} {
-                padding-top: 0;
+            .adf-sites-dropdown-form-field {
+                width: 100%;
             }
         }
     }
 
-    .adf-sites-dropdown-form-field {
-        margin-top: 4px;
-        margin-bottom: 16px;
-    }
-
-    .adf-site-dropdown-list-element {
-        width: 100%;
-        margin-bottom: 0;
-
-        .adf-sites-dropdown-select-trigger {
-            font-size: var(--theme-body-1-font-size);
-        }
-    }
-
     &-breadcrumb {
         .adf-dropdown-breadcrumb-trigger {
             outline: none;
diff --git a/lib/content-services/src/lib/content-node-selector/content-node-selector.component.scss b/lib/content-services/src/lib/content-node-selector/content-node-selector.component.scss
index 2f17221e716..519b274620b 100644
--- a/lib/content-services/src/lib/content-node-selector/content-node-selector.component.scss
+++ b/lib/content-services/src/lib/content-node-selector/content-node-selector.component.scss
@@ -44,27 +44,6 @@ adf-content-node-selector {
 .adf-content-node-selector-dialog {
     #{$mat-form-field} {
         width: 100%;
-
-        #{$mat-select-arrow-wrapper} {
-            transform: translateY(2px);
-            padding-right: 4px;
-        }
-
-        #{$mat-form-field-infix} {
-            border-top: 0.85em solid transparent;
-            padding-bottom: 6px;
-            padding-top: 20px;
-        }
-
-        #{$mat-floating-label} {
-            padding-top: 8px;
-        }
-    }
-
-    .adf-content-node-selector-content-input-icon {
-        font-size: 21px;
-        padding: 18px 0 0;
-        margin-right: -4px;
     }
 
     .adf-dropdown-breadcrumb-icon {
@@ -81,9 +60,6 @@ adf-content-node-selector {
     }
 
     .adf-content-node-selector-dialog-title {
-        padding-bottom: 4px;
-        padding-left: 0;
-        padding-right: 0;
         font-size: var(--theme-title-font-size);
         font-weight: 600;
         font-style: normal;
diff --git a/lib/content-services/src/lib/content-node-selector/site-dropdown/sites-dropdown.component.html b/lib/content-services/src/lib/content-node-selector/site-dropdown/sites-dropdown.component.html
index dde05749f61..a2b9c41dbd5 100644
--- a/lib/content-services/src/lib/content-node-selector/site-dropdown/sites-dropdown.component.html
+++ b/lib/content-services/src/lib/content-node-selector/site-dropdown/sites-dropdown.component.html
@@ -1,5 +1,5 @@
 <div id="site-dropdown-container" class="adf-site-dropdown-container">
-    <mat-form-field class="adf-sites-dropdown-form-field" subscriptSizing="dynamic">
+    <mat-form-field class="adf-sites-dropdown-form-field" appearance="outline" subscriptSizing="dynamic">
         <mat-label>{{ 'NODE_SELECTOR.LOCATION' | translate }}</mat-label>
         <mat-select
             adf-infinite-select-scroll
diff --git a/lib/core/src/lib/styles/_mat-selectors.scss b/lib/core/src/lib/styles/_mat-selectors.scss
index 2c7c01cd5d6..689caf08dac 100644
--- a/lib/core/src/lib/styles/_mat-selectors.scss
+++ b/lib/core/src/lib/styles/_mat-selectors.scss
@@ -111,4 +111,5 @@ $mat-floating-label--required: '.mdc-floating-label--required';
 $mat-evolution-chip: '.mdc-evolution-chip';
 $mat-standard-chip: '.mat-mdc-standard-chip';
 $mat-evolution-chip-action: '.mdc-evolution-chip__action';
-$mat-evolution-chip-text-label: '.mdc-evolution-chip__text-label'
+$mat-evolution-chip-text-label: '.mdc-evolution-chip__text-label';
+$cdk-overlay-pane: '.cdk-overlay-pane';