Feature/improve position detail dialog (#697)

* Improve mobile layout

* Update changelog

CHANGELOG.md

@@ -5,6 +5,12 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## Unreleased
+
+### Changed
+
+- Improved the mobile layout of the position detail dialog (countries and sectors charts)
+
 ## 1.115.0 - 13.02.2022
 
 ### Added

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

@@ -126,14 +126,15 @@
         <gf-value
           label="Asset Class"
           size="medium"
+          [hidden]="!SymbolProfile?.assetClass"
           [value]="SymbolProfile?.assetClass"
         ></gf-value>
       </div>
       <div class="col-6 mb-3">
         <gf-value
-          size="medium"
           label="Asset Sub Class"
-          [locale]="data.locale"
+          size="medium"
+          [hidden]="!SymbolProfile?.assetSubClass"
           [value]="SymbolProfile?.assetSubClass"
         ></gf-value>
       </div>
@@ -164,8 +165,8 @@
           </div>
         </ng-container>
         <ng-template #charts>
-          <div class="col-6 mb-3">
+          <div class="col-md-6 mb-3">
-            <div class="h4 mb-0" i18n>Countries</div>
+            <div class="h4" i18n>Countries</div>
             <gf-portfolio-proportion-chart
               [baseCurrency]="user?.settings?.baseCurrency"
               [isInPercent]="true"
@@ -175,8 +176,8 @@
               [positions]="countries"
             ></gf-portfolio-proportion-chart>
           </div>
-          <div class="col-6 mb-3">
+          <div class="col-md-6 mb-3">
-            <div class="h4 mb-0" i18n>Sectors</div>
+            <div class="h4" i18n>Sectors</div>
             <gf-portfolio-proportion-chart
               [baseCurrency]="user?.settings?.baseCurrency"
               [isInPercent]="true"