fix(patterns): fix page width to occupy available space

[davelinke]

What?

Fixed the page width css for page to occupy the available width instead of hugging contents

Why?

To avoid pages to be shrunk to the center of the screen misaligned with action bar and having a consistent experience

Screenshots/Screen Recordings

Before

After

Testing/Proof

dev.tsx code

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 (
    <Page
      actionBar={
        <ActionBar
          actions={[
            {
              text: 'Main action',
              variant: 'primary',
            },
            {
              text: 'Dismiss',
              variant: 'subtle',
            },
          ]}
        />
      }
      header={
        <Header
          actions={[
            {
              text: 'Secondary',
              variant: 'secondary',
              iconLeft: <AddIcon />,
            },
          ]}
          description="Page description (optional)"
          title="Page with action bar"
        />
      }
    >
      <Panel header="Page contents">
        <Text>Hello</Text>
      </Panel>
    </Page>
  );
};

export default PageWithActionBar;

[changeset-bot]

🦋 Changeset detected

Latest commit: 1c4a27a

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

This PR includes changesets to release 2 packages

Name	Type
@bigcommerce/big-design-patterns	Patch
@bigcommerce/docs	Patch

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