feat: make ContentLayout secondary header breakpoint tunable

[ernst-dev]

Description

Makes the ContentLayout secondary header (secondaryHeader slot) responsive breakpoint tunable via a new opt-in, backward-compatible secondaryHeaderBreakpoint prop.

Previously the header/secondary-header split was hardcoded to { default: 12, xs: 9 } / { default: 12, xs: 3 }, so the two slots always collapsed (stacked full-width) below the xs breakpoint. On narrow-but-not-tiny viewports this collapses earlier than some layouts want, and there was no way for consumers to control it.

The new prop lets consumers choose the breakpoint at and above which the header (9 cols) and secondary header (3 cols / 25%) are shown side-by-side. Below the breakpoint they stack full-width, as before.

• secondaryHeaderBreakpoint?: 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' — defaults to 'xs' (identical to today's behaviour, fully backward compatible).
• Lower it to 'xxs' to keep the slots side-by-side on narrow viewports (so they don't collapse too early); raise it ('s', 'm', …) to make them stack on wider viewports.
• Has no effect unless both header and secondaryHeader are set.

The grid-definition computation is extracted into a small pure helper (getSecondaryHeaderGridDefinition) for testability. Reuses the existing InternalGrid + GridProps.BreakpointMapping patterns; no visual/behavioural change at the default value.

Related links, issue #: Cloudscape Core SIM AWSUI-61262 — "Improve service page header responsiveness with ContentLayout". The ticket references src/content-layout/internal.tsx#L114 and asks to make the secondary header better on mid-size screens. This PR addresses that as an opt-in, backward-compatible prop rather than changing the default colspans (which would be a layout-breaking change for existing consumers).

How has this been tested?

• Added unit tests: default breakpoint is 'xs'; getSecondaryHeaderGridDefinition produces the correct 9/3 side-by-side split with full-width (12) stacking below the breakpoint for every supported breakpoint; component still renders both header slots when the prop is set. Full ContentLayout suite: 51 passing.
• Updated the documenter snapshot to include the new prop (97 passing).
• Added a dev page (pages/content-layout/secondary-header-breakpoint.page.tsx) with an interactive breakpoint selector over a service-homepage-style layout for manual/visual testing.
• eslint clean on changed files; gulp quick-build and production gulp build both succeed.

Review checklist

The following items are to be evaluated by the author(s) and the reviewer(s).

Correctness

• Changes include appropriate documentation updates. (Prop doc comment + documenter snapshot updated.)
• Changes are backward-compatible if not indicated, see CONTRIBUTING.md. (New optional prop; default reproduces current behaviour exactly.)
• Changes do not include unsupported browser features, see CONTRIBUTING.md.
• Changes were manually tested for accessibility, see accessibility guidelines. (No change to DOM order/semantics; only responsive colspan breakpoint.)

Security

• If the code handles URLs: all URLs are validated through the checkSafeUrl function. (N/A — no URL handling.)

Testing

• Changes are covered with new/existing unit tests? Yes.
• Changes are covered with new/existing integration tests? Existing integration coverage unaffected; behaviour covered by unit tests + dev page.

---

By submitting this pull request, I confirm that you can use, modify, copy, and redistribute this contribution, under the terms of your choice.

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 97.61%. Comparing base (f97729a) to head (a52b068).

Additional details and impacted files

@@           Coverage Diff           @@
##             main    #4810   +/-   ##
=======================================
  Coverage   97.61%   97.61%           
=======================================
  Files         952      952           
  Lines       30816    30820    +4     
  Branches    11318    11319    +1     
=======================================
+ Hits        30081    30085    +4     
  Misses        688      688           
  Partials       47       47           

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.