chore: Adjust style so Swap component doesn't shift (#1184)

Co-authored-by: Alissa Crane <[email protected]>
coinbase · Aug 29, 2024 · 6dc2f5f · 6dc2f5f
1 parent ef6e936
commit 6dc2f5f
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 2 deletions.
diff --git a/.changeset/tame-islands-unite.md b/.changeset/tame-islands-unite.md
@@ -0,0 +1,5 @@
+---
+"@coinbase/onchainkit": patch
+---
+
+- **patch**: Adjust Swap component style to prevent UI shifting. By @abcrane123 #1184
diff --git a/src/swap/components/SwapAmountInput.tsx b/src/swap/components/SwapAmountInput.tsx
@@ -69,7 +69,7 @@ export function SwapAmountInput({
       className={cn(
         background.alternate,
         'box-border flex w-full flex-col items-start',
-        'rounded-md p-4',
+        'h-[148px] rounded-md p-4',
         className,
       )}
       data-testid="ockSwapAmountInput_Container"

diff --git a/src/swap/components/SwapMessage.tsx b/src/swap/components/SwapMessage.tsx
@@ -31,7 +31,7 @@ export function SwapMessage({ className }: SwapMessageReact) {
 
   return (
     <div
-      className={cn('flex pt-2', text.label2, className)}
+      className={cn('flex h-7 pt-2', text.label2, className)}
       data-testid="ockSwapMessage_Message"
     >
       {message}