From c2a1cbd20ffd4b805f3ce00e719f8948183df66f Mon Sep 17 00:00:00 2001
From: Thomas Kaul <4159106+dtslvr@users.noreply.github.com>
Date: Sat, 30 Apr 2022 10:48:02 +0200
Subject: [PATCH] Feature/improve layout of position detail dialog (#877)

* Improve layout

* Update changelog
---
 CHANGELOG.md                                  |  1 +
 .../position-detail-dialog.html               | 55 ++++++++++---------
 2 files changed, 30 insertions(+), 26 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 4ed0c80a7..3c10402f1 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -13,6 +13,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Changed
 
+- Improved the layout of the position detail dialog
 - Upgraded `yahoo-finance2` from version `2.3.1` to `2.3.2`
 
 ### Fixed
diff --git a/apps/client/src/app/components/position/position-detail-dialog/position-detail-dialog.html b/apps/client/src/app/components/position/position-detail-dialog/position-detail-dialog.html
index a5b946e04..169e47390 100644
--- a/apps/client/src/app/components/position/position-detail-dialog/position-detail-dialog.html
+++ b/apps/client/src/app/components/position/position-detail-dialog/position-detail-dialog.html
@@ -168,7 +168,7 @@
         </ng-container>
         <ng-template #charts>
           <div class="col-md-6 mb-3">
-            <div class="h4" i18n>Sectors</div>
+            <div class="h5" i18n>Sectors</div>
             <gf-portfolio-proportion-chart
               [baseCurrency]="user?.settings?.baseCurrency"
               [isInPercent]="true"
@@ -179,7 +179,7 @@
             ></gf-portfolio-proportion-chart>
           </div>
           <div class="col-md-6 mb-3">
-            <div class="h4" i18n>Countries</div>
+            <div class="h5" i18n>Countries</div>
             <gf-portfolio-proportion-chart
               [baseCurrency]="user?.settings?.baseCurrency"
               [isInPercent]="true"
@@ -192,32 +192,35 @@
         </ng-template>
       </ng-container>
     </div>
-  </div>
 
-  <div class="mb-3">
-    <div class="h4 mb-0" i18n>Activities</div>
-    <gf-activities-table
-      *ngIf="orders?.length > 0"
-      [activities]="orders"
-      [baseCurrency]="data.baseCurrency"
-      [deviceType]="data.deviceType"
-      [hasPermissionToCreateActivity]="false"
-      [hasPermissionToExportActivities]="!hasImpersonationId"
-      [hasPermissionToFilter]="false"
-      [hasPermissionToImportActivities]="false"
-      [hasPermissionToOpenDetails]="false"
-      [locale]="data.locale"
-      [showActions]="false"
-      [showSymbolColumn]="false"
-      (export)="onExport()"
-    ></gf-activities-table>
-  </div>
+    <div *ngIf="orders?.length > 0" class="row">
+      <div class="col mb-3">
+        <div class="h5 mb-0" i18n>Activities</div>
+        <gf-activities-table
+          [activities]="orders"
+          [baseCurrency]="data.baseCurrency"
+          [deviceType]="data.deviceType"
+          [hasPermissionToCreateActivity]="false"
+          [hasPermissionToExportActivities]="!hasImpersonationId"
+          [hasPermissionToFilter]="false"
+          [hasPermissionToImportActivities]="false"
+          [hasPermissionToOpenDetails]="false"
+          [locale]="data.locale"
+          [showActions]="false"
+          [showSymbolColumn]="false"
+          (export)="onExport()"
+        ></gf-activities-table>
+      </div>
+    </div>
 
-  <div *ngIf="tags?.length > 0">
-    <div class="h4" i18n>Tags</div>
-    <mat-chip-list>
-      <mat-chip *ngFor="let tag of tags">{{ tag.name }}</mat-chip>
-    </mat-chip-list>
+    <div *ngIf="tags?.length > 0" class="row">
+      <div class="col">
+        <div class="h5" i18n>Tags</div>
+        <mat-chip-list>
+          <mat-chip *ngFor="let tag of tags">{{ tag.name }}</mat-chip>
+        </mat-chip-list>
+      </div>
+    </div>
   </div>
 </div>