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,21 +38,6 @@
             <div class="mr-1 text-danger">-</div>
           }
         }
-        @if (isPercent) {
-          <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>
-        } @else {
         <div
           class="mb-0 value"
           [ngClass]="{
@@ -66,19 +51,12 @@
             {{ formattedValue }}
           }
         </div>
-        }
+        @if (isPercent || unit) {
-        @if (unit) {
-          @if (size === 'medium') {
-            <small class="ml-1">
-              {{ unit }}
-            </small>
-          } @else {
           <div class="ml-1">
-              {{ unit }}
+            {{ isPercent ? '%' : unit }}
           </div>
         }
       }
-      }
       @if (isString) {
         <div
           class="mb-0 text-truncate value"