spike(#3347): Add stickyHeader prop to Container

[Copilot]

Adds stickyHeader boolean prop to goa-container as a concrete example of approach 3 (sticky behavior on individual existing components) for the sticky header/footer spike. Also fixes a pre-existing layout bug where the container header would collapse to an incorrect height when maxHeight was set.

Before (the change)

• Container had no sticky header capability
• Container header would shrink/collapse when maxHeight was applied to the container, due to the header lacking flex-shrink: 0 in the flex-column layout

After (the change)

• Container.svelte — stickyHeader prop registers a scroll listener on .content; applies position: sticky; top: 0; z-index: 1 to the header and a box-shadow when content has scrolled past the top. Added flex-shrink: 0 to the header so it always maintains its full height regardless of any maxHeight constraint on the container.
• React wrapper — stickyHeader?: boolean → stickyheader="true" attribute
• Angular wrapper — @Input() stickyHeader?: boolean → [attr.stickyheader]
• Tests — all three frameworks verify the prop is wired correctly
• PR playground — feat3347.tsx with three test cases (internal scroll via maxHeight, page scroll, and default/no-sticky comparison)

Usage:

// Internal scroll — header stays pinned, shadow appears on scroll
<GoabContainer stickyHeader maxHeight="400px" title="Section">
  {/* long content */}
</GoabContainer>

// Page scroll — header sticks to viewport top as user scrolls down
<GoabContainer stickyHeader title="Section">
  {/* long content */}
</GoabContainer>

All three test cases with correct header heights:

Make sure that you've checked the boxes below before you submit the PR

• I have read and followed the setup steps
• I have created necessary unit tests
• I have tested the functionality in both React and Angular.

Steps needed to test

1. npm run serve:prs:react
2. Navigate to 3347 Container Sticky Header in the sidebar
3. Verify Test 1: scroll inside the height-capped container — header stays visible at full height and a shadow appears below it when scrolled
4. Verify Test 2: scroll the page — header sticks to viewport top
5. Verify Test 3: default container (no stickyHeader) with maxHeight — header renders at correct full height

---

⚡ Quickly spin up Copilot coding agent tasks from anywhere on your macOS or Windows machine with Raycast.

[netlify]

✅ Deploy Preview for goa-design-2 ready!

Name	Link
🔨 Latest commit	65e1646
🔍 Latest deploy log	https://app.netlify.com/projects/goa-design-2/deploys/69bdb44d0dd6d2000954ec08
😎 Deploy Preview	https://deploy-preview-3629--goa-design-2.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

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

[bdfranck]

@copilot The header for test 2 looks good.

But the headers for tests 1 and 3 are too thin.

[Copilot]

@copilot The header for test 2 looks good.

...

Fixed in ecec5a0. The root cause was that the header element lacked flex-shrink: 0, so when a maxHeight constraint was applied to the flex-column container, the flexbox algorithm was compressing the header alongside the content. Adding flex-shrink: 0 to the header ensures it always maintains its full height regardless of the container's height constraint.

All three tests now render with correct header heights: