feat: add optional pinned prop to content header

[Jay-Topher]

Done

• Added optional isPinned prop to Content.Header

QA steps

• Ensure the component is displayed correctly across all breakpoints
• Navigate to the content section docs
• Ensure that the "With Pinned Header" example works as expected

Fixes

Fixes:

Screenshots

Notes

[webteam-app]

Demo starting at https://maas-react-components-108.demos.haus

[petermakowski]

TLDR; Let's put this on hold while we investigate how to resolve this.

Sorry, I know this is what I've suggested, but I've given this more thought and think we should simply make the header pinned by default (just as the footer is).

Introducing a boolean prop could make this confusing and will be inconsistent with the footer defaults. I went through all instances in MAAS UI and do not see any disadvantages of using the sticky header in all places where this component is used.

One exception is mobile - sticky header doesn't work well when there's a lot of content on mobile as seen below.

I'd risk making the header sticky on large breakpoint only, but this could further complicate things.

In case we go ahead with it we should make sure we update the docs as well. Meaning - change from ContentSection.Footer is made sticky by default. to Both ContentSection.Header and ContentSection.Footer are made sticky by default.