feat: 🎸 add responsive header option for the Layout component

[Rebecca König (veu)]

Purpose of PR

This PR adds the withResponsiveHeader to the Layout component which

• changes the Header’s styling to support breaking into multiple rows,
• removes the fixed height from the Layout to support the responsive header, and
• disallows adding the filters prop to the Header because the placement of the filters would create confusion when the header is broken into multiple lines.

Deprecation updates

• The withResponsiveHeader prop is added temporarily to prevent breaking changes in the Header and Layout components and avoid introducing a new set of components.
• The filters prop is now deprecated. Filters should be added below the header.
• In a future major release withResponsiveHeader will be made the default and filters will be removed.

TODO

• add deprecation info
• add migration guide
• add changeset

PR Checklist

• I have read the relevant readme.md file(s)
• All commits follow our Git commit message convention
• Tests are added/updated/not required
• Tests are passing
• Storybook stories are added/updated/not required
• Usage notes are added/updated/not required
• Has been tested based on Contentful's browser support
• Doesn't contain any sensitive information

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
forma-36	Error		Jul 16, 2026 11:20am
forma-36-storybook	Error		Jul 16, 2026 11:20am

[changeset-bot]

🦋 Changeset detected

Latest commit: 09b3a0d

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 43 packages

Name	Type
@contentful/f36-header	Minor
@contentful/f36-layout	Minor
@contentful/f36-accordion	Minor
@contentful/f36-asset	Minor
@contentful/f36-autocomplete	Minor
@contentful/f36-avatar	Minor
@contentful/f36-badge	Minor
@contentful/f36-button	Minor
@contentful/f36-card	Minor
@contentful/f36-collapse	Minor
@contentful/f36-components	Minor
@contentful/f36-copybutton	Minor
@contentful/f36-core	Minor
@contentful/f36-datetime	Minor
@contentful/f36-datepicker	Minor
@contentful/f36-drag-handle	Minor
@contentful/f36-entity-list	Minor
@contentful/f36-empty-state	Minor
@contentful/f36-forms	Minor
@contentful/f36-icon	Minor
@contentful/f36-icons	Minor
@contentful/f36-image	Minor
@contentful/f36-list	Minor
@contentful/f36-menu	Minor
@contentful/f36-modal	Minor
@contentful/f36-multiselect	Minor
@contentful/f36-navbar	Minor
@contentful/f36-navlist	Minor
@contentful/f36-note	Minor
@contentful/f36-notification	Minor
@contentful/f36-pagination	Minor
@contentful/f36-pill	Minor
@contentful/f36-progress-stepper	Minor
@contentful/f36-popover	Minor
@contentful/f36-skeleton	Minor
@contentful/f36-spinner	Minor
@contentful/f36-table	Minor
@contentful/f36-tabs	Minor
@contentful/f36-text-link	Minor
@contentful/f36-tooltip	Minor
@contentful/f36-typography	Minor
@contentful/f36-usage-card	Minor
@contentful/f36-usage-count	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[github-actions]

size-limit report 📦

Path	Size	Loading time (3g)	Running time (snapdragon)	Total time
CommonJS	132.98 KB (+0.2% 🔺)	2.7 s (+0.2% 🔺)	36 ms (+9.19% 🔺)	2.7 s
Module	129.87 KB (+0.26% 🔺)	2.6 s (+0.26% 🔺)	55 ms (+56.45% 🔺)	2.7 s