Error with title on the <Page> component

[asacarter]

Summary

Spending an hour trying to figure why my app is broken and its just Polaris that is broken.

Adding any title to a page creates an error...

import {Page } from '@shopify/polaris';
import React from 'react';

function PageExample() {
  return (
    <Page
      title="3/4 inch Leather pet collar"
    >
    </Page>
  );
}

Warning: Prop className did not match. Server: "Polaris-Page-Header--isSingleRow Polaris-Page-Header--noBreadcrumbs Polaris-Page-Header--mediumTitle" Client: "Polaris-Page-Header--isSingleRow Polaris-Page-Header--mobileView Polaris-Page-Header--noBreadcrumbs Polaris-Page-Header--mediumTitle"

Expected behavior

No error adding a title

Actual behavior

Warning: Prop className did not match. Server: "Polaris-Page-Header--isSingleRow Polaris-Page-Header--noBreadcrumbs Polaris-Page-Header--mediumTitle" Client: "Polaris-Page-Header--isSingleRow Polaris-Page-Header--mobileView Polaris-Page-Header--noBreadcrumbs Polaris-Page-Header--mediumTitle"

Steps to reproduce

Create a new app from the template and give the page title instead of using titlebar.

Are you using React components?

Yes

Polaris version number

12.27.0

Browser

Chrome

Device

Macbook Pro M3

[gavinharriss]

The styling for the page component is also broken as a result, as you can see from this screenshot snippet:

<Page 
  title="Add connection"
  backAction={{
    content: "Connections",
    url: "/app/connections",
  }}
>
...

As an aside, I also note that the backAction is not working correctly with SaveBar. When the back button is used, the SaveBar shakes but does not stop the navigation occuring.

[gavinharriss]

This issue appears to be resolved with @shopify/polaris v13.9.0. But the title still prefers to stack itself underneath the back button at most break points e.g.