ECHOES-1262 Wrap page footer elements

[david-cho-lerat-sonarsource]

No description provided.

[netlify]

✅ Deploy Preview for echoes-react ready!

Name	Link
🔨 Latest commit	407a8c6
🔍 Latest deploy log	https://app.netlify.com/projects/echoes-react/deploys/6a0194255686470008f804fc
😎 Deploy Preview	https://deploy-preview-686--echoes-react.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
🤖 Make changes	Run an agent on this branch

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[hashicorp-vault-sonar-prod]

ECHOES-1262

[sonar-review-alpha]

Summary

This PR enables responsive wrapping for the page footer. Previously, footer elements were constrained to a single line with justify-content: space-between. The change adds flex-wrap: wrap so elements can wrap on smaller viewports, and introduces a gap property using design tokens (200px vertical, 300px horizontal) to maintain consistent spacing between wrapped elements.

File changed: src/components/layout/LayoutSlots.tsx (PageFooter component only)

What reviewers should know

Where to look:

• Single change in the PageFooter styled component (lines 147-151)

What to verify:

• Check footer behavior on narrow viewports/mobile to confirm elements wrap appropriately
• Verify the gap spacing looks balanced when elements wrap (vertical vs horizontal gaps)
• Ensure justify-content: space-between combined with wrapping still produces desired alignment when elements are on separate lines

Context:

• Uses existing design tokens (dimension-space-200, dimension-space-300) for consistency
• Minimal change with no component logic or prop changes

---

• Generate Walkthrough
• Generate Diagram

🗣️ Give feedback

[sonar-review-alpha]

LGTM! ✅

Clean, minimal change with no issues. The gap values (dimension-space-200 row / dimension-space-300 column) mirror the asymmetric padding already on the component, and the justify-content: space-between + flex-wrap combination behaves correctly: when the footer narrows and the two items (copyright text + links group) can't fit on one line, they stack to separate rows and both align left — a standard, expected responsive footer pattern.

🗣️ Give feedback

[sonarqube-next]

Quality Gate passed

Issues
0 New issues
0 Fixed issues
0 Accepted issues

Measures
0 Security Hotspots
0 Dependency risks
No data about Coverage
0.0% Duplication on New Code

See analysis details on SonarQube