Feature/improve alignment of region percentages (#2203)

* Improve alignment

* Update changelog

CHANGELOG.md

@@ -14,6 +14,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Changed
 
+- Improved the alignment of the region percentages on the allocations page
+- Improved the alignment of the region percentages on the public page
 - Improved the redirection of the home page to the localized home page
 - Improved the language localization for German (`de`)
 - Upgraded `angular` from version `15.2.5` to `16.1.8`

apps/client/src/app/pages/portfolio/allocations/allocations-page.html

@@ -215,7 +215,7 @@
             ></gf-world-map-chart>
           </div>
           <div class="row">
-            <div class="col-xs-12 col-md-3 my-2">
+            <div class="col-xs-12 col-md my-2">
               <gf-value
                 i18n
                 size="large"
@@ -224,7 +224,7 @@
                 >Developed Markets</gf-value
               >
             </div>
-            <div class="col-xs-12 col-md-3 my-2">
+            <div class="col-xs-12 col-md my-2">
               <gf-value
                 i18n
                 size="large"
@@ -233,7 +233,7 @@
                 >Emerging Markets</gf-value
               >
             </div>
-            <div class="col-xs-12 col-md-3 my-2">
+            <div class="col-xs-12 col-md my-2">
               <gf-value
                 i18n
                 size="large"
@@ -242,7 +242,10 @@
                 >Other Markets</gf-value
               >
             </div>
-            <div class="col-xs-12 col-md-3 my-2">
+            <div
+              *ngIf="markets?.[UNKNOWN_KEY]?.value > 0"
+              class="col-xs-12 col-md my-2"
+            >
               <gf-value
                 i18n
                 size="large"

apps/client/src/app/pages/public/public-page.html

@@ -84,7 +84,7 @@
             ></gf-world-map-chart>
           </div>
           <div class="row">
-            <div class="col-xs-12 col-md-3 my-2">
+            <div class="col-xs-12 col-md my-2">
               <gf-value
                 i18n
                 size="large"
@@ -93,7 +93,7 @@
                 >Developed Markets</gf-value
               >
             </div>
-            <div class="col-xs-12 col-md-3 my-2">
+            <div class="col-xs-12 col-md my-2">
               <gf-value
                 i18n
                 size="large"
@@ -102,7 +102,7 @@
                 >Emerging Markets</gf-value
               >
             </div>
-            <div class="col-xs-12 col-md-3 my-2">
+            <div class="col-xs-12 col-md my-2">
               <gf-value
                 i18n
                 size="large"
@@ -111,7 +111,10 @@
                 >Other Markets</gf-value
               >
             </div>
-            <div class="col-xs-12 col-md-3 my-2">
+            <div
+              *ngIf="markets?.[UNKNOWN_KEY]?.value > 0"
+              class="col-xs-12 col-md my-2"
+            >
               <gf-value
                 i18n
                 size="large"