[GlobalStep] Download file name seems wrapped on "My Account->Downloads" screen of Storefront theme.

[gglobalstep]

Bug Description:

Download file name seems wrapped on "My Account->Downloads" screen of Storefront theme.

Environment:

Woocommerce Version : WooCommerce 5.5 RC 2 and 5.4.1 WordPress version: (v5.8 RC 2)

PC: Windows 10, Mac 10.14.6 Chrome(Version 91.0.4472.77) Firefox(Version 89.0.2) Safari: v14.0

Steps To Reproduce:

1. Create any test site using JN site.
2. Install and activate all the required plugins.
3. Complete the onboarding setup wizard.
4. Add a Downloadable Product.
5. As a Shopper go to Shop page and place a order for downloadable product.
6. As a Shopper go to My Account->Downloads screen.
7. Observe that Download file name text displayed as Cut off.

Actual Result:

Download file name seems wrapped on "My Account->Downloads" screen of Storefront theme.

Expected Result:

Download file name text should be display properly aligned on "My Account->Downloads" screen for Storefront theme.

Screenshot:

For Storefront Theme:

For Twenty Twenty One Theme:

Isolating the problem (mark completed items with an [x]):

• [ ] I have deactivated other plugins and confirmed this bug occurs when only WooCommerce plugin is active.
• [ ] This bug happens with a default WordPress theme active, or Storefront.
• [x] I can reproduce this bug consistently using the steps above.

[zhongruige]

Hi @gglobalstep,

Thank you for taking the time to report this bug, we really appreciate your help. I can reproduce it on my end. I tested on both WordPress 5.8/5.7.2 and WooCommerce 5.5 / 5.4 versions.

Replication steps

• I created a downloadable product and configured a user account for a shopper
• I purchased the product and completed the order
• I navigated to My account > Downloads on the Storefront theme and noticed the product name text is wrapped on the button
• I switched the theme to Twenty Twenty-one and noted that it was not wrapped

We won’t be able to include this fix in the upcoming release due to the lower priority of this issue compared to others reported. We’re going to add it to our backlog so we can include it in our planning for one of our future releases.

[calvinmorett]

Solution/Fix:

.download-file {
    word-break: break-word;
}

[calvinmorett]

Above detailed change results, when coupled with the change in woocommerce/woocommerce#30033; Text alignment is changed from left to center.

[joashrajin]

The issue is due to this code from the style.css of Storefront:

[rrennick]

Transferring this to the Storefront repository to be addressed there.