[Page -> Header] Ensure we only set min-width on title when title is …

…not long (Shopify#11504)

### WHY are these changes introduced?

To prevent wrapping of titles prematurely, we included some CSS to
ensure that the width of the Title element within the Page Header would
always be at-minimum the width of its content. This causes issues when
titles are long, as it can cause the layout of the rest of the header to
go outside of the page.

This PR ensures that we only use `min-width: fit-content` if we detect
the title is not long and we can safely ensure it stays on a single
line. For titles that are longer, they now wrap as before, to give space
for the actions within the Header.

### Examples

<img width="1588" alt="Screenshot 2024-01-25 at 16 21 43"
src="https://github.com/Shopify/polaris/assets/2562596/a2f6e2b4-9df4-4a62-9b53-b643403061b1">
<img width="1588" alt="Screenshot 2024-01-25 at 16 21 36"
src="https://github.com/Shopify/polaris/assets/2562596/3fae343e-eeb4-4892-8206-260813acbfb1">
<img width="1588" alt="Screenshot 2024-01-25 at 16 21 32"
src="https://github.com/Shopify/polaris/assets/2562596/4fd6d4aa-d0cc-4f22-877b-608278d414c9">


### How to 🎩

🖥 [Local development
instructions](https://github.com/Shopify/polaris/blob/main/README.md#install-dependencies-and-build-workspaces)
🗒 [General tophatting
guidelines](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md)
📄 [Changelog
guidelines](https://github.com/Shopify/polaris/blob/main/.github/CONTRIBUTING.md#changelog)

### 🎩 checklist

- [ ] Tested a
[snapshot](https://github.com/Shopify/polaris/blob/main/documentation/Releasing.md#-snapshot-releases)
- [x] Tested on
[mobile](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md#cross-browser-testing)
- [x] Tested on [multiple
browsers](https://help.shopify.com/en/manual/shopify-admin/supported-browsers)
- [x] Tested for
[accessibility](https://github.com/Shopify/polaris/blob/main/documentation/Accessibility%20testing.md)
- [x] Updated the component's `README.md` with documentation changes
- [x] [Tophatted
documentation](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting%20documentation.md)
changes in the style guide

.changeset/fast-shrimps-bow.md

@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': patch
+---
+
+Updated Page Header to only ensure no wrapping of the title when the title is relatively short

polaris-react/src/components/Page/Page.stories.tsx

@@ -383,6 +383,65 @@ export function WithActionGroupsAndActions() {
   );
 }
 
+export function WithActionGroupsAndActionsAndLongTitle() {
+  return (
+    <Page
+      title="List of products available on your online store"
+      secondaryActions={[
+        {
+          content: 'Send test',
+          onAction: () => {},
+        },
+        {
+          content: 'Confirm',
+          onAction: () => {},
+        },
+        {
+          content: 'Localize',
+          url: '/store/marcs-staffed-store/apps/translate-and-adapt/localize/email_template?id=10774151224&locale=fr',
+        },
+        {
+          content: 'Manage payment reminders',
+          url: '/store/marcs-staffed-store/settings/notifications/payment_reminders',
+        },
+      ]}
+      actionGroups={[
+        {
+          title: 'Copy',
+          onClick: (openActions) => {
+            console.log('Copy action');
+            openActions();
+          },
+          actions: [{content: 'Copy to clipboard'}],
+        },
+        {
+          title: 'Promote',
+          disabled: true,
+          actions: [{content: 'Share on Facebook'}],
+        },
+        {
+          title: 'Delete',
+          disabled: false,
+          actions: [{content: 'Delete or remove'}],
+        },
+        {
+          title: 'Other actions',
+          actions: [
+            {content: 'Duplicate'},
+            {content: 'Print'},
+            {content: 'Unarchive'},
+            {content: 'Cancel order'},
+          ],
+        },
+      ]}
+    >
+      <LegacyCard title="Credit card" sectioned>
+        <p>Credit card information</p>
+      </LegacyCard>
+    </Page>
+  );
+}
+
 export function WithContentAfterTitle() {
   return (
     <Page

polaris-react/src/components/Page/components/Header/Header.module.scss

@@ -7,11 +7,14 @@ $action-menu-rollup-computed-width: 40px;
   margin-top: var(--p-space-100);
   align-self: center;
   flex: 1 1 auto;
-  min-width: fit-content;
 
   @media (--p-breakpoints-sm-up) {
     margin-top: 0;
   }
+
+  .mediumTitle & {
+    min-width: fit-content;
+  }
 }
 
 .BreadcrumbWrapper {