Fix border width and codestyle (order)

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)
       "

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;
+  }
 }

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,