fix(NumericSideIndicator): fix alignment (#6064)

Author: Lukas742

packages/main/src/components/NumericSideIndicator/NumericSideIndicator.module.css

@@ -1,4 +1,7 @@
 .numericSideIndicator {
+  font-family: var(--sapFontFamily);
+  font-size: var(--sapFontSmallSize);
+  color: var(--sapTile_TextColor);
   display: flex;
   flex-direction: column;
   align-items: flex-end;
@@ -7,61 +10,33 @@
 }
 
 .title {
-  font-family: var(--sapFontFamily);
-  font-size: var(--sapFontSmallSize);
-  color: var(--sapTile_TextColor);
   text-align: end;
   text-overflow: ellipsis;
   overflow: hidden;
   padding-bottom: 0.25rem;
   max-width: 100%;
 }
 
-.valueContainer {
-  position: relative;
-}
-
-.number,
-.unit {
-  font-size: var(--sapFontSmallSize);
-  color: var(--sapTile_TitleTextColor);
+.value {
+  font-size: inherit;
+  color: inherit;
   white-space: pre-line;
   word-wrap: break-word;
   word-break: break-word;
 }
 
 .stateGood {
   color: var(--sapPositiveTextColor);
-
-  .number,
-  .unit {
-    color: var(--sapPositiveTextColor);
-  }
 }
 
 .stateError {
   color: var(--sapNegativeTextColor);
-
-  .number,
-  .unit {
-    color: var(--sapNegativeTextColor);
-  }
 }
 
 .stateCritical {
   color: var(--sapCriticalTextColor);
-
-  .number,
-  .unit {
-    color: var(--sapCriticalTextColor);
-  }
 }
 
 .stateNeutral {
   color: var(--sapNeutralTextColor);
-
-  .number,
-  .unit {
-    color: var(--sapNeutralTextColor);
-  }
 }

packages/main/src/components/NumericSideIndicator/index.tsx

@@ -40,10 +40,10 @@ export const NumericSideIndicator = forwardRef<HTMLDivElement, NumericSideIndica
   return (
     <div ref={ref} className={clsx(classNames.numericSideIndicator, className)} {...rest}>
       <span className={classNames.title}>{titleText}</span>
-      <div className={clsx(classNames.valueContainer, Reflect.get(classNames, `state${state}`))}>
-        <Text className={classNames.number}>{number}</Text>
-        <Text className={classNames.unit}>{unit}</Text>
-      </div>
+      <Text className={clsx(classNames.value, classNames[`state${state}`])}>
+        {number}
+        {unit}
+      </Text>
     </div>
   );
 });