Update templates/cart.html

templates/cart.html

@@ -282,7 +282,7 @@
     align-items: center; /* Center image and text vertically */
     justify-content: flex-start; /* Align items to the start (left side) */
     flex-shrink: 0;
-    width: 160px; /* Set fixed width for each suggestion item */
+    width: 180px; /* Adjust width for more content */
     padding: 10px;
     border-radius: 8px; /* Rounded corners */
     background-color: #fff;
@@ -291,6 +291,7 @@
     margin-right: 10px; /* Ensure there's space between the cards */
     position: relative; /* For positioning the + icon */
     text-align: left; /* Align text to the left */
+    overflow: hidden; /* Prevent text from overflowing outside the card */
 }
 
 .suggestion-item:hover {
@@ -298,8 +299,8 @@
 }
 
 .suggestion-item img {
-    width: 50px; /* Set a fixed width for the image */
-    height: 50px; /* Set a fixed height for the image */
+    width: 60px; /* Set a fixed width for the image */
+    height: 60px; /* Set a fixed height for the image */
     object-fit: cover; /* Ensure image fits correctly without distortion */
     border-radius: 5px; /* Rounded corners for the image */
     margin-right: 12px; /* Space between the image and text */
@@ -307,14 +308,15 @@
 
 .suggestion-item div {
     flex-grow: 1; /* Allow the text section to expand and fill available space */
+    text-align: left; /* Align text to the left */
 }
 
 /* Styling for the + symbol button (with green border, white background, and black text) */
 .add-back-button {
     position: absolute;
-    top: 5px; /* Position at the top */
-    right: 5px; /* Position at the top-right */
-    font-size: 1.3rem; /* Increase size of the + symbol */
+    top: -10px; /* Position the + symbol slightly outside of the card */
+    right: -10px; /* Position at the top-right, slightly outside */
+    font-size: 1.5rem; /* Increase size of the + symbol */
     padding: 6px 10px; /* Button padding */
     background-color: #fff; /* White background */
     color: #000; /* Black color for the + symbol */