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">

src/component/product/settingsTab/UploadModal.jsx

@@ -70,7 +70,7 @@ export default function UploadModal({productId, selectedSectionDetails}) {
     const handleUpload = () => {
         let reqData = {
             token: localStorage.getItem("token"), // USER TOKEN
-            member_uid: localStorage.getItem("uid"), // USER UID
+            uid: localStorage.getItem("uid"), // USER UID
             product_id: productId,
             file_uid: selectedFile,
             image_id: selectedSectionDetails?.id
@@ -125,7 +125,7 @@ export default function UploadModal({productId, selectedSectionDetails}) {
                                     return(
                                         <div onClick={()=>handleSelectedFile(item?.file_uid)} className={`p-3 text-center col-4`} style={{cursor: 'pointer'}}>
                                             <div className={`p-3 ${(selectedFile == item?.file_uid) && 'bg-light'}`} style={{Height: '250px'}}>
-                                                <img key={item?.file_uid} className="" style={{height: '250px', width: '250px'}} src={file_url} alt='file-image' />
+                                                <img key={item?.file_uid} className="img-fluid" style={{}} src={file_url} alt='file-image' />
                                             </div>
                                         </div>
                                     )