Merge pull request #14935 from woocommerce/fix/pos-historical-orders-long-product-names

Fix overlapping texts by pinning to the text bottom

Author: toupper

WooCommerce/src/main/kotlin/com/woocommerce/android/ui/woopos/orders/WooPosOrdersDetails.kt

@@ -170,7 +170,7 @@ private fun OrderProductItem(row: OrderDetailsViewState.Computed.Details.LineIte
             style = WooPosTypography.BodyMedium,
             color = WooPosTheme.colors.onSurfaceVariantHighest,
             modifier = Modifier.constrainAs(qtyText) {
-                bottom.linkTo(image.bottom)
+                top.linkTo(nameText.bottom, margin = WooPosSpacing.XSmall.value)
                 start.linkTo(nameText.start)
                 end.linkTo(totalText.start, margin = WooPosSpacing.Small.value)
                 width = Dimension.fillToConstraints
@@ -357,7 +357,7 @@ fun WooPosOrderDetailsPreview() {
         lineItems = listOf(
             OrderDetailsViewState.Computed.Details.LineItemRow(101, "Cup", "2 x $4.00", "$8.00", null),
             OrderDetailsViewState.Computed.Details.LineItemRow(102, "Coffee Container", "1 x $10.00", "$10.00", null),
-            OrderDetailsViewState.Computed.Details.LineItemRow(103, "Paper Filter", "1 x $5.00", "$5.00", null)
+            OrderDetailsViewState.Computed.Details.LineItemRow(103, "A vey tasty coffee that incidentally has a very long name and should go over a few lines without overlapping anything", "1 x $5.00", "$5.00", null)
         ),
         breakdown = OrderDetailsViewState.Computed.Details.TotalsBreakdown(
             products = "$23.00",