TopBar Search should align with the page

[alex-page]

WHY are these changes introduced?

Should be merged after #3609 and fixes #3438

WHAT is this pull request doing?

• Make sure the TopBar search aligns with the Page content when it is not fullWidth
• No deprecations to Contextual save bar alignment
• Does not break additional navigation or user menu layout

How to 🎩

🖥 Local development instructions
🗒 General tophatting guidelines
📄 Changelog guidelines

1. Go to the details page and remove the fullwidth property
2. Open the details page in a browser and the Page contents should line up with the search at all break points above mobile.
3. Make sure the contextual save bar also lines up with the page
4. Add a secondary navigation and make sure it lines up with the page

Copy-paste this code in playground/Playground.tsx:

import React from 'react';
import {Page} from '../src';

export function Playground() {
  return (
    <Page title="Playground">
      {/* Add the code you want to test in here */}
    </Page>
  );
}

🎩 checklist

• Tested on mobile
• Tested on multiple browsers
• Tested for accessibility
• Updated the component's README.md with documentation changes
• Tophatted documentation changes in the style guide
• For visual design changes, pinged one of @ HYPD, @ mirualves, @ sarahill, or @ ry5n to update the Polaris UI kit

[github-actions]

🟢 This pull request modifies 2 files and might impact 1 other files.

Details:

All files potentially affected (total: 1)

• /src/components/TopBar/TopBar.tsx

📄 UNRELEASED.md (total: 0)

Files potentially affected (total: 0)

🎨 src/components/TopBar/TopBar.scss (total: 1)

Files potentially affected (total: 1)

• /src/components/TopBar/TopBar.tsx

[alex-page]

Magic number continues ✨

[kyledurand]

🎩 looks good