From f5943637e59fb40172cc81b44d8c32555bb9360c Mon Sep 17 00:00:00 2001
From: Brianna Cerkiewicz <brianna@button.is>
Date: Mon, 12 Jun 2023 12:54:03 -0700
Subject: [PATCH] chore: spec work on adjustable calculated value widget

---
 ...eadOnlyAdjustableCalculatedValueWidget.tsx | 22 +++++++++----------
 1 file changed, 10 insertions(+), 12 deletions(-)

diff --git a/app/lib/theme/widgets/ReadOnlyAdjustableCalculatedValueWidget.tsx b/app/lib/theme/widgets/ReadOnlyAdjustableCalculatedValueWidget.tsx
index 4cb0422df1..4412fe5e29 100644
--- 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>
+    </>
   );
 };