chore: spec work on adjustable calculated value widget

bcgov · Jun 12, 2023 · f594363 · f594363
1 parent 5561847
commit f594363
Showing 1 changed file with 10 additions and 12 deletions.
diff --git a/app/lib/theme/widgets/ReadOnlyAdjustableCalculatedValueWidget.tsx b/app/lib/theme/widgets/ReadOnlyAdjustableCalculatedValueWidget.tsx
@@ -21,10 +21,11 @@ const ReadOnlyAdjustableCalculatedValueWidget: React.FC<WidgetProps> = (
   const adjustedInputId = `${id}_adjusted`;
 
   return (
-    <div>
+    <>
       {calculatedValue && (
-        <>
-          {
+        <div className={calculatedValue && "calculatedValue"}>
+          <dt>{label}</dt>
+          <dd>
             <NumberFormat
               thousandSeparator
               fixedDecimalScale={numberOfDecimalPlaces}
@@ -35,12 +36,12 @@ const ReadOnlyAdjustableCalculatedValueWidget: React.FC<WidgetProps> = (
               value={calculatedValue}
               displayType="text"
             />
-          }
-        </>
+          </dd>
+        </div>
       )}
       {value !== calculatedValue && (
         <div className={calculatedValue && "adjustedValue"}>
-          {calculatedValue && <dt>{label} (Adjusted)</dt>}
+          <dt>{label} (Adjusted)</dt>
           <dd>
             <NumberFormat
               thousandSeparator
@@ -57,17 +58,14 @@ const ReadOnlyAdjustableCalculatedValueWidget: React.FC<WidgetProps> = (
       )}
       {!value && <em>Not added</em>}
       <style jsx>{`
-        div.adjustedValue {
-          position: relative;
-          display: flex;
-          right: 12.1rem;
-          margin-top: 0.5em;
+        div {
+          display: inline;
         }
         dt {
           margin-right: 1em;
         }
       `}</style>
-    </div>
+    </>
   );
 };