From 2ae3d7904c31a2ebe591fbe1236c2cbac5979886 Mon Sep 17 00:00:00 2001
From: Mohamed amaan <121436543+modamaan@users.noreply.github.com>
Date: Sun, 22 Dec 2024 14:21:02 +0530
Subject: [PATCH]  FIXED: Warranty Card UI Improve Responsiveness and Text
 Overflow Handling (#9491)

---
 src/components/Assets/AssetWarrantyCard.tsx | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/components/Assets/AssetWarrantyCard.tsx b/src/components/Assets/AssetWarrantyCard.tsx
index ebaaca7e6c8..9f37394957a 100644
--- a/src/components/Assets/AssetWarrantyCard.tsx
+++ b/src/components/Assets/AssetWarrantyCard.tsx
@@ -31,7 +31,7 @@ export default function AssetWarrantyCard(props: { asset: AssetData }) {
   }, [isCopied]);
 
   return (
-    <div className="warranty-card relative z-10 flex h-full w-screen flex-col overflow-hidden p-6 text-white transition-all hover:scale-[1.01] hover:from-primary-600 hover:to-primary-700 md:w-full md:rounded-xl xl:w-96">
+    <div className="warranty-card relative z-10 flex h-full w-full flex-col overflow-hidden p-6 text-white transition-all hover:scale-[1.01] hover:from-primary-600 hover:to-primary-700 rounded-xl xl:w-96">
       <div className="mb-3 text-right text-lg font-bold italic">
         {asset.manufacturer}
       </div>
@@ -78,7 +78,10 @@ export default function AssetWarrantyCard(props: { asset: AssetData }) {
               ["Phone", asset.support_phone, "l-phone"],
               ["Email", asset.support_email, "l-envelope"],
             ].map((item) => (
-              <div className="flex items-center">
+              <div
+                key={`support-${item[0]}`}
+                className="flex flex-wrap items-center"
+              >
                 {item[1] && (
                   <>
                     <div className="w-16 italic text-secondary-200">