From fff9c1667064f176b68530a79f9bb64dcbfec708 Mon Sep 17 00:00:00 2001
From: Thomas Kaul <4159106+dtslvr@users.noreply.github.com>
Date: Sat, 2 May 2026 19:02:06 +0200
Subject: [PATCH] Task/harmonize unit styling in value component (#6832)

* Harmonize unit styling

* Update changelog
---
 CHANGELOG.md                               |  1 +
 libs/ui/src/lib/value/value.component.html | 52 +++++++---------------
 2 files changed, 16 insertions(+), 37 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 460f54d3f..045f92c2c 100644
--- a/CHANGELOG.md
+++ b/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
diff --git a/libs/ui/src/lib/value/value.component.html b/libs/ui/src/lib/value/value.component.html
index c4d6532a7..48e9c02e7 100644
--- a/libs/ui/src/lib/value/value.component.html
+++ b/libs/ui/src/lib/value/value.component.html
@@ -38,45 +38,23 @@
             <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]="{
-              '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>
+        <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 {
-            <div class="ml-1">
-              {{ unit }}
-            </div>
+            {{ formattedValue }}
           }
+        </div>
+        @if (isPercent || unit) {
+          <div class="ml-1">
+            {{ isPercent ? '%' : unit }}
+          </div>
         }
       }
       @if (isString) {