ok

src/components/Item.js

@@ -93,7 +93,7 @@ const Item = ({
     <div className={`${!last ? styles.notLast : ""}`}>
       <div className={`${styles.item} ${forInvoice ? styles.itemInvoice : ""} `}>
         {!forInvoice && (
-          <div className={styles.imageContainer}>
+          // <div className={styles.imageContainer}>
             <img
               src={
                 previewUrl
@@ -107,9 +107,9 @@ const Item = ({
               style={{
                 filter: !isAvailable ? "grayscale(100%)" : "none",
               }}
-              className={styles.itemImage}
+              className={styles.imageContainer}
             />
-          </div>
+          // </div>
         )}
         <div className={styles.itemDetails}>
           {forInvoice &&
@@ -141,7 +141,18 @@ const Item = ({
           onChange={handleNameChange}
           disabled={!blank && !isBeingEdit}
         /> */}
-          <h3 style={{ textTransform: 'capitalize', margin: '5px 0px 10px 10px', fontSize: '17px' }}>{itemName}</h3>
+          <h3 style={{
+  textTransform: 'capitalize',
+  margin: '5px 0px 10px 10px',
+  fontSize: '16px',
+  display: '-webkit-box',
+  WebkitBoxOrient: 'vertical',
+  overflow: 'hidden',
+  WebkitLineClamp: 2,
+  textOverflow: 'ellipsis'
+}}>
+  {itemName}
+</h3>
           {forInvoice && (
             <>
               <p className={styles.multiplySymbol}>x</p>
@@ -175,16 +186,17 @@ const Item = ({
                     position: 'relative',
                     marginTop: '0.125rem',
                     display: 'flex',
-                    width: 'max-content',
+                    width: '87px',
                     alignItems: 'center',
                     whiteSpace: 'nowrap',
                     borderRadius: '9999px',
                     backgroundImage: 'linear-gradient(to right, #e52535, #eb525e)',
-                    padding: '0.25rem 0.75rem',
+                    padding: '0.25rem 0rem',
                     color: 'rgb(255, 255, 255)',
                     fontSize: '0.75rem',
                     fontWeight: 600,
-                    lineHeight: '1rem'
+                    lineHeight: '1rem',
+                    justifyContent: 'center'
                   }}>
                     Promo {(((initialPrice - promoPrice) / initialPrice) * 100).toFixed(0)}%
                   </div>
@@ -304,7 +316,13 @@ const Item = ({
       </div>
       {itemDescription && itemDescription != 'undefined' && itemDescription?.length &&
         <div>
-          <p style={{ color: '#5f5f5f', fontSize: '3.2vw', padding: '5px', margin: 0 }}>{itemDescription}</p>
+          <p style={{ 
+            maxHeight: '34px',
+  display: '-webkit-box',
+  WebkitBoxOrient: 'vertical',
+  overflow: 'hidden',
+  WebkitLineClamp: 2,
+  textOverflow: 'ellipsis', color: '#5f5f5f', fontSize: '14px', padding: '5px', margin: 0 }}>{itemDescription}</p>
         </div>
       }
     </div>