From d720651f786c0729166a82eed3ea3acd13ae8dc9 Mon Sep 17 00:00:00 2001
From: Kenrick Tandrian <60643640+KenTandrian@users.noreply.github.com>
Date: Thu, 14 May 2026 15:39:02 +0700
Subject: [PATCH] Bugfix/resolve styling issues by splitting space-separated
 class bindings (#6848)

* fix(ui): large size not working in value component

* fix(ui): historical market data style not applied
---
 ...istorical-market-data-editor.component.html | 18 ++++++++++--------
 libs/ui/src/lib/value/value.component.html     | 14 ++++++--------
 2 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/libs/ui/src/lib/historical-market-data-editor/historical-market-data-editor.component.html b/libs/ui/src/lib/historical-market-data-editor/historical-market-data-editor.component.html
index 93fd8d97f..065e62de1 100644
--- a/libs/ui/src/lib/historical-market-data-editor/historical-market-data-editor.component.html
+++ b/libs/ui/src/lib/historical-market-data-editor/historical-market-data-editor.component.html
@@ -6,14 +6,16 @@
         @for (day of days; track day) {
           <div
             class="day"
-            [class]="{
-              'cursor-pointer valid': isDateOfInterest(
-                `${itemByMonth.key}-${formatDay(day)}`
-              ),
-              available:
-                marketDataByMonth[itemByMonth.key][formatDay(day)]?.marketPrice,
-              today: isToday(`${itemByMonth.key}-${formatDay(day)}`)
-            }"
+            [class.available]="
+              marketDataByMonth[itemByMonth.key][formatDay(day)]?.marketPrice
+            "
+            [class.cursor-pointer]="
+              isDateOfInterest(`${itemByMonth.key}-${formatDay(day)}`)
+            "
+            [class.today]="isToday(`${itemByMonth.key}-${formatDay(day)}`)"
+            [class.valid]="
+              isDateOfInterest(`${itemByMonth.key}-${formatDay(day)}`)
+            "
             [title]="
               (`${itemByMonth.key}-${formatDay(day)}`
                 | date: defaultDateFormat()) ?? ''
diff --git a/libs/ui/src/lib/value/value.component.html b/libs/ui/src/lib/value/value.component.html
index 57949fbe2..d5476f42d 100644
--- a/libs/ui/src/lib/value/value.component.html
+++ b/libs/ui/src/lib/value/value.component.html
@@ -40,10 +40,9 @@
         }
         <div
           class="mb-0 value"
-          [class]="{
-            'font-weight-bold h2': size === 'large',
-            h4: size === 'medium'
-          }"
+          [class.font-weight-bold]="size === 'large'"
+          [class.h2]="size === 'large'"
+          [class.h4]="size === 'medium'"
         >
           @if (value === null) {
             <span class="text-monospace text-muted">*****</span>
@@ -60,10 +59,9 @@
       @if (isString) {
         <div
           class="mb-0 text-truncate value"
-          [class]="{
-            'font-weight-bold h2': size === 'large',
-            h4: size === 'medium'
-          }"
+          [class.font-weight-bold]="size === 'large'"
+          [class.h2]="size === 'large'"
+          [class.h4]="size === 'medium'"
         >
           {{ formattedValue }}
         </div>