From 6dc2f5f282c938754529019ce681a1f78b0bd1c2 Mon Sep 17 00:00:00 2001
From: Alissa Crane <alissacranespam@gmail.com>
Date: Thu, 29 Aug 2024 12:06:58 -0700
Subject: [PATCH] chore: Adjust style so Swap component doesn't shift (#1184)

Co-authored-by: Alissa Crane <alissa.crane@coinbase.com>
---
 .changeset/tame-islands-unite.md        | 5 +++++
 src/swap/components/SwapAmountInput.tsx | 2 +-
 src/swap/components/SwapMessage.tsx     | 2 +-
 3 files changed, 7 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/tame-islands-unite.md

diff --git a/.changeset/tame-islands-unite.md b/.changeset/tame-islands-unite.md
new file mode 100644
index 0000000000..e2233c62ab
--- /dev/null
+++ 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
index 99f9609ba3..3137cd1fe3 100644
--- 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
index 63257a4a58..c6ca3ac4a5 100644
--- 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}