Improve usability by collapsing breakdowns

apps/client/src/app/components/portfolio-summary/portfolio-summary.component.html

@@ -170,7 +170,9 @@
       (click)="onToggleHoldings()"
     >
       @if (hasHoldingsBreakdown) {
-        <span class="caret-container">
+        <span
+          class="align-items-center caret-container d-inline-flex justify-content-center ml-n3"
+        >
           <ion-icon
             class="caret text-muted"
             name="caret-forward-outline"
@@ -242,7 +244,9 @@
       (click)="onToggleCash()"
     >
       @if (hasCashBreakdown) {
-        <span class="caret-container">
+        <span
+          class="align-items-center caret-container d-inline-flex justify-content-center ml-n3"
+        >
           <ion-icon
             class="caret text-muted"
             name="caret-forward-outline"

apps/client/src/app/components/portfolio-summary/portfolio-summary.component.scss

@@ -2,10 +2,6 @@
   display: block;
 
   .caret-container {
-    align-items: center;
-    display: inline-flex;
-    justify-content: center;
-    margin-left: -1rem;
     width: 1rem;
 
     .caret {

apps/client/src/app/components/portfolio-summary/portfolio-summary.component.ts

@@ -85,11 +85,11 @@ export class GfPortfolioSummaryComponent implements OnChanges {
   }
 
   protected get hasCashBreakdown() {
-    return this.isLoading || this.summary?.emergencyFund?.cash > 0;
+    return !this.isLoading && this.summary?.emergencyFund?.cash > 0;
   }
 
   protected get hasHoldingsBreakdown() {
-    return this.isLoading || this.summary?.emergencyFund?.assets > 0;
+    return !this.isLoading && this.summary?.emergencyFund?.assets > 0;
   }
 
   protected get holdingsInBaseCurrency() {