fix(patterns): fix header wrapping on mobile

bigcommerce / big-design

Design system that powers the BigCommerce ecosystem.

Other

47 stars 64 forks source link

What?

Fixed header wrapping on mobile screens

Why?

The back link in the header component was aligning side to side with the Main heading and description on mobile screens.

Screenshots/Screen Recordings

Before

Screenshot 2024-09-12 at 4 46 38 PM

After

Screenshot 2024-09-12 at 4 46 51 PM

Testing/Proof

Add the sample in your dev.tsx and shrink the window to mobile size.

dev.tsx code

```tsx import { Page, Header, ActionBar } from '@bigcommerce/big-design-patterns'; import { Panel, Text } from '@bigcommerce/big-design'; import { AddIcon } from '@bigcommerce/big-design-icons'; const PageWithActionBar = () => { return ( } header={

, }, ]} description="Page description (optional)" title="Page with action bar" backLink={{ text: "Back to patterns", onClick: () => window.alert("Back link clicked"), href: "#", }} /> } > Hello ); }; export default PageWithActionBar; ```

bigcommerce / big-design