fix: input/output value/balance styles (#3207)

* fix: right-align balance

* fix: set min-height on text

src/lib/components/Swap/Input.tsx

@@ -65,7 +65,7 @@ export default function Input({ disabled }: InputProps) {
       >
         <ThemedText.Body2 color="secondary">
           <Row>
-            {inputUSDC ? `$${inputUSDC.toFixed(2)}` : '-'}
+            <span>{inputUSDC ? `$${inputUSDC.toFixed(2)}` : '-'}</span>
             {balance && (
               <ThemedText.Body2 color={inputCurrencyAmount?.greaterThan(balance) ? 'error' : undefined}>
                 Balance: <span style={{ userSelect: 'text' }}>{formatCurrencyAmount(balance, 4)}</span>

src/lib/components/Swap/Output.tsx

@@ -92,7 +92,7 @@ export default function Output({ disabled, children }: OutputProps) {
         >
           <ThemedText.Body2 color="secondary">
             <Row>
-              {usdc}
+              <span>{usdc}</span>
               {balance && (
                 <span>
                   Balance: <span style={{ userSelect: 'text' }}>{formatCurrencyAmount(balance, 4)}</span>

src/lib/theme/type.tsx

@@ -5,8 +5,10 @@ import { Color } from './theme'
 
 type TextProps = Omit<TextPropsWithCss, 'css' | 'color'> & { color?: Color }
 
-const TextWrapper = styled(Text)<{ color?: Color }>`
+const TextWrapper = styled(Text)<{ color?: Color; lineHeight: string }>`
   color: ${({ color = 'currentColor', theme }) => theme[color as Color]};
+  // Avoid the need for placeholders by setting min-height to line-height.
+  min-height: ${({ lineHeight }) => lineHeight};
 `
 
 const TransitionTextWrapper = styled(TextWrapper)`