Fix gallery-control alignment in discover-cards on wide viewports

[echen-adobe]

Summary

Fixes a misalignment between the discover-cards gallery navigation arrows (.gallery-control) and the card gallery (.cards-container) on wide viewports (≥1680px).

.cards-container is capped at max-width: 1700px and centered (margin: auto) once the viewport passes 1680px. .gallery-control — a sibling element holding the prev/next nav buttons, right-aligned via justify-content: flex-end — had no matching max-width/centering, so it stayed full width and its buttons drifted away from the actual right edge of the centered card gallery, instead of sitting flush with it.

Fix: mirror the same max-width: 1700px on .gallery-control, and add margin: 0 auto in the same @media (min-width: 1680px) block that centers .cards-container, so both elements share the same effective right edge at all viewport widths.

Verified with a Playwright harness (mock DOM + real CSS) at a 2200px viewport: before the fix, .gallery-control's right edge sat 234px past .cards-container's right edge; after the fix, both align exactly (0px diff).

---

Jira Ticket

N/A

---

Test URLs

Env	URL
Before	https://main--da-express-milo--adobecom.aem.page/express/
After	https://gallery-control-margin-fix--da-express-milo--adobecom.aem.page/express/?martech=off
After (Arabic/RTL)	https://gallery-control-margin-fix--da-express-milo--adobecom.aem.page/ara/drafts/echen/simple-homepage?martech=off

---

Verification Steps

• Open a discover-cards section (e.g. /express/ homepage) at a browser width ≥1680px (try 1920px or wider).
• Before: the prev/next nav arrow buttons sit flush against the far edge of the block, visibly detached from the right edge of the last visible card.
• After: the nav arrows align with the right edge of the centered card gallery, matching the card-container's margin.
• Confirm no regression at narrower widths (<1680px), where .cards-container isn't centered and the arrows should look unchanged.
• Also check the Arabic/RTL draft page — .gallery-control buttons are horizontally flipped in RTL (html[dir="rtl"] .discover-cards .gallery-control button { transform: scaleX(-1); }), so confirm alignment still holds with justify-content: flex-end under RTL layout direction.

---

Potential Regressions

• https://gallery-control-margin-fix--da-express-milo--adobecom.aem.live/express/?martech=off
• Any other page using the discover-cards block (standard and .flip variants), at wide (≥1680px) viewports.

---

Additional Notes

Scoped entirely to express/code/blocks/discover-cards/discover-cards.css (4 lines added, no JS changes). Passed stylelint and the repo's lint-css-vars check with no issues.

[aem-code-sync]

Hello, I'm the AEM Code Sync Bot and I will run some actions to deploy your branch and validate page speed.
In case there are problems, just click a checkbox below to rerun the respective action.

• Re-run all PSI checks
• Re-run failed PSI checks
• Re-sync branch

Commits

• 3d73629 ✅ (latest)
• 0dae126 ✅

[aem-code-sync]

	Page	Scores	Audits
📱	/express/?martech=off
🖥️	/express/?martech=off
📱	/ara/drafts/echen/simple-homepage?martech=off
🖥️	/ara/drafts/echen/simple-homepage?martech=off
📱	/express/?martech=off
🖥️	/express/?martech=off