feat: 3553 new UI comparing pages

* feat: 3553 Remove duplicate comparison headers and apply card styling
* feat: Apply card styling to document comparison for all embedding contexts
* feat: Implement shared compare shell and apply design
* feat: Align multi-policy with two-policy design while preserving wide scroll
* feat: redesign schema comparison page to match policy UI pattern
* feat: redesign module comparison page to match policy UI pattern
* feat: redesign document comparison page to match multi-policy UI pattern
* feat: redesign tool comparison page to match multi-policy UI pattern
* feat: redesign embedded record comparison with static description card and projected controls
* fix: align comparison page header spacing to 42px top padding
* feat: sync document dropdown with tree open/close events
* fix: headers in multy policy, tools, documents pages

Author: ihar-tsykala

frontend/src/app/modules/analytics/compare-document/compare-document.component.html

@@ -1,54 +1,29 @@
 <div class="content" [style.min-width.px]="minWidth">
-  @if (headers.length && type==='tree') {
-    <div class="item-headers" [style.grid-template-columns]="_gridStyle">
-      @for (item of headers; track item) {
-        <div [style.grid-column-start]="item.column" class="item-header">
-          <span class="item-header-name">
-            {{ item.name }}
-          </span>
-          <span class="item-header-rate item-header-color-{{item.color}}">
-            {{ item.rate }}
-          </span>
-        </div>
-      }
-    </div>
-  }
-
   @if (resultContext) {
     <div class="list">
+      @if (!disableHeader) {
+        <section class="document-description-section">
+          <div class="document-description-title">Description</div>
+          <div class="document-description-card"
+            [style.grid-template-columns]="'repeat(' + size + ', minmax(0, 1fr))'">
+            @for (context of resultContext; track context) {
+              <div class="document-description-column">
+                <ng-container *ngTemplateOutlet="resultInfo; context: context"></ng-container>
+              </div>
+            }
+          </div>
+        </section>
+      }
+
+      <ng-content select="[policyControls]"></ng-content>
+
       <p-accordion
         class="compare-document-accordion"
         [multiple]="true"
-        [value]="['description', 'documents']"
+        [value]="['documents']"
         expandIcon="pi pi-chevron-down icon-start"
         collapseIcon="pi pi-chevron-up icon-start"
         >
-        @if (!disableHeader) {
-          <p-accordion-panel value="description">
-            <p-accordion-header>Description</p-accordion-header>
-            <p-accordion-content>
-              <div class="info-container" [style.grid-template-columns]="_gridStyle">
-                @for (context of resultContext; track context) {
-                  @if (context.right) {
-                    <div [style.grid-column-start]="2 * context.index"
-                      class="middle-compare-result compare-result"
-                      [attr.open]="true">
-                    </div>
-                  }
-                  <div [style.grid-column-start]="2 * context.index + 1"
-                    [attr.open]="true"
-                             [ngClass]="{
-                             'left-compare-result': context.left,
-                             'right-compare-result': context.right,
-                             'compare-result': true
-                         }">
-                    <ng-container *ngTemplateOutlet="resultInfo; context: context"></ng-container>
-                  </div>
-                }
-              </div>
-            </p-accordion-content>
-          </p-accordion-panel>
-        }
         @if (treeContext) {
           <p-accordion-panel value="documents">
             <p-accordion-header>{{ comparationLabels.documentsLabel }}</p-accordion-header>

frontend/src/app/modules/analytics/compare-document/compare-document.component.scss

@@ -15,59 +15,41 @@
     font-size: 20px;
 }
 
-.item-headers {
-    display: grid;
+/* Multi-document is wide and scrolls horizontally. Keep the projected
+   Type/Export actions pinned to the right edge of the scroll viewport. */
+:host ::ng-deep .compare-page-actions {
     position: sticky;
-    z-index: 4;
-    left: 0;
-    top: 0;
-    padding-left: 53px;
-    padding-right: 33px;
-    height: 22px;
-    background: var(--guardian-background, #fff);
-    opacity: 0.95;
-    border-bottom: 1px solid var(--guardian-border-color, #eee);
-    overflow: hidden;
-
-    .item-header {
-        border-left: 1px solid var(--guardian-border-color, #bbb);
-        border-right: 1px solid var(--guardian-border-color, #bbb);
-        font-size: 12px;
-        color: var(--guardian-font-color, #444);
-        padding-left: 12px;
-        padding-right: 100px;
-        overflow: hidden;
-        position: relative;
-        margin-right: -2px;
-    }
-
-    .item-header-rate {
-        top: 0;
-        right: 16px;
-        position: absolute;
-        font-weight: 500;
-        text-align: end;
-    }
+    right: -28px;
+    width: max-content;
+    margin-left: auto;
+    z-index: 5;
+}
 
-    .item-header-color-green {
-        color: var(--guardian-success-color, #008d0c);
-    }
+.document-description-section {
+    margin-bottom: 8px;
+}
 
-    .item-header-color-yellow {
-        color: var(--guardian-warning-color, #c79604);
-    }
+.document-description-title {
+    color: var(--guardian-header-color, #000);
+    font-size: 16px;
+    font-weight: 600;
+    line-height: 24px;
+    margin-bottom: 12px;
+}
 
-    .item-header-color-red {
-        color: var(--guardian-failure-color, #e70000);
-    }
+.document-description-card {
+    display: grid;
+    gap: 64px;
+    background: var(--guardian-background, #fff);
+    border: 1px solid var(--guardian-border-color, #e1e7ef);
+    border-radius: 8px;
+    box-shadow: 0 4px 12px rgb(0 0 0 / 6%);
+    padding: 24px 28px;
+    box-sizing: border-box;
+}
 
-    .item-header-name {
-        text-overflow: ellipsis;
-        overflow: hidden;
-        white-space: nowrap;
-        width: 100%;
-        display: block;
-    }
+.document-description-column {
+    min-width: 0;
 }
 
 .compare-btn {
@@ -196,16 +178,27 @@
 
 
 .result-info {
-    padding-left: 5px;
+    padding: 0;
 
     .result-info-field {
         display: grid;
-        grid-template-columns: 100px 50%;
+        grid-template-columns: 100px minmax(0, 1fr);
+        gap: 12px;
+        min-height: 24px;
+        align-items: center;
     }
 
     .result-info-field-name {
-        font-weight: bold;
-        color: var(--guardian-grid-color, #686868);
+        font-size: 12px;
+        font-weight: 600;
+        color: var(--guardian-font-color, #172033);
+    }
+
+    .result-info-field-value {
+        min-width: 0;
+        color: var(--guardian-font-color, #172033);
+        font-size: 12px;
+        overflow-wrap: anywhere;
     }
 }
 
@@ -901,33 +894,88 @@
 }
 
 :host ::ng-deep .compare-document-accordion {
+    background: transparent;
+
     .p-accordionpanel {
-        border-bottom: 1px solid var(--guardian-border-color, #d6dbe3);
+        margin-bottom: 8px;
+        border: 0;
+        border-radius: 8px;
+        background: var(--guardian-background, #fff);
+        box-shadow: 0 4px 12px rgb(0 0 0 / 6%);
+        /* clip (not hidden) so it is not a scroll container — lets the sticky
+           chevron pin to the viewport while the wide tree scrolls. */
+        overflow: clip;
+    }
+
+    .p-accordioncontent {
+        border: 0;
+        background: var(--guardian-background, #fff);
+        display: block;
+        width: 100%;
+        max-width: 100%;
+    }
+
+    p-motion,
+    .p-accordioncontent-wrapper {
+        display: block;
+        width: 100%;
+        max-width: 100%;
+        box-sizing: border-box;
     }
 
     .p-accordionheader {
-        gap: 8px;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: 16px;
         width: 100%;
-        min-height: 48px;
-        padding: 0 10px;
+        box-sizing: border-box;
+        min-height: 50px;
+        padding: 0 20px;
         background: var(--guardian-background, #fff);
         border: 0;
         color: var(--guardian-font-color, #172033);
+        font-size: 14px;
         font-weight: 600;
+        line-height: 20px;
         text-align: left;
         box-shadow: none;
+        /* keep the sticky toggle chevron bound to the real horizontal scroller */
+        overflow: visible;
+    }
+
+    .p-accordionheader > :not(.p-accordionheader-toggle-icon) {
+        order: 1;
+        flex: 1 1 auto;
+        min-width: 0;
     }
 
     .p-accordionheader-toggle-icon {
-        flex: 0 0 auto;
-        width: 14px;
-        height: 14px;
-        margin: 0;
+        order: 2;
+        display: inline-flex !important;
+        align-items: center;
+        justify-content: center;
+        flex: 0 0 16px;
+        width: 16px;
+        height: 16px;
+        margin-left: 0;
+        color: var(--guardian-grid-color, #848fa9);
+        font-size: 12px;
+        line-height: 1;
+        opacity: 1;
+        visibility: visible;
+        position: sticky;
+        right: -28px;
+        z-index: 3;
     }
 
     .p-accordioncontent-content {
         padding: 0;
         background: var(--guardian-background, #fff);
         border: 0;
+        width: 100%;
+        max-width: 100%;
+        overflow-x: auto;
+        overflow-y: hidden;
     }
 }