Task/harmonize unit styling in value component (#6832)

* Harmonize unit styling

* Update changelog

CHANGELOG.md

@@ -13,6 +13,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Changed
 
+- Harmonized the unit styling in the value component
 - Upgraded `stripe` from version `20.4.1` to `21.0.1`
 
 ## 3.1.0 - 2026-04-29

libs/ui/src/lib/value/value.component.html

@@ -38,45 +38,23 @@
             <div class="mr-1 text-danger">-</div>
           }
         }
-        @if (isPercent) {
+        <div
-          <div
+          class="mb-0 value"
-            class="mb-0 value"
+          [ngClass]="{
-            [ngClass]="{
+            'font-weight-bold h2': size === 'large',
-              'font-weight-bold h2': size === 'large',
+            h4: size === 'medium'
-              h4: size === 'medium'
+          }"
-            }"
+        >
-          >
+          @if (value === null) {
-            @if (value === null) {
+            <span class="text-monospace text-muted">*****</span>
-              <span class="text-monospace text-muted">*****</span>%
-            } @else {
-              {{ formattedValue }}%
-            }
-          </div>
-        } @else {
-          <div
-            class="mb-0 value"
-            [ngClass]="{
-              'font-weight-bold h2': size === 'large',
-              h4: size === 'medium'
-            }"
-          >
-            @if (value === null) {
-              <span class="text-monospace text-muted">*****</span>
-            } @else {
-              {{ formattedValue }}
-            }
-          </div>
-        }
-        @if (unit) {
-          @if (size === 'medium') {
-            <small class="ml-1">
-              {{ unit }}
-            </small>
           } @else {
-            <div class="ml-1">
+            {{ formattedValue }}
-              {{ unit }}
-            </div>
           }
+        </div>
+        @if (isPercent || unit) {
+          <div class="ml-1">
+            {{ isPercent ? '%' : unit }}
+          </div>
         }
       }
       @if (isString) {