Show total sale badge in medium carts & make it display below price

assets/js/blocks/cart-checkout/cart/full-cart/cart-line-item-row.js

@@ -256,22 +256,24 @@ const CartLineItemRow = ( { lineItem = {} } ) => {
 				</div>
 			</td>
 			<td className="wc-block-cart-item__total">
-				<ProductPrice
-					currency={ totalsCurrency }
-					format={ productPriceFormat }
-					price={ totalsPrice.getAmount() }
-				/>
-
-				{ quantity > 1 && (
-					<ProductSaleBadge
-						currency={ priceCurrency }
-						saleAmount={ getAmountFromRawPrice(
-							saleAmount,
-							priceCurrency
-						) }
-						format={ saleBadgePriceFormat }
+				<div className="wc-block-cart-item__total-price-and-sale-badge">
+					<ProductPrice
+						currency={ totalsCurrency }
+						format={ productPriceFormat }
+						price={ totalsPrice.getAmount() }
 					/>
-				) }
+
+					{ quantity > 1 && (
+						<ProductSaleBadge
+							currency={ priceCurrency }
+							saleAmount={ getAmountFromRawPrice(
+								saleAmount,
+								priceCurrency
+							) }
+							format={ saleBadgePriceFormat }
+						/>
+					) }
+				</div>
 			</td>
 		</tr>
 	);

assets/js/blocks/cart-checkout/cart/full-cart/style.scss

@@ -150,6 +150,24 @@ table.wc-block-cart-items {
 	display: flex;
 }
 
+.wc-block-cart-item__total-price-and-sale-badge {
+	display: flex;
+	flex-direction: column;
+	align-items: flex-end;
+
+	.wc-block-components-sale-badge {
+		margin-top: $gap-smallest;
+	}
+}
+
+.is-small {
+	.wc-block-cart-item__total {
+		.wc-block-components-sale-badge {
+			display: none;
+		}
+	}
+}
+
 .is-medium,
 .is-small,
 .is-mobile {
@@ -202,10 +220,6 @@ table.wc-block-cart-items {
 				.wc-block-components-formatted-money-amount {
 					display: inline-block;
 				}
-
-				.wc-block-components-sale-badge {
-					display: none;
-				}
 			}
 		}
 	}