Feature/restructure holding detail dialog (#5058)

* Restructure holding detail dialog

* Update changelog

CHANGELOG.md

@@ -13,6 +13,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Changed
 
+- Moved the main content of the holding detail dialog to a new overview tab
 - Introduced fuzzy search for the holdings of the assistant
 - Introduced fuzzy search for the quick links of the assistant
 - Improved the search results of the assistant to only display categories with content

apps/client/src/app/components/holding-detail-dialog/holding-detail-dialog.html

@@ -35,7 +35,18 @@
       [symbol]="data.symbol"
     />
 
-    <div class="row">
+    <mat-tab-group
+      animationDuration="0ms"
+      class="mb-4"
+      [mat-stretch-tabs]="false"
+    >
+      <mat-tab>
+        <ng-template mat-tab-label>
+          <ion-icon name="reader-outline" />
+          <div class="d-none d-sm-block ml-2" i18n>Overview</div>
+        </ng-template>
+        <div class="container mt-3 p-0">
+          <div class="row w-100">
             <div class="col-6 mb-3">
               <gf-value
                 i18n
@@ -146,13 +157,17 @@
                 size="medium"
                 [isCurrency]="true"
                 [locale]="data.locale"
-          [precision]="investmentInBaseCurrencyWithCurrencyEffectPrecision"
+                [precision]="
+                  investmentInBaseCurrencyWithCurrencyEffectPrecision
+                "
                 [unit]="data.baseCurrency"
                 [value]="investmentInBaseCurrencyWithCurrencyEffect"
                 >Investment</gf-value
               >
             </div>
-      @if (dividendInBaseCurrency && user?.settings?.isExperimentalFeatures) {
+            @if (
+              dividendInBaseCurrency && user?.settings?.isExperimentalFeatures
+            ) {
               <div class="col-6 mb-3">
                 <gf-value
                   i18n
@@ -212,7 +227,11 @@
             </div>
             <div class="col-6 mb-3"></div>
             <div class="col-6 mb-3">
-        <gf-value i18n size="medium" [hidden]="!assetClass" [value]="assetClass"
+              <gf-value
+                i18n
+                size="medium"
+                [hidden]="!assetClass"
+                [value]="assetClass"
                 >Asset Class</gf-value
               >
             </div>
@@ -301,18 +320,15 @@
             @if (dataProviderInfo) {
               <div class="col-md-12 mb-3 text-center">
                 <hr />
-          <gf-data-provider-credits [dataProviderInfos]="[dataProviderInfo]" />
+                <gf-data-provider-credits
+                  [dataProviderInfos]="[dataProviderInfo]"
+                />
                 <hr />
               </div>
             }
           </div>
-
-    <mat-tab-group
-      animationDuration="0ms"
-      class="mb-5"
-      [mat-stretch-tabs]="false"
-      [ngClass]="{ 'd-none': !dataSource?.data.length }"
-    >
+        </div>
+      </mat-tab>
       <mat-tab>
         <ng-template mat-tab-label>
           <ion-icon name="swap-vertical-outline" />