From ef642edf4cbd9d81e93039402445166e514e982e Mon Sep 17 00:00:00 2001
From: JoryHogeveen <jory.johan.hogeveen@gmail.com>
Date: Mon, 18 Nov 2024 12:42:31 +0100
Subject: [PATCH] Fix border width and codestyle (order)

---
 .../top-holdings/top-holdings.component.html  |  2 +-
 .../top-holdings/top-holdings.component.scss  | 12 +++++++----
 .../top-holdings/top-holdings.component.ts    | 20 +++++++++----------
 3 files changed, 19 insertions(+), 15 deletions(-)

diff --git a/libs/ui/src/lib/top-holdings/top-holdings.component.html b/libs/ui/src/lib/top-holdings/top-holdings.component.html
index da0784bd5..3b12d02e4 100644
--- a/libs/ui/src/lib/top-holdings/top-holdings.component.html
+++ b/libs/ui/src/lib/top-holdings/top-holdings.component.html
@@ -101,7 +101,7 @@
     <tr
       *matRowDef="let element; columns: displayedColumns"
       mat-row
-      [class.example-expanded-row]="element.expand ?? false"
+      [class.expanded]="element.expand ?? false"
       (click)="
         element.expand ? (element.expand = false) : (element.expand = true)
       "
diff --git a/libs/ui/src/lib/top-holdings/top-holdings.component.scss b/libs/ui/src/lib/top-holdings/top-holdings.component.scss
index 3244277ab..7604aaa63 100644
--- a/libs/ui/src/lib/top-holdings/top-holdings.component.scss
+++ b/libs/ui/src/lib/top-holdings/top-holdings.component.scss
@@ -1,10 +1,6 @@
 :host {
   display: block;
 
-  tr.holding-detail {
-    height: 0;
-  }
-
   .gf-table {
     th {
       ::ng-deep {
@@ -14,4 +10,12 @@
       }
     }
   }
+
+  tr.holding-detail {
+    height: 0;
+  }
+
+  tr:not(.expanded) + tr.holding-detail td {
+    border-bottom: 0;
+  }
 }
diff --git a/libs/ui/src/lib/top-holdings/top-holdings.component.ts b/libs/ui/src/lib/top-holdings/top-holdings.component.ts
index 94bc92d89..67178e480 100644
--- a/libs/ui/src/lib/top-holdings/top-holdings.component.ts
+++ b/libs/ui/src/lib/top-holdings/top-holdings.component.ts
@@ -29,6 +29,16 @@ import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
 import { Subject } from 'rxjs';
 
 @Component({
+  animations: [
+    trigger('detailExpand', [
+      state('collapsed,void', style({ height: '0px', minHeight: '0' })),
+      state('expanded', style({ height: '*' })),
+      transition(
+        'expanded <=> collapsed',
+        animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')
+      )
+    ])
+  ],
   changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [
     CommonModule,
@@ -40,16 +50,6 @@ import { Subject } from 'rxjs';
     MatListModule,
     NgxSkeletonLoaderModule
   ],
-  animations: [
-    trigger('detailExpand', [
-      state('collapsed,void', style({ height: '0px', minHeight: '0' })),
-      state('expanded', style({ height: '*' })),
-      transition(
-        'expanded <=> collapsed',
-        animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')
-      )
-    ])
-  ],
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
   selector: 'gf-top-holdings',
   standalone: true,