Improve compact feature recommendation panel in onboarding

[harshitarora-in]

Summary

This PR improves the onboarding feature recommendation panel to make it more compact and easier to scan, while keeping the existing selection behavior intact.

Changes included:

• Improved the compact Features panel layout in onboarding for better usability in limited vertical space.
• Added auto-fit behavior so feature descriptions collapse when panel height is not enough.
• Kept descriptions expanded by default when there is enough space.
• Prioritized collapsing selected/required feature descriptions first to preserve marketing copy on unselected cards when possible.
• Added fallback behavior to collapse all descriptions if space is still insufficient.
• Improved feature card accessibility (including contrast/focus visibility improvements).
• Updated onboarding styling to support the new compact/auto-fit behavior.
• Added/updated onboarding E2E test coverage for the compact features panel behavior.

Will affect visual aspect of the product

YES

Screenshots

Test instructions

1. Open onboarding and go to the Starter Site step with the Features panel.
2. At normal screen height:
   • Feature descriptions should be expanded by default.
3. Reduce the browser window height:
   • Descriptions should auto-collapse so the panel fits.
4. Reduce height further (very small viewport):
   • All descriptions should be collapsed.
5. Click any feature card chevron:
   • The card should expand/collapse correctly.

Expected Result

• The Features panel should not overflow into the bottom area.
• Compact behavior should trigger automatically on smaller heights.

Check before Pull Request is ready:

• I have written a test and included it in this PR
• I have run all tests and they pass
• The code passes when running the PHP CodeSniffer
• Code meets WordPress Coding Standards for PHP, HTML, CSS and JS
• Security and Sanitization requirements have been followed
• I have assigned a reviewer or two to review this PR (if you're not sure who to assign, we can do this step for you)

Closes #.

[pirate-bot]

Plugin build for cc30a46 is ready 🛎️!

• Download build

[Copilot]

Pull request overview

Compacts and simplifies the onboarding feature recommendation panel.

Changes:

• Tightens panel and feature-card spacing.
• Consolidates Otter recommendations.
• Shortens plugin descriptions.

Reviewed changes

Copilot reviewed 4 out of 4 changed files in this pull request and generated 2 comments.

File	Description
onboarding/src/scss/_site-settings.scss	Adds compact feature-step styling.
onboarding/src/scss/_features_list.scss	Restyles feature cards and layout.
onboarding/src/Components/SiteSettings.js	Applies feature-step-specific class.
onboarding/src/Components/FeaturesList.js	Consolidates recommendations and shortens descriptions.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

Pull request overview

Copilot reviewed 4 out of 4 changed files in this pull request and generated no new comments.

[Soare-Robert-Daniel]

@harshitarora-in can you check if the E2E also need to be updated?

[harshitarora-in]

@copilot Can you review this PR and make sure it won't fail the E2E tests? If the tests need to be updated because of these changes, please update them.

Also, can you check whether this PR satisfies the following checklist items?

• The code passes when running the PHP CodeSniffer
• Code meets WordPress Coding Standards for PHP, HTML, CSS, and JS
• Security and Sanitization requirements have been followed

If you find anything that needs to be updated, please make the necessary changes and explain what you changed.

[harshitarora-in]

@Soare-Robert-Daniel, with the old implementation, it was introducing multiple new strings. To avoid that, I changed the implementation a bit by adding an expandable card while keeping the existing string unchanged.