fix: fix solar intensity value rendering [PT-188059216]

concord-consortium · Aug 20, 2024 · 7a1ac5b · 7a1ac5b
1 parent 9117f09
commit 7a1ac5b
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 1 deletion.
diff --git 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
@@ -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}