fix: fix value-suffix spacing layout by combining to one inline-block

duality-labs · May 24, 2024 · 1653376 · 1653376
1 parent 132061b
commit 1653376
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 13 deletions.
diff --git a/src/components/cards/LimitOrderCard.scss b/src/components/cards/LimitOrderCard.scss
@@ -31,9 +31,9 @@
     .numeric-value-row__value {
       color: white;
     }
-    .numeric-value-row__suffix {
+    .numeric-value-row__right {
       width: auto;
-      max-width: 13em; // sized to max "demoUSDC per demoNTRN"
+      max-width: 17em; // sized to max "demoUSDC per demoNTRN"
     }
   }
 

diff --git a/src/components/cards/LimitOrderCard.tsx b/src/components/cards/LimitOrderCard.tsx
@@ -1119,18 +1119,22 @@ function NumericValueRow({
         {prefix}
         {tooltip && <Tooltip>{tooltip}</Tooltip>}
       </div>
-      <div className="numeric-value-row__loading ml-auto">
-        <FontAwesomeIcon
-          className={['fa-spin', !loading && 'invisible']
-            .filter(Boolean)
-            .join(' ')}
-          icon={faSpinner}
-        />
+      <div className="numeric-value-row__right ml-auto text-right">
+        <span className="nowrap">
+          <span className="numeric-value-row__loading">
+            <FontAwesomeIcon
+              className={['fa-spin', !loading && 'invisible']
+                .filter(Boolean)
+                .join(' ')}
+              icon={faSpinner}
+            />
+          </span>
+          <span className="numeric-value-row__value ml-3">{value}</span>
+        </span>
+        {suffix && (
+          <span className="numeric-value-row__suffix ml-3">{suffix}</span>
+        )}
       </div>
-      <div className="numeric-value-row__value">{value}</div>
-      {suffix && (
-        <div className="numeric-value-row__suffix text-right">{suffix}</div>
-      )}
     </div>
   );
 }