From 3e075aaabdda315847f73910bc9a05265542693f Mon Sep 17 00:00:00 2001
From: Michael Bromley <michael@michaelbromley.co.uk>
Date: Wed, 12 Jun 2024 14:08:01 +0200
Subject: [PATCH] fix(admin-ui): Fix layout of custom timeline entries

---
 .../timeline-entry.component.html             |  1 +
 .../timeline-entry.component.scss             | 26 +++++++++----------
 .../timeline-entry.component.ts               |  1 +
 .../customer-history.component.html           | 23 +++++++++-------
 .../order-history.component.html              |  2 +-
 5 files changed, 30 insertions(+), 23 deletions(-)

diff --git a/packages/admin-ui/src/lib/core/src/shared/components/timeline-entry/timeline-entry.component.html b/packages/admin-ui/src/lib/core/src/shared/components/timeline-entry/timeline-entry.component.html
index e8da415c6b..c5192c3600 100644
--- a/packages/admin-ui/src/lib/core/src/shared/components/timeline-entry/timeline-entry.component.html
+++ b/packages/admin-ui/src/lib/core/src/shared/components/timeline-entry/timeline-entry.component.html
@@ -3,6 +3,7 @@
     [class.has-custom-icon]="!!iconShape"
     class="entry"
     [class.last]="isLast === true"
+    [class.first]="isFirst === true"
     [class.collapsed]="collapsed"
 >
     <div class="timeline" (click)="expandClick.emit()" [title]="timelineTitle | translate">
diff --git a/packages/admin-ui/src/lib/core/src/shared/components/timeline-entry/timeline-entry.component.scss b/packages/admin-ui/src/lib/core/src/shared/components/timeline-entry/timeline-entry.component.scss
index a0901669c5..66ba7d4b17 100644
--- a/packages/admin-ui/src/lib/core/src/shared/components/timeline-entry/timeline-entry.component.scss
+++ b/packages/admin-ui/src/lib/core/src/shared/components/timeline-entry/timeline-entry.component.scss
@@ -2,24 +2,24 @@
 
 :host {
     display: block;
+}
 
-    &:first-of-type {
-        .timeline {
-            &:before {
-                border-left-color: var(--color-weight-200);
-            }
+.first {
+    .timeline {
+        &:before {
+            border-left-color: var(--color-weight-200);
         }
+    }
 
-        .entry-body {
-            max-height: initial;
-            @media screen and (min-width: $breakpoint-small) {
-                flex-direction: column;
-            }
-        }
-        .featured-entry {
-            width: 100%;
+    .entry-body {
+        max-height: initial;
+        @media screen and (min-width: $breakpoint-small) {
+            flex-direction: column;
         }
     }
+    .featured-entry {
+        width: 100%;
+    }
 }
 
 .entry {
diff --git a/packages/admin-ui/src/lib/core/src/shared/components/timeline-entry/timeline-entry.component.ts b/packages/admin-ui/src/lib/core/src/shared/components/timeline-entry/timeline-entry.component.ts
index 1ab92695f9..a946d33b12 100644
--- a/packages/admin-ui/src/lib/core/src/shared/components/timeline-entry/timeline-entry.component.ts
+++ b/packages/admin-ui/src/lib/core/src/shared/components/timeline-entry/timeline-entry.component.ts
@@ -23,6 +23,7 @@ export class TimelineEntryComponent {
     @Input() name: string;
     @Input() featured: boolean;
     @Input() iconShape?: string | [string, string];
+    @Input() isFirst?: boolean;
     @Input() isLast?: boolean;
     @HostBinding('class.collapsed')
     @Input()
diff --git a/packages/admin-ui/src/lib/customer/src/components/customer-history/customer-history.component.html b/packages/admin-ui/src/lib/customer/src/components/customer-history/customer-history.component.html
index c69047d85a..ef216e5935 100644
--- a/packages/admin-ui/src/lib/customer/src/components/customer-history/customer-history.component.html
+++ b/packages/admin-ui/src/lib/customer/src/components/customer-history/customer-history.component.html
@@ -1,5 +1,6 @@
 <div class="entry-list">
-    <vdr-timeline-entry iconShape="note" displayType="muted" [featured]="true" *vdrIfPermissions="'UpdateCustomer'">
+    <vdr-timeline-entry iconShape="note" displayType="muted" [featured]="true" *vdrIfPermissions="'UpdateCustomer'"
+                        [isFirst]="true">
         <div class="note-entry">
             <textarea [(ngModel)]="note" name="note" class="note"></textarea>
             <button class="btn btn-secondary" [disabled]="!note" (click)="addNoteToCustomer()">
@@ -105,11 +106,13 @@
                             {{ 'customer.history-customer-email-update-requested' | translate }}
                             <vdr-history-entry-detail>
                                 <vdr-labeled-data [label]="'customer.old-email-address' | translate">{{
-                                    entry.data.oldEmailAddress
-                                }}</vdr-labeled-data>
+                                        entry.data.oldEmailAddress
+                                    }}
+                                </vdr-labeled-data>
                                 <vdr-labeled-data [label]="'customer.new-email-address' | translate">{{
-                                    entry.data.newEmailAddress
-                                }}</vdr-labeled-data>
+                                        entry.data.newEmailAddress
+                                    }}
+                                </vdr-labeled-data>
                             </vdr-history-entry-detail>
                         </div>
                     </ng-container>
@@ -118,11 +121,13 @@
                             {{ 'customer.history-customer-email-update-verified' | translate }}
                             <vdr-history-entry-detail>
                                 <vdr-labeled-data [label]="'customer.old-email-address' | translate">{{
-                                    entry.data.oldEmailAddress
-                                }}</vdr-labeled-data>
+                                        entry.data.oldEmailAddress
+                                    }}
+                                </vdr-labeled-data>
                                 <vdr-labeled-data [label]="'customer.new-email-address' | translate">{{
-                                    entry.data.newEmailAddress
-                                }}</vdr-labeled-data>
+                                        entry.data.newEmailAddress
+                                    }}
+                                </vdr-labeled-data>
                             </vdr-history-entry-detail>
                         </div>
                     </ng-container>
diff --git a/packages/admin-ui/src/lib/order/src/components/order-history/order-history.component.html b/packages/admin-ui/src/lib/order/src/components/order-history/order-history.component.html
index 6fb2be08eb..542f287d90 100644
--- a/packages/admin-ui/src/lib/order/src/components/order-history/order-history.component.html
+++ b/packages/admin-ui/src/lib/order/src/components/order-history/order-history.component.html
@@ -1,5 +1,5 @@
 <div class="entry-list" [class.expanded]="expanded">
-    <vdr-timeline-entry iconShape="note" displayType="muted" [featured]="true">
+    <vdr-timeline-entry iconShape="note" displayType="muted" [featured]="true" [isFirst]="true">
         <div class="note-entry">
             <textarea [(ngModel)]="note" name="note" class="note"></textarea>
             <button class="btn btn-secondary" [disabled]="!note" (click)="addNoteToOrder()">