increase time & show extra

src/components/productChoicesCard/ProductChoicesCard.tsx

@@ -45,13 +45,7 @@ export default function ProductChoicesCard({
         }}
       >
         <Space orientation="vertical" size="small">
-          <div
-            style={{
-              position: "absolute",
-              top: 0,
-              [isRTL ? "right" : "left"]: 0,
-            }}
-          >
+          <div style={{}}>
             <ProText
               style={{
                 margin: 0,
@@ -62,7 +56,6 @@ export default function ProductChoicesCard({
             >
               {product.name}
             </ProText>
-            <br />
             <ProText
               type="secondary"
               className={`${styles.itemDescription} responsive-text`}
@@ -92,6 +85,34 @@ export default function ProductChoicesCard({
               {product.type === "OrderItem" && product.variantName}
             </ProText>
 
+            {product.extras && (
+              <ProText
+                type="secondary"
+                className={`${styles.itemDescription} responsive-text`}
+                style={{
+                  margin: 0,
+                  lineClamp: 1,
+                  fontSize: isMobile ? 14 : isTablet ? 18 : 20,
+                  display: "-webkit-box",
+                  WebkitBoxOrient: "vertical",
+                  WebkitLineClamp: 1,
+                  overflow: "hidden",
+                  textOverflow: "ellipsis",
+                  wordWrap: "break-word",
+                  overflowWrap: "break-word",
+                  lineHeight: "1.4",
+                  maxHeight: isMobile ? "3em" : isTablet ? "5em" : "7em",
+                  fontWeight: 500,
+                  letterSpacing: "0.01em",
+                  width: "100%",
+                }}
+              >
+                {product.extras.map((o) => (
+                  <span key={o.id}>{o.name}</span>
+                ))}
+              </ProText>
+            )}
+
             {product.type === "CartItem"
               ? product.extrasgroupnew?.map((o) => (
                   <ProText
@@ -122,13 +143,7 @@ export default function ProductChoicesCard({
               : // ToDo
                 product.itemline}
           </div>
-          <div
-            style={{
-              position: "absolute",
-              bottom: addDividerAfter ? 16 : 3,
-              [isRTL ? "right" : "left"]: 0,
-            }}
-          >
+          <div style={{}}>
             <ArabicPrice price={product.price} style={{ fontStyle: "bold" }} />
           </div>
         </Space>