Added Fix for - 26181

[divyajyothi5321]

Description (*)

Fixed Issues (if relevant)

1. Out of stock text is not aligned properly with add to cart button at list page in responsive  #26181: Out of stock text is not aligned properly with add to cart button at list page in responsive

Manual testing scenarios (*)

1. Go to Frond end and product listing page
2. With this fix in mobile view the out of stock text and add links are aligned compared with add to cart button as shown below

Questions or comments

Contribution checklist (*)

• Pull request has a meaningful description of its purpose
• All commits are accompanied by meaningful commit messages
• All new or changed code is covered with unit/integration tests (if applicable)
• All automated tests passed successfully (all builds are green)

[m2-assistant]

Hi @divyajyothi5321. Thank you for your contribution
Here is some useful tips how you can test your changes using Magento test environment.
Add the comment under your pull request to deploy test or vanilla Magento instance:

• @magento give me test instance - deploy test instance based on PR changes
• @magento give me 2.4-develop instance - deploy vanilla Magento instance

For more details, please, review the Magento Contributor Guide documentation.

[rogyar]

@magento give me test instance

[magento-engcom-team]

Hi @rogyar. Thank you for your request. I'm working on Magento instance for you

[magento-engcom-team]

Hi @rogyar, here is your new Magento instance.
Admin access: https://pr-26183.instances.magento-community.engineering/admin
Login: admin Password: 123123q

[rogyar]

Hi, @divyajyothi5321. Thank you for your collaboration.

At some resolutions, they are still not aligned (check the wishlist and compare icons).

Also, I'm not sure that an additional color (orange) should be used in this particular case. The alignment fix is required, no doubts here. But bringing additional colors to the theme might be a topic for additional debates.

[divyajyothi5321]

@rogyar Can we add custom breakpoints in theme

[divyajyothi5321]

For integration test I'm getting "testTableSelection with data set #1" from the source "Magento\Reports\Model\ResourceModel\Report\Product\Viewed\CollectionTest.testTableSelection with data set #16", which is not related to any CSS changes made by me.

[rogyar]

Hi @divyajyothi5321. The tests are slightly broken. We are waiting for PR with the fixes for tests to be merged soon.
As for the custom media queries, it depends. But I would say that we may not introduce custom media queries in most cases since such change might be considered as backward incompatible.

[divyajyothi5321]

@rogyar thank you for your suggestion, I didn't add any custom media queries adjusted with existing media queries and now all checks are passed please review my latest changes and let me know for any modifications.

[rogyar]

@magento give me test instance

[magento-engcom-team]

Hi @rogyar. Thank you for your request. I'm working on Magento instance for you

[magento-engcom-team]

Hi @rogyar, here is your new Magento instance.
Admin access: https://pr-26183.instances.magento-community.engineering/admin
Login: admin Password: 123123q

[rogyar]

Hi @divyajyothi5321. Now it's much better. Thank you

[magento-engcom-team]

Hi @rogyar, thank you for the review.
ENGCOM-6536 has been created to process this Pull Request

[engcom-Delta]

✔️ QA passed

[m2-assistant]

Hi @divyajyothi5321, thank you for your contribution!
Please, complete Contribution Survey, it will take less than a minute.
Your feedback will help us to improve contribution process.