ok

src/components/Item.js

@@ -19,6 +19,7 @@ const Item = ({
   onRemoveClick,
   isAvailable,
   isBeingEdit,
+  last
 }) => {
   const [selectedImage, setSelectedImage] = useState(imageFile);
   const [previewUrl, setPreviewUrl] = useState(imageUrl);
@@ -89,7 +90,7 @@ const Item = ({
   };
 
   return (
-    <div>
+    <div className={`${!last ? styles.notLast : ""}`}>
       <div className={`${styles.item} ${forInvoice ? styles.itemInvoice : ""} `}>
         {!forInvoice && (
           <div className={styles.imageContainer}>
@@ -303,7 +304,7 @@ const Item = ({
       </div>
       {itemDescription && itemDescription != 'undefined' && itemDescription?.length &&
         <div>
-          <p style={{ color: '#5f5f5f', fontSize: '3.2vw', padding: '5px' }}>{itemDescription}</p>
+          <p style={{ color: '#5f5f5f', fontSize: '3.2vw', padding: '5px', margin: 0 }}>{itemDescription}</p>
         </div>
       }
     </div>

src/components/Item.module.css

@@ -21,7 +21,12 @@
 }
 
 .item:not(.itemInvoice) {
-  border-top: 2px solid #00000017;
+  /* border-top: 2px solid #00000017; */
+}
+
+.notLast{
+  padding-bottom: 10px;
+  border-bottom: 2px solid #00000017;
 }
 
 .itemInvoice {

src/components/ItemLister.js

@@ -922,7 +922,7 @@ const ItemLister = ({
                     ) : null;
                   })}
 
-                  {items.map((item) => {
+                  {items.map((item, indexx) => {
                     return !forCart || (forCart && item.qty > 0) ? (
                       <div
                         key={item.itemId}>
@@ -1004,6 +1004,7 @@ const ItemLister = ({
 
                           <Item
                             key={item.itemId}
+                            last={index === indexTotal-1 && indexx === items.length - 1}
                             forCart={forCart}
                             forInvoice={forInvoice}
                             name={item.name}