880 task list weird UI in smaller screens

[vraja-pro]

Context

Summary

This PR can be summarized in the following changelog entry:

• [@yoast/dashboard-frontend 0.0.1] Fixes responsivness for the task row.
• Fixes duration column width for the task list.
• Fixes responsivness of the task list upsell row.

Relevant technical choices:

Test instructions

Test instructions for the acceptance test before the PR gets merged

This PR can be acceptance tested by following these steps:

• View the task list on mobile screen width and check:
  • Icons for tasks being complete ( green check mark and grey ellipse ) size is consistent across tasks.
  • Check task title is align to the start of the row ( check also in rtl language )
  • Check the priority label is hidden.
  • Check upsell button in the upsell row moved to the bottom:

Relevant test scenarios

• Changes should be tested with the browser console open
• Changes should be tested on different posts/pages/taxonomies/custom post types/custom taxonomies
• Changes should be tested on different editors (Default Block/Gutenberg/Classic/Elementor/other)
• Changes should be tested on different browsers
• Changes should be tested on multisite

Test instructions for QA when the code is in the RC

• QA should use the same steps as above.

QA can test this PR by following these steps:

Impact check

This PR affects the following parts of the plugin, which may require extra testing:

Other environments

• This PR also affects Shopify. I have added a changelog entry starting with [shopify-seo], added test instructions for Shopify and attached the Shopify label to this PR.

Documentation

• I have written documentation for this change. For example, comments in the Relevant technical choices, comments in the code, documentation on Confluence / shared Google Drive / Yoast developer portal, or other.

Quality assurance

• I have tested this code to the best of my abilities.
• During testing, I had activated all plugins that Yoast SEO provides integrations for.
• I have added unit tests to verify the code works as intended.
• If any part of the code is behind a feature flag, my test instructions also cover cases where the feature flag is switched off.
• I have written this PR in accordance with my team's definition of done.
• I have checked that the base branch is correctly set.
• I have ran grunt build:images and commited the results, if my PR introduces new images or SVGs.

Innovation

• No innovation project is applicable for this PR.
• This PR falls under an innovation project. I have attached the innovation label.
• I have added my hours to the WBSO document.

Fixes https://github.com/Yoast/reserved-tasks/issues/880

[coveralls]

Pull Request Test Coverage Report for Build 59647cfc71635b67c1020e8b04e16f844f40c29c

Details

• 0 of 0 changed or added relevant lines in 0 files are covered.
• No unchanged relevant lines lost coverage.
• Overall coverage remained the same at 53.39%

---

Totals
Change from base Build bd247f26a35052d669a0ea62eafb073750740386:	0.0%
Covered Lines:	32406
Relevant Lines:	60950

---

💛 - Coveralls

[github-actions]

A merge conflict has been detected for the proposed code changes in this PR. Please resolve the conflict by either rebasing the PR or merging in changes from the base branch.

[leonidasmi]

CR + Acceptance is ✔️