From 7a1ac5b90792d9174a107897e5e856ad4dc9893f Mon Sep 17 00:00:00 2001
From: pjanik <janikpiotrek@gmail.com>
Date: Tue, 20 Aug 2024 20:23:52 +0200
Subject: [PATCH] fix: fix solar intensity value rendering [PT-188059216]

---
 src/grasp-seasons/components/seasons.scss | 10 ++++++++++
 src/grasp-seasons/components/seasons.tsx  |  5 ++++-
 2 files changed, 14 insertions(+), 1 deletion(-)

diff --git a/src/grasp-seasons/components/seasons.scss b/src/grasp-seasons/components/seasons.scss
index bafe652..d2374d6 100644
--- a/src/grasp-seasons/components/seasons.scss
+++ b/src/grasp-seasons/components/seasons.scss
@@ -107,6 +107,16 @@ body {
   .solar-intensity {
     margin-top: 10px;
     margin-bottom: 30px;
+
+    .solar-intensity-value-and-unit {
+      display: inline-block;
+
+      .solar-intensity-value {
+        display: inline-block;
+        width: 46px;
+        white-space: nowrap;
+      }
+    }
   }
 
   select {
diff --git a/src/grasp-seasons/components/seasons.tsx b/src/grasp-seasons/components/seasons.tsx
index 19960d2..92fa529 100644
--- a/src/grasp-seasons/components/seasons.tsx
+++ b/src/grasp-seasons/components/seasons.tsx
@@ -332,7 +332,10 @@ const Seasons: React.FC<IProps> = ({ lang = "en_us", initialState = {}, log = (a
         <div className="sunlight-at-noon">{ t("~SUNLIGHT_AT_NOON", simLang) }</div>
         <div className="solar-intensity">
           <label>{ t("~SOLAR_INTENSITY", simLang) }: </label>
-          { solarIntensityValue } { t("~SOLAR_INTENSITY_UNIT", simLang) }
+          <div className="solar-intensity-value-and-unit">
+            <div className="solar-intensity-value">{ solarIntensityValue }</div>
+            { t("~SOLAR_INTENSITY_UNIT", simLang) }
+          </div>
         </div>
         <MyLocations
           lat={simState.lat}