From dd640cc8c50db8e6b0b1b28cf7c5b8a992518fb0 Mon Sep 17 00:00:00 2001
From: Wraeth <wraeth.dao@gmail.com>
Date: Fri, 22 Nov 2024 17:53:56 +1000
Subject: [PATCH] fix spacing for nft pay issue

---
 .../components/PayRedeemCard/PayRedeemCard.tsx     | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/src/packages/v2v3/components/V2V3Project/ProjectDashboard/components/PayRedeemCard/PayRedeemCard.tsx b/src/packages/v2v3/components/V2V3Project/ProjectDashboard/components/PayRedeemCard/PayRedeemCard.tsx
index 934eab322e..d7fb85b586 100644
--- a/src/packages/v2v3/components/V2V3Project/ProjectDashboard/components/PayRedeemCard/PayRedeemCard.tsx
+++ b/src/packages/v2v3/components/V2V3Project/ProjectDashboard/components/PayRedeemCard/PayRedeemCard.tsx
@@ -838,23 +838,25 @@ const NftReward: React.FC<{
   }, [price])
 
   return (
-    <div className={twMerge('flex items-center justify-between', className)}>
-      <div className="flex items-center gap-3">
+    <div
+      className={twMerge('flex items-center justify-between gap-3', className)}
+    >
+      <div className="flex min-w-0 items-center gap-3">
         <SmallNftSquare
-          className="h-12 w-12"
+          className="h-12 w-12 flex-shrink-0"
           nftReward={{
             fileUrl: fileUrl ?? '',
             name: name ?? '',
           }}
         />
-        <div className="flex flex-col">
+        <div className="flex min-w-0 flex-col">
           <div
-            className="flex items-center gap-2"
+            className="flex min-w-0 items-center gap-2"
             role="button"
             onClick={() => setProjectPageTab('nft_rewards')}
           >
             <TruncatedText
-              className="max-w-[70%] text-sm font-medium text-grey-900 hover:underline dark:text-slate-100"
+              className="min-w-0 max-w-[70%] text-sm font-medium text-grey-900 hover:underline dark:text-slate-100"
               text={name}
             />
             <CartItemBadge>NFT</CartItemBadge>