fix spacing for nft pay issue

jbx-protocol · Nov 22, 2024 · dd640cc · dd640cc
1 parent ff318cb
commit dd640cc
Showing 1 changed file with 8 additions and 6 deletions.
diff --git a/...s/v2v3/components/V2V3Project/ProjectDashboard/components/PayRedeemCard/PayRedeemCard.tsx b/...s/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>