Feature/improve layout of position detail dialog (#877)

* Improve layout

* Update changelog

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

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,12 +192,11 @@
         </ng-template>
       </ng-container>
     </div>
-  </div>
 
-  <div class="mb-3">
+    <div *ngIf="orders?.length > 0" class="row">
-    <div class="h4 mb-0" i18n>Activities</div>
+      <div class="col mb-3">
+        <div class="h5 mb-0" i18n>Activities</div>
         <gf-activities-table
-      *ngIf="orders?.length > 0"
           [activities]="orders"
           [baseCurrency]="data.baseCurrency"
           [deviceType]="data.deviceType"
@@ -212,13 +211,17 @@
           (export)="onExport()"
         ></gf-activities-table>
       </div>
+    </div>
 
-  <div *ngIf="tags?.length > 0">
+    <div *ngIf="tags?.length > 0" class="row">
-    <div class="h4" i18n>Tags</div>
+      <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>
 
 <gf-dialog-footer