text truncated

src/component/home/Products.jsx

@@ -41,22 +41,27 @@ export default function Products() {
                 </div>
                 :
                 <div className="row m-b-20">
-                    {products && products.map((product, index) => (
-                        <div key={product.uid+index} className={`col-xxs-6 col-xl-4 col-xxl-6 mb-2 mb-xxl-0`}>
-                            <Link to={productPath(product?.product_id)}  >
-                                <div className={`d-flex align-items-center extraProductCard  ${product?.icon_style}`} style={{borderColor:'black', borderWidth: '2px'}} >
-                                    <div className="icon-container img-icon m-r-20 bg-light-gray rounded">
-                                        <i className={`fa ${product?.product_icon} text-primary`}></i>
+                    {products && products.map((product, index) =>
+                    {
+                        // let productName = product?.name?.length > 14 ? product?.name?.substring(0, 14) + '...' : product?.name
+                        return (
+                            <div key={product.uid+index} className={`col-12 col-lg-6 mb-2 mb-xxl-0`}>
+                                <Link to={productPath(product?.product_id)}  >
+                                    <div className={`d-flex align-items-center extraProductCard  ${product?.icon_style}`} style={{borderColor:'black', borderWidth: '2px'}} >
+                                        <div className="icon-container img-icon m-r-20 bg-light-gray rounded">
+                                            <i className={`fa ${product?.product_icon} text-primary`}></i>
+                                        </div>
+                                        <div className="report-details overflow-hidden">
+                                            <p><span style={{fontWeight: 'bolder', color: '#00557A'}}>{product?.status_text}</span></p>
+                                            <h4><span className='w-100 d-inline-block text-truncate' style={{paddingLeft: '10px'}}>{product?.name}</span></h4>
+                                        </div>
                                     </div>
-                                    <div className="report-details">
-                                        <p><span style={{fontWeight: 'bolder', color: '#00557A'}}>{product?.status_text}</span></p>
-                                        <h4><span className='text-truncate' style={{paddingLeft: '10px'}}>{product?.name}</span></h4>
-                                    </div>
-                                </div>
-                            </Link>
-
-                        </div>
-                    ))}
+                                </Link>
+    
+                            </div>
+                        )
+                    } 
+                    )}
                 </div>
             }
                 <div className="apexchart-wrapper">