Improve alignment

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

@@ -1,15 +1,17 @@
 <div class="container p-0">
   <div class="no-gutters row">
-    @if (errors?.length > 0 && !isLoading) {
-      <div
-        class="flex-grow-1 status text-muted text-right"
-        i18n-title
-        title="Oops! Our data provider partner is experiencing the hiccups."
-        (click)="onShowErrors()"
-      >
-        <ion-icon name="time-outline" />
-      </div>
-    }
+    <div
+      class="status-container text-muted text-right"
+      (click)="onShowErrors()"
+    >
+      @if (errors?.length > 0 && !isLoading) {
+        <ion-icon
+          i18n-title
+          name="time-outline"
+          title="Oops! Our data provider partner is experiencing the hiccups."
+        />
+      }
+    </div>
     <div *ngIf="isLoading" class="align-items-center d-flex">
       <ngx-skeleton-loader
         animation="pulse"
@@ -30,7 +32,7 @@
     >
       <span #value id="value"></span>
     </div>
-    <div class="flex-grow-1 px-1">
+    <div class="currency-container flex-grow-1 px-1">
       {{ unit }}
     </div>
   </div>

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

@@ -1,8 +1,18 @@
 :host {
   display: block;
 
-  .status {
+  .currency-container,
+  .status-container {
+    flex: 1;
+    min-width: 2.5rem;
+  }
+
+  .status-container {
     font-size: 1.33rem;
+
+    ion-icon {
+      pointer-events: all;
+    }
   }
 
   .value-container {