From 9f3dfe3bcd8bbafacac29092e39fa217c80ce038 Mon Sep 17 00:00:00 2001
From: Wojciech Mista <wojciech.mista@saleor.io>
Date: Thu, 3 Feb 2022 13:59:36 +0100
Subject: [PATCH] Fix card menu styles on small screens (#1813)

* Move cardMenu to page header

* Update tests

* Fix extension menu items

* Refactor card menu in page header

* Update tests

* Apply new page styling to gift cards list
---
 .../ButtonWithSelect/ButtonWithSelect.tsx     |    4 +-
 .../ExtendedPageHeader/ExtendedPageHeader.tsx |   14 +-
 src/components/PageHeader/PageHeader.tsx      |   26 +-
 .../GiftCardsListHeader.tsx                   |    8 +-
 .../OrderDetailsPage/OrderDetailsPage.tsx     |    5 +-
 .../OrderListPage/OrderListPage.tsx           |   30 +-
 .../ProductListPage/ProductListPage.tsx       |   36 +-
 .../__snapshots__/Stories.test.ts.snap        | 3932 +++++++++++------
 8 files changed, 2560 insertions(+), 1495 deletions(-)

diff --git a/src/components/ButtonWithSelect/ButtonWithSelect.tsx b/src/components/ButtonWithSelect/ButtonWithSelect.tsx
index 71610c8e8..8e507ee69 100644
--- a/src/components/ButtonWithSelect/ButtonWithSelect.tsx
+++ b/src/components/ButtonWithSelect/ButtonWithSelect.tsx
@@ -68,7 +68,9 @@ export const ButtonWithSelect: React.FC<ButtonWithSelectProps> = ({
         aria-label="button with select"
         {...props}
       >
-        <Button onClick={onClick}>{children}</Button>
+        <Button onClick={onClick} style={{ width: "100%" }}>
+          {children}
+        </Button>
         {options.length > 0 && (
           <Button
             color="primary"
diff --git a/src/components/ExtendedPageHeader/ExtendedPageHeader.tsx b/src/components/ExtendedPageHeader/ExtendedPageHeader.tsx
index 6c4dacfd4..2c270bcec 100644
--- a/src/components/ExtendedPageHeader/ExtendedPageHeader.tsx
+++ b/src/components/ExtendedPageHeader/ExtendedPageHeader.tsx
@@ -6,10 +6,7 @@ import React from "react";
 const useStyles = makeStyles(
   theme => ({
     action: {
-      flex: "0 0 auto",
-      [theme.breakpoints.down("sm")]: {
-        marginTop: theme.spacing()
-      }
+      flex: "0 0 auto"
     },
     block: {
       [theme.breakpoints.down("xs")]: {
@@ -41,9 +38,12 @@ const useStyles = makeStyles(
       display: "flex",
       marginBottom: theme.spacing(2)
     },
-    title: {
+    titleRow: {
       flex: 1,
-      paddingBottom: theme.spacing(2)
+      display: "flex",
+      flexDirection: "row",
+      alignItems: "center",
+      justifyContent: "space-between"
     }
   }),
   {
@@ -83,7 +83,7 @@ const ExtendedPageHeader: React.FC<ExtendedPageHeaderProps> = props => {
           [classes.underline]: underline
         })}
       >
-        {title}
+        <div className={classes.titleRow}>{title}</div>
         <div className={classNames(classes.action, childrenWrapperClassName)}>
           {children}
         </div>
diff --git a/src/components/PageHeader/PageHeader.tsx b/src/components/PageHeader/PageHeader.tsx
index 0ed2829e2..8b90c7bd5 100644
--- a/src/components/PageHeader/PageHeader.tsx
+++ b/src/components/PageHeader/PageHeader.tsx
@@ -27,11 +27,9 @@ const useStyles = makeStyles(
     title: {
       [theme.breakpoints.down("sm")]: {
         fontSize: 20,
-        marginTop: theme.spacing(2),
         padding: 0
       },
       fontWeight: 700,
-      alignSelf: "flex-start",
       flex: 1,
       whiteSpace: "nowrap",
       overflow: "hidden",
@@ -48,10 +46,19 @@ interface PageHeaderProps {
   underline?: boolean;
   limitText?: string;
   title?: React.ReactNode;
+  cardMenu?: React.ReactNode;
 }
 
 const PageHeader: React.FC<PageHeaderProps> = props => {
-  const { children, className, inline, underline, limitText, title } = props;
+  const {
+    children,
+    className,
+    inline,
+    underline,
+    limitText,
+    title,
+    cardMenu
+  } = props;
 
   const classes = useStyles(props);
 
@@ -62,9 +69,16 @@ const PageHeader: React.FC<PageHeaderProps> = props => {
       inline={inline}
       underline={underline}
       title={
-        <Typography className={classes.title} variant="h1">
-          {title !== undefined ? title : <Skeleton style={{ width: "10em" }} />}
-        </Typography>
+        <>
+          <Typography className={classes.title} variant="h1">
+            {title !== undefined ? (
+              title
+            ) : (
+              <Skeleton style={{ width: "10em" }} />
+            )}
+          </Typography>
+          {cardMenu}
+        </>
       }
     >
       <div className={classes.root}>
diff --git a/src/giftCards/GiftCardsList/GiftCardsListHeader/GiftCardsListHeader.tsx b/src/giftCards/GiftCardsList/GiftCardsListHeader/GiftCardsListHeader.tsx
index 994987fcf..594f4497c 100644
--- a/src/giftCards/GiftCardsList/GiftCardsListHeader/GiftCardsListHeader.tsx
+++ b/src/giftCards/GiftCardsList/GiftCardsListHeader/GiftCardsListHeader.tsx
@@ -1,5 +1,4 @@
 import HorizontalSpacer from "@saleor/apps/components/HorizontalSpacer";
-import VerticalSpacer from "@saleor/apps/components/VerticalSpacer";
 import CardMenu, { CardMenuItem } from "@saleor/components/CardMenu";
 import PageHeader from "@saleor/components/PageHeader";
 import useNavigator from "@saleor/hooks/useNavigator";
@@ -45,8 +44,10 @@ const GiftCardsListHeader: React.FC = () => {
 
   return (
     <>
-      <PageHeader title={intl.formatMessage(sectionNames.giftCards)}>
-        <CardMenu menuItems={menuItems} data-test="menu" />
+      <PageHeader
+        title={intl.formatMessage(sectionNames.giftCards)}
+        cardMenu={<CardMenu menuItems={menuItems} data-test="menu" />}
+      >
         <HorizontalSpacer spacing={2} />
         <Button
           variant="primary"
@@ -57,7 +58,6 @@ const GiftCardsListHeader: React.FC = () => {
         </Button>
       </PageHeader>
       <GiftCardsListHeaderAlert />
-      <VerticalSpacer spacing={2} />
     </>
   );
 };
diff --git a/src/orders/components/OrderDetailsPage/OrderDetailsPage.tsx b/src/orders/components/OrderDetailsPage/OrderDetailsPage.tsx
index 2372d4db1..94c9c5eb3 100644
--- a/src/orders/components/OrderDetailsPage/OrderDetailsPage.tsx
+++ b/src/orders/components/OrderDetailsPage/OrderDetailsPage.tsx
@@ -229,9 +229,8 @@ const OrderDetailsPage: React.FC<OrderDetailsPageProps> = props => {
                   <OrderStatusChip order={order} />
                 </PageTitleWithStatusChip>
               }
-            >
-              <CardMenu outlined menuItems={selectCardMenuItems} />
-            </PageHeader>
+              cardMenu={<CardMenu outlined menuItems={selectCardMenuItems} />}
+            />
             <div className={classes.date}>
               {order && order.created ? (
                 <Typography variant="body2">
diff --git a/src/orders/components/OrderListPage/OrderListPage.tsx b/src/orders/components/OrderListPage/OrderListPage.tsx
index c69537bbc..4493da85a 100644
--- a/src/orders/components/OrderListPage/OrderListPage.tsx
+++ b/src/orders/components/OrderListPage/OrderListPage.tsx
@@ -77,21 +77,23 @@ const OrderListPage: React.FC<OrderListPageProps> = ({
             }
           )
         }
+        cardMenu={
+          !!onSettingsOpen && (
+            <CardMenu
+              className={classes.settings}
+              menuItems={[
+                {
+                  label: intl.formatMessage({
+                    defaultMessage: "Order Settings",
+                    description: "button"
+                  }),
+                  onSelect: onSettingsOpen
+                }
+              ]}
+            />
+          )
+        }
       >
-        {!!onSettingsOpen && (
-          <CardMenu
-            className={classes.settings}
-            menuItems={[
-              {
-                label: intl.formatMessage({
-                  defaultMessage: "Order Settings",
-                  description: "button"
-                }),
-                onSelect: onSettingsOpen
-              }
-            ]}
-          />
-        )}
         <Button
           disabled={limitsReached}
           variant="primary"
diff --git a/src/products/components/ProductListPage/ProductListPage.tsx b/src/products/components/ProductListPage/ProductListPage.tsx
index 11fdec4ca..2556824fa 100644
--- a/src/products/components/ProductListPage/ProductListPage.tsx
+++ b/src/products/components/ProductListPage/ProductListPage.tsx
@@ -71,7 +71,9 @@ const useStyles = makeStyles(
       }
     },
     settings: {
-      marginRight: theme.spacing(2)
+      [theme.breakpoints.up("sm")]: {
+        marginRight: theme.spacing(2)
+      }
     }
   }),
   { name: "ProductListPage" }
@@ -148,6 +150,23 @@ export const ProductListPage: React.FC<ProductListPageProps> = props => {
   return (
     <Container>
       <PageHeader
+        cardMenu={
+          <CardMenu
+            className={classes.settings}
+            menuItems={[
+              {
+                label: intl.formatMessage({
+                  defaultMessage: "Export Products",
+                  description: "export products to csv file, button"
+                }),
+                onSelect: onExport,
+                testId: "export"
+              },
+              ...extensionMenuItems
+            ]}
+            data-test="menu"
+          />
+        }
         title={intl.formatMessage(sectionNames.products)}
         limitText={
           hasLimits(limits, "productVariants") &&
@@ -163,21 +182,6 @@ export const ProductListPage: React.FC<ProductListPageProps> = props => {
           )
         }
       >
-        <CardMenu
-          className={classes.settings}
-          menuItems={[
-            {
-              label: intl.formatMessage({
-                defaultMessage: "Export Products",
-                description: "export products to csv file, button"
-              }),
-              onSelect: onExport,
-              testId: "export"
-            },
-            ...extensionMenuItems
-          ]}
-          data-test="menu"
-        />
         <ColumnPicker
           className={classes.columnPicker}
           columns={columns}
diff --git a/src/storybook/__snapshots__/Stories.test.ts.snap b/src/storybook/__snapshots__/Stories.test.ts.snap
index ea706f679..89badf2f1 100644
--- a/src/storybook/__snapshots__/Stories.test.ts.snap
+++ b/src/storybook/__snapshots__/Stories.test.ts.snap
@@ -12291,9 +12291,13 @@ exports[`Storyshots Generics / PageHeader with title 1`] = `
     data-test-id="page-header"
   >
     <div
-      class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+      class="ExtendedPageHeader-titleRow-id"
     >
-      Lorem ipsum
+      <div
+        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+      >
+        Lorem ipsum
+      </div>
     </div>
     <div
       class="ExtendedPageHeader-action-id"
@@ -12315,9 +12319,13 @@ exports[`Storyshots Generics / PageHeader with title icon bar 1`] = `
     data-test-id="page-header"
   >
     <div
-      class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+      class="ExtendedPageHeader-titleRow-id"
     >
-      Lorem ipsum
+      <div
+        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+      >
+        Lorem ipsum
+      </div>
     </div>
     <div
       class="ExtendedPageHeader-action-id"
@@ -12363,15 +12371,19 @@ exports[`Storyshots Generics / PageHeader without title 1`] = `
     data-test-id="page-header"
   >
     <div
-      class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+      class="ExtendedPageHeader-titleRow-id"
     >
-      <span
-        class="Skeleton-skeleton-id"
-        data-test-id="skeleton"
-        style="width:10em"
+      <div
+        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
       >
-        ‌
-      </span>
+        <span
+          class="Skeleton-skeleton-id"
+          data-test-id="skeleton"
+          style="width:10em"
+        >
+          ‌
+        </span>
+      </div>
     </div>
     <div
       class="ExtendedPageHeader-action-id"
@@ -20372,9 +20384,13 @@ exports[`Storyshots Shipping / ShippingZoneRatesCreatePage page create price 1`]
         data-test-id="page-header"
       >
         <div
-          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          class="ExtendedPageHeader-titleRow-id"
         >
-          Price Rate Create
+          <div
+            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          >
+            Price Rate Create
+          </div>
         </div>
         <div
           class="ExtendedPageHeader-action-id"
@@ -21281,9 +21297,13 @@ exports[`Storyshots Shipping / ShippingZoneRatesCreatePage page create weight 1`
         data-test-id="page-header"
       >
         <div
-          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          class="ExtendedPageHeader-titleRow-id"
         >
-          Weight Rate Create
+          <div
+            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          >
+            Weight Rate Create
+          </div>
         </div>
         <div
           class="ExtendedPageHeader-action-id"
@@ -22200,9 +22220,13 @@ exports[`Storyshots Shipping / ShippingZoneRatesCreatePage page loading 1`] = `
         data-test-id="page-header"
       >
         <div
-          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          class="ExtendedPageHeader-titleRow-id"
         >
-          Price Rate Create
+          <div
+            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          >
+            Price Rate Create
+          </div>
         </div>
         <div
           class="ExtendedPageHeader-action-id"
@@ -23842,9 +23866,13 @@ exports[`Storyshots Views / Apps / App details default 1`] = `
       data-test-id="page-header"
     >
       <div
-        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+        class="ExtendedPageHeader-titleRow-id"
       >
-        app1 
+        <div
+          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+        >
+          app1 
+        </div>
       </div>
       <div
         class="ExtendedPageHeader-action-id"
@@ -24025,9 +24053,13 @@ exports[`Storyshots Views / Apps / App details loading 1`] = `
       data-test-id="page-header"
     >
       <div
-        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+        class="ExtendedPageHeader-titleRow-id"
       >
-        app1 
+        <div
+          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+        >
+          app1 
+        </div>
       </div>
       <div
         class="ExtendedPageHeader-action-id"
@@ -24278,9 +24310,13 @@ exports[`Storyshots Views / Apps / Apps list default 1`] = `
       data-test-id="page-header"
     >
       <div
-        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+        class="ExtendedPageHeader-titleRow-id"
       >
-        Apps
+        <div
+          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+        >
+          Apps
+        </div>
       </div>
       <div
         class="ExtendedPageHeader-action-id"
@@ -24784,9 +24820,13 @@ exports[`Storyshots Views / Apps / Apps list loading 1`] = `
       data-test-id="page-header"
     >
       <div
-        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+        class="ExtendedPageHeader-titleRow-id"
       >
-        Apps
+        <div
+          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+        >
+          Apps
+        </div>
       </div>
       <div
         class="ExtendedPageHeader-action-id"
@@ -25023,9 +25063,13 @@ exports[`Storyshots Views / Apps / Apps list no data 1`] = `
       data-test-id="page-header"
     >
       <div
-        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+        class="ExtendedPageHeader-titleRow-id"
       >
-        Apps
+        <div
+          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+        >
+          Apps
+        </div>
       </div>
       <div
         class="ExtendedPageHeader-action-id"
@@ -25573,9 +25617,13 @@ exports[`Storyshots Views / Apps / Webhooks / Webhook details default 1`] = `
         data-test-id="page-header"
       >
         <div
-          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          class="ExtendedPageHeader-titleRow-id"
         >
-          Webhook Test 2 Details
+          <div
+            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          >
+            Webhook Test 2 Details
+          </div>
         </div>
         <div
           class="ExtendedPageHeader-action-id"
@@ -26030,9 +26078,13 @@ exports[`Storyshots Views / Apps / Webhooks / Webhook details form errors 1`] =
         data-test-id="page-header"
       >
         <div
-          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          class="ExtendedPageHeader-titleRow-id"
         >
-          Webhook Test 2 Details
+          <div
+            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          >
+            Webhook Test 2 Details
+          </div>
         </div>
         <div
           class="ExtendedPageHeader-action-id"
@@ -26492,9 +26544,13 @@ exports[`Storyshots Views / Apps / Webhooks / Webhook details loading 1`] = `
         data-test-id="page-header"
       >
         <div
-          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          class="ExtendedPageHeader-titleRow-id"
         >
-          Create Webhook
+          <div
+            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          >
+            Create Webhook
+          </div>
         </div>
         <div
           class="ExtendedPageHeader-action-id"
@@ -26943,9 +26999,13 @@ exports[`Storyshots Views / Apps / Webhooks / Webhook details undefined 1`] = `
         data-test-id="page-header"
       >
         <div
-          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          class="ExtendedPageHeader-titleRow-id"
         >
-          Create Webhook
+          <div
+            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          >
+            Create Webhook
+          </div>
         </div>
         <div
           class="ExtendedPageHeader-action-id"
@@ -27389,9 +27449,13 @@ exports[`Storyshots Views / Apps / Webhooks / Webhook details unnamed 1`] = `
         data-test-id="page-header"
       >
         <div
-          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          class="ExtendedPageHeader-titleRow-id"
         >
-          Unnamed Webhook Details
+          <div
+            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          >
+            Unnamed Webhook Details
+          </div>
         </div>
         <div
           class="ExtendedPageHeader-action-id"
@@ -27846,9 +27910,13 @@ exports[`Storyshots Views / Attributes / Attribute details create 1`] = `
         data-test-id="page-header"
       >
         <div
-          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          class="ExtendedPageHeader-titleRow-id"
         >
-          Create New Attribute
+          <div
+            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          >
+            Create New Attribute
+          </div>
         </div>
         <div
           class="ExtendedPageHeader-action-id"
@@ -28929,9 +28997,13 @@ exports[`Storyshots Views / Attributes / Attribute details default 1`] = `
         data-test-id="page-header"
       >
         <div
-          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          class="ExtendedPageHeader-titleRow-id"
         >
-          Author
+          <div
+            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          >
+            Author
+          </div>
         </div>
         <div
           class="ExtendedPageHeader-action-id"
@@ -30043,9 +30115,13 @@ exports[`Storyshots Views / Attributes / Attribute details form errors 1`] = `
         data-test-id="page-header"
       >
         <div
-          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          class="ExtendedPageHeader-titleRow-id"
         >
-          Author
+          <div
+            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          >
+            Author
+          </div>
         </div>
         <div
           class="ExtendedPageHeader-action-id"
@@ -31167,15 +31243,19 @@ exports[`Storyshots Views / Attributes / Attribute details loading 1`] = `
         data-test-id="page-header"
       >
         <div
-          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          class="ExtendedPageHeader-titleRow-id"
         >
-          <span
-            class="Skeleton-skeleton-id"
-            data-test-id="skeleton"
-            style="width:10em"
+          <div
+            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
           >
-            ‌
-          </span>
+            <span
+              class="Skeleton-skeleton-id"
+              data-test-id="skeleton"
+              style="width:10em"
+            >
+              ‌
+            </span>
+          </div>
         </div>
         <div
           class="ExtendedPageHeader-action-id"
@@ -32087,9 +32167,13 @@ exports[`Storyshots Views / Attributes / Attribute details multiple select input
         data-test-id="page-header"
       >
         <div
-          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          class="ExtendedPageHeader-titleRow-id"
         >
-          Author
+          <div
+            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          >
+            Author
+          </div>
         </div>
         <div
           class="ExtendedPageHeader-action-id"
@@ -33201,9 +33285,13 @@ exports[`Storyshots Views / Attributes / Attribute details no values 1`] = `
         data-test-id="page-header"
       >
         <div
-          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          class="ExtendedPageHeader-titleRow-id"
         >
-          Author
+          <div
+            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          >
+            Author
+          </div>
         </div>
         <div
           class="ExtendedPageHeader-action-id"
@@ -34270,9 +34358,13 @@ exports[`Storyshots Views / Attributes / Attribute list default 1`] = `
       data-test-id="page-header"
     >
       <div
-        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+        class="ExtendedPageHeader-titleRow-id"
       >
-        Attributes
+        <div
+          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+        >
+          Attributes
+        </div>
       </div>
       <div
         class="ExtendedPageHeader-action-id"
@@ -35520,9 +35612,13 @@ exports[`Storyshots Views / Attributes / Attribute list loading 1`] = `
       data-test-id="page-header"
     >
       <div
-        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+        class="ExtendedPageHeader-titleRow-id"
       >
-        Attributes
+        <div
+          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+        >
+          Attributes
+        </div>
       </div>
       <div
         class="ExtendedPageHeader-action-id"
@@ -35960,9 +36056,13 @@ exports[`Storyshots Views / Attributes / Attribute list no data 1`] = `
       data-test-id="page-header"
     >
       <div
-        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+        class="ExtendedPageHeader-titleRow-id"
       >
-        Attributes
+        <div
+          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+        >
+          Attributes
+        </div>
       </div>
       <div
         class="ExtendedPageHeader-action-id"
@@ -37765,9 +37865,13 @@ exports[`Storyshots Views / Categories / Category list default 1`] = `
       data-test-id="page-header"
     >
       <div
-        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+        class="ExtendedPageHeader-titleRow-id"
       >
-        Categories
+        <div
+          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+        >
+          Categories
+        </div>
       </div>
       <div
         class="ExtendedPageHeader-action-id"
@@ -38426,9 +38530,13 @@ exports[`Storyshots Views / Categories / Category list empty 1`] = `
       data-test-id="page-header"
     >
       <div
-        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+        class="ExtendedPageHeader-titleRow-id"
       >
-        Categories
+        <div
+          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+        >
+          Categories
+        </div>
       </div>
       <div
         class="ExtendedPageHeader-action-id"
@@ -38705,9 +38813,13 @@ exports[`Storyshots Views / Categories / Category list loading 1`] = `
       data-test-id="page-header"
     >
       <div
-        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+        class="ExtendedPageHeader-titleRow-id"
       >
-        Categories
+        <div
+          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+        >
+          Categories
+        </div>
       </div>
       <div
         class="ExtendedPageHeader-action-id"
@@ -39086,9 +39198,13 @@ exports[`Storyshots Views / Categories / Create category When loading 1`] = `
         data-test-id="page-header"
       >
         <div
-          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          class="ExtendedPageHeader-titleRow-id"
         >
-          Create New Category
+          <div
+            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          >
+            Create New Category
+          </div>
         </div>
         <div
           class="ExtendedPageHeader-action-id"
@@ -39399,9 +39515,13 @@ exports[`Storyshots Views / Categories / Create category default 1`] = `
         data-test-id="page-header"
       >
         <div
-          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          class="ExtendedPageHeader-titleRow-id"
         >
-          Create New Category
+          <div
+            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          >
+            Create New Category
+          </div>
         </div>
         <div
           class="ExtendedPageHeader-action-id"
@@ -39711,9 +39831,13 @@ exports[`Storyshots Views / Categories / Create category form errors 1`] = `
         data-test-id="page-header"
       >
         <div
-          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          class="ExtendedPageHeader-titleRow-id"
         >
-          Create New Category
+          <div
+            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          >
+            Create New Category
+          </div>
         </div>
         <div
           class="ExtendedPageHeader-action-id"
@@ -40030,9 +40154,13 @@ exports[`Storyshots Views / Categories / Update category default 1`] = `
         data-test-id="page-header"
       >
         <div
-          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          class="ExtendedPageHeader-titleRow-id"
         >
-          Coffees
+          <div
+            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          >
+            Coffees
+          </div>
         </div>
         <div
           class="ExtendedPageHeader-action-id"
@@ -40800,9 +40928,13 @@ exports[`Storyshots Views / Categories / Update category form errors 1`] = `
         data-test-id="page-header"
       >
         <div
-          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          class="ExtendedPageHeader-titleRow-id"
         >
-          Coffees
+          <div
+            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          >
+            Coffees
+          </div>
         </div>
         <div
           class="ExtendedPageHeader-action-id"
@@ -41577,15 +41709,19 @@ exports[`Storyshots Views / Categories / Update category loading 1`] = `
         data-test-id="page-header"
       >
         <div
-          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          class="ExtendedPageHeader-titleRow-id"
         >
-          <span
-            class="Skeleton-skeleton-id"
-            data-test-id="skeleton"
-            style="width:10em"
+          <div
+            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
           >
-            ‌
-          </span>
+            <span
+              class="Skeleton-skeleton-id"
+              data-test-id="skeleton"
+              style="width:10em"
+            >
+              ‌
+            </span>
+          </div>
         </div>
         <div
           class="ExtendedPageHeader-action-id"
@@ -42208,9 +42344,13 @@ exports[`Storyshots Views / Categories / Update category no background 1`] = `
         data-test-id="page-header"
       >
         <div
-          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          class="ExtendedPageHeader-titleRow-id"
         >
-          Coffees
+          <div
+            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          >
+            Coffees
+          </div>
         </div>
         <div
           class="ExtendedPageHeader-action-id"
@@ -42916,9 +43056,13 @@ exports[`Storyshots Views / Categories / Update category no products 1`] = `
         data-test-id="page-header"
       >
         <div
-          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          class="ExtendedPageHeader-titleRow-id"
         >
-          Coffees
+          <div
+            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          >
+            Coffees
+          </div>
         </div>
         <div
           class="ExtendedPageHeader-action-id"
@@ -43688,9 +43832,13 @@ exports[`Storyshots Views / Categories / Update category no subcategories 1`] =
         data-test-id="page-header"
       >
         <div
-          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          class="ExtendedPageHeader-titleRow-id"
         >
-          Coffees
+          <div
+            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          >
+            Coffees
+          </div>
         </div>
         <div
           class="ExtendedPageHeader-action-id"
@@ -44458,9 +44606,13 @@ exports[`Storyshots Views / Categories / Update category products 1`] = `
         data-test-id="page-header"
       >
         <div
-          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          class="ExtendedPageHeader-titleRow-id"
         >
-          Coffees
+          <div
+            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          >
+            Coffees
+          </div>
         </div>
         <div
           class="ExtendedPageHeader-action-id"
@@ -49542,9 +49694,13 @@ exports[`Storyshots Views / Channels / Channels list default 1`] = `
       data-test-id="page-header"
     >
       <div
-        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+        class="ExtendedPageHeader-titleRow-id"
       >
-        Channels
+        <div
+          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+        >
+          Channels
+        </div>
       </div>
       <div
         class="ExtendedPageHeader-action-id"
@@ -49891,9 +50047,13 @@ exports[`Storyshots Views / Channels / Channels list empty 1`] = `
       data-test-id="page-header"
     >
       <div
-        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+        class="ExtendedPageHeader-titleRow-id"
       >
-        Channels
+        <div
+          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+        >
+          Channels
+        </div>
       </div>
       <div
         class="ExtendedPageHeader-action-id"
@@ -49991,9 +50151,13 @@ exports[`Storyshots Views / Channels / Channels list limits reached 1`] = `
       data-test-id="page-header"
     >
       <div
-        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+        class="ExtendedPageHeader-titleRow-id"
       >
-        Channels
+        <div
+          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+        >
+          Channels
+        </div>
       </div>
       <div
         class="ExtendedPageHeader-action-id"
@@ -50420,9 +50584,13 @@ exports[`Storyshots Views / Channels / Channels list no limits 1`] = `
       data-test-id="page-header"
     >
       <div
-        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+        class="ExtendedPageHeader-titleRow-id"
       >
-        Channels
+        <div
+          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+        >
+          Channels
+        </div>
       </div>
       <div
         class="ExtendedPageHeader-action-id"
@@ -50783,9 +50951,13 @@ exports[`Storyshots Views / Collections / Collection detailsCollection details d
         data-test-id="page-header"
       >
         <div
-          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          class="ExtendedPageHeader-titleRow-id"
         >
-          Summer collection
+          <div
+            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          >
+            Summer collection
+          </div>
         </div>
         <div
           class="ExtendedPageHeader-action-id"
@@ -52278,9 +52450,13 @@ exports[`Storyshots Views / Collections / Collection detailsCollection details f
         data-test-id="page-header"
       >
         <div
-          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          class="ExtendedPageHeader-titleRow-id"
         >
-          Summer collection
+          <div
+            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          >
+            Summer collection
+          </div>
         </div>
         <div
           class="ExtendedPageHeader-action-id"
@@ -53780,15 +53956,19 @@ exports[`Storyshots Views / Collections / Collection detailsCollection details l
         data-test-id="page-header"
       >
         <div
-          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          class="ExtendedPageHeader-titleRow-id"
         >
-          <span
-            class="Skeleton-skeleton-id"
-            data-test-id="skeleton"
-            style="width:10em"
+          <div
+            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
           >
-            ‌
-          </span>
+            <span
+              class="Skeleton-skeleton-id"
+              data-test-id="skeleton"
+              style="width:10em"
+            >
+              ‌
+            </span>
+          </div>
         </div>
         <div
           class="ExtendedPageHeader-action-id"
@@ -54680,9 +54860,13 @@ exports[`Storyshots Views / Collections / Collection detailsCollection details n
         data-test-id="page-header"
       >
         <div
-          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          class="ExtendedPageHeader-titleRow-id"
         >
-          Summer collection
+          <div
+            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          >
+            Summer collection
+          </div>
         </div>
         <div
           class="ExtendedPageHeader-action-id"
@@ -55666,9 +55850,13 @@ exports[`Storyshots Views / Collections / Collection list default 1`] = `
       data-test-id="page-header"
     >
       <div
-        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+        class="ExtendedPageHeader-titleRow-id"
       >
-        Collections
+        <div
+          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+        >
+          Collections
+        </div>
       </div>
       <div
         class="ExtendedPageHeader-action-id"
@@ -56483,9 +56671,13 @@ exports[`Storyshots Views / Collections / Collection list loading 1`] = `
       data-test-id="page-header"
     >
       <div
-        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+        class="ExtendedPageHeader-titleRow-id"
       >
-        Collections
+        <div
+          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+        >
+          Collections
+        </div>
       </div>
       <div
         class="ExtendedPageHeader-action-id"
@@ -56885,9 +57077,13 @@ exports[`Storyshots Views / Collections / Collection list no data 1`] = `
       data-test-id="page-header"
     >
       <div
-        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+        class="ExtendedPageHeader-titleRow-id"
       >
-        Collections
+        <div
+          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+        >
+          Collections
+        </div>
       </div>
       <div
         class="ExtendedPageHeader-action-id"
@@ -57179,9 +57375,13 @@ exports[`Storyshots Views / Collections / Create collection default 1`] = `
         data-test-id="page-header"
       >
         <div
-          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          class="ExtendedPageHeader-titleRow-id"
         >
-          Add Collection
+          <div
+            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          >
+            Add Collection
+          </div>
         </div>
         <div
           class="ExtendedPageHeader-action-id"
@@ -59074,9 +59274,13 @@ exports[`Storyshots Views / Collections / Create collection form errors 1`] = `
         data-test-id="page-header"
       >
         <div
-          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          class="ExtendedPageHeader-titleRow-id"
         >
-          Add Collection
+          <div
+            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          >
+            Add Collection
+          </div>
         </div>
         <div
           class="ExtendedPageHeader-action-id"
@@ -60976,9 +61180,13 @@ exports[`Storyshots Views / Collections / Create collection loading 1`] = `
         data-test-id="page-header"
       >
         <div
-          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          class="ExtendedPageHeader-titleRow-id"
         >
-          Add Collection
+          <div
+            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          >
+            Add Collection
+          </div>
         </div>
         <div
           class="ExtendedPageHeader-action-id"
@@ -62885,9 +63093,13 @@ exports[`Storyshots Views / Configuration default 1`] = `
       data-test-id="page-header"
     >
       <div
-        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+        class="ExtendedPageHeader-titleRow-id"
       >
-        Configuration
+        <div
+          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+        >
+          Configuration
+        </div>
       </div>
       <div
         class="ExtendedPageHeader-action-id"
@@ -63577,9 +63789,13 @@ exports[`Storyshots Views / Configuration partial access 1`] = `
       data-test-id="page-header"
     >
       <div
-        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+        class="ExtendedPageHeader-titleRow-id"
       >
-        Configuration
+        <div
+          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+        >
+          Configuration
+        </div>
       </div>
       <div
         class="ExtendedPageHeader-action-id"
@@ -63852,9 +64068,13 @@ exports[`Storyshots Views / Customers / Address Book default 1`] = `
       data-test-id="page-header"
     >
       <div
-        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+        class="ExtendedPageHeader-titleRow-id"
       >
-        Tom Cooper's Address Book
+        <div
+          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+        >
+          Tom Cooper's Address Book
+        </div>
       </div>
       <div
         class="ExtendedPageHeader-action-id"
@@ -64054,9 +64274,13 @@ exports[`Storyshots Views / Customers / Address Book loading 1`] = `
       data-test-id="page-header"
     >
       <div
-        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+        class="ExtendedPageHeader-titleRow-id"
       >
-        ...'s Address Book
+        <div
+          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+        >
+          ...'s Address Book
+        </div>
       </div>
       <div
         class="ExtendedPageHeader-action-id"
@@ -64198,9 +64422,13 @@ exports[`Storyshots Views / Customers / Create customer default 1`] = `
         data-test-id="page-header"
       >
         <div
-          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          class="ExtendedPageHeader-titleRow-id"
         >
-          Create Customer
+          <div
+            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          >
+            Create Customer
+          </div>
         </div>
         <div
           class="ExtendedPageHeader-action-id"
@@ -64873,9 +65101,13 @@ exports[`Storyshots Views / Customers / Create customer form errors 1`] = `
         data-test-id="page-header"
       >
         <div
-          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          class="ExtendedPageHeader-titleRow-id"
         >
-          Create Customer
+          <div
+            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          >
+            Create Customer
+          </div>
         </div>
         <div
           class="ExtendedPageHeader-action-id"
@@ -65608,9 +65840,13 @@ exports[`Storyshots Views / Customers / Create customer loading 1`] = `
         data-test-id="page-header"
       >
         <div
-          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          class="ExtendedPageHeader-titleRow-id"
         >
-          Create Customer
+          <div
+            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          >
+            Create Customer
+          </div>
         </div>
         <div
           class="ExtendedPageHeader-action-id"
@@ -66297,9 +66533,13 @@ exports[`Storyshots Views / Customers / Customer details default 1`] = `
         data-test-id="page-header"
       >
         <div
-          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          class="ExtendedPageHeader-titleRow-id"
         >
-          Tom Cooper
+          <div
+            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          >
+            Tom Cooper
+          </div>
         </div>
         <div
           class="ExtendedPageHeader-action-id"
@@ -67055,9 +67295,13 @@ exports[`Storyshots Views / Customers / Customer details different addresses 1`]
         data-test-id="page-header"
       >
         <div
-          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          class="ExtendedPageHeader-titleRow-id"
         >
-          Tom Cooper
+          <div
+            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          >
+            Tom Cooper
+          </div>
         </div>
         <div
           class="ExtendedPageHeader-action-id"
@@ -67853,9 +68097,13 @@ exports[`Storyshots Views / Customers / Customer details form errors 1`] = `
         data-test-id="page-header"
       >
         <div
-          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          class="ExtendedPageHeader-titleRow-id"
         >
-          Tom Cooper
+          <div
+            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          >
+            Tom Cooper
+          </div>
         </div>
         <div
           class="ExtendedPageHeader-action-id"
@@ -68626,15 +68874,19 @@ exports[`Storyshots Views / Customers / Customer details loading 1`] = `
         data-test-id="page-header"
       >
         <div
-          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          class="ExtendedPageHeader-titleRow-id"
         >
-          <span
-            class="Skeleton-skeleton-id"
-            data-test-id="skeleton"
-            style="width:10em"
+          <div
+            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
           >
-            ‌
-          </span>
+            <span
+              class="Skeleton-skeleton-id"
+              data-test-id="skeleton"
+              style="width:10em"
+            >
+              ‌
+            </span>
+          </div>
         </div>
         <div
           class="ExtendedPageHeader-action-id"
@@ -69319,9 +69571,13 @@ exports[`Storyshots Views / Customers / Customer details never logged 1`] = `
         data-test-id="page-header"
       >
         <div
-          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          class="ExtendedPageHeader-titleRow-id"
         >
-          Tom Cooper
+          <div
+            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          >
+            Tom Cooper
+          </div>
         </div>
         <div
           class="ExtendedPageHeader-action-id"
@@ -70071,9 +70327,13 @@ exports[`Storyshots Views / Customers / Customer details never placed order 1`]
         data-test-id="page-header"
       >
         <div
-          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          class="ExtendedPageHeader-titleRow-id"
         >
-          Tom Cooper
+          <div
+            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          >
+            Tom Cooper
+          </div>
         </div>
         <div
           class="ExtendedPageHeader-action-id"
@@ -70823,9 +71083,13 @@ exports[`Storyshots Views / Customers / Customer details no address at all 1`] =
         data-test-id="page-header"
       >
         <div
-          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          class="ExtendedPageHeader-titleRow-id"
         >
-          Tom Cooper
+          <div
+            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          >
+            Tom Cooper
+          </div>
         </div>
         <div
           class="ExtendedPageHeader-action-id"
@@ -71553,9 +71817,13 @@ exports[`Storyshots Views / Customers / Customer details no default billing addr
         data-test-id="page-header"
       >
         <div
-          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          class="ExtendedPageHeader-titleRow-id"
         >
-          Tom Cooper
+          <div
+            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          >
+            Tom Cooper
+          </div>
         </div>
         <div
           class="ExtendedPageHeader-action-id"
@@ -72311,9 +72579,13 @@ exports[`Storyshots Views / Customers / Customer details no default shipping add
         data-test-id="page-header"
       >
         <div
-          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          class="ExtendedPageHeader-titleRow-id"
         >
-          Tom Cooper
+          <div
+            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          >
+            Tom Cooper
+          </div>
         </div>
         <div
           class="ExtendedPageHeader-action-id"
@@ -73068,9 +73340,13 @@ exports[`Storyshots Views / Customers / Customer list default 1`] = `
       data-test-id="page-header"
     >
       <div
-        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+        class="ExtendedPageHeader-titleRow-id"
       >
-        Customers
+        <div
+          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+        >
+          Customers
+        </div>
       </div>
       <div
         class="ExtendedPageHeader-action-id"
@@ -74733,9 +75009,13 @@ exports[`Storyshots Views / Customers / Customer list loading 1`] = `
       data-test-id="page-header"
     >
       <div
-        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+        class="ExtendedPageHeader-titleRow-id"
       >
-        Customers
+        <div
+          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+        >
+          Customers
+        </div>
       </div>
       <div
         class="ExtendedPageHeader-action-id"
@@ -75123,9 +75403,13 @@ exports[`Storyshots Views / Customers / Customer list no data 1`] = `
       data-test-id="page-header"
     >
       <div
-        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+        class="ExtendedPageHeader-titleRow-id"
       >
-        Customers
+        <div
+          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+        >
+          Customers
+        </div>
       </div>
       <div
         class="ExtendedPageHeader-action-id"
@@ -75417,9 +75701,13 @@ exports[`Storyshots Views / Discounts / Sale create default 1`] = `
         data-test-id="page-header"
       >
         <div
-          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          class="ExtendedPageHeader-titleRow-id"
         >
-          Create Sale
+          <div
+            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          >
+            Create Sale
+          </div>
         </div>
         <div
           class="ExtendedPageHeader-action-id"
@@ -76495,9 +76783,13 @@ exports[`Storyshots Views / Discounts / Sale create form errors 1`] = `
         data-test-id="page-header"
       >
         <div
-          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          class="ExtendedPageHeader-titleRow-id"
         >
-          Create Sale
+          <div
+            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          >
+            Create Sale
+          </div>
         </div>
         <div
           class="ExtendedPageHeader-action-id"
@@ -77588,9 +77880,13 @@ exports[`Storyshots Views / Discounts / Sale create loading 1`] = `
         data-test-id="page-header"
       >
         <div
-          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          class="ExtendedPageHeader-titleRow-id"
         >
-          Create Sale
+          <div
+            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          >
+            Create Sale
+          </div>
         </div>
         <div
           class="ExtendedPageHeader-action-id"
@@ -78680,9 +78976,13 @@ exports[`Storyshots Views / Discounts / Sale details collections 1`] = `
         data-test-id="page-header"
       >
         <div
-          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          class="ExtendedPageHeader-titleRow-id"
         >
-          Happy minute day!
+          <div
+            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          >
+            Happy minute day!
+          </div>
         </div>
         <div
           class="ExtendedPageHeader-action-id"
@@ -80122,9 +80422,13 @@ exports[`Storyshots Views / Discounts / Sale details default 1`] = `
         data-test-id="page-header"
       >
         <div
-          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          class="ExtendedPageHeader-titleRow-id"
         >
-          Happy minute day!
+          <div
+            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          >
+            Happy minute day!
+          </div>
         </div>
         <div
           class="ExtendedPageHeader-action-id"
@@ -81564,9 +81868,13 @@ exports[`Storyshots Views / Discounts / Sale details form errors 1`] = `
         data-test-id="page-header"
       >
         <div
-          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          class="ExtendedPageHeader-titleRow-id"
         >
-          Happy minute day!
+          <div
+            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          >
+            Happy minute day!
+          </div>
         </div>
         <div
           class="ExtendedPageHeader-action-id"
@@ -83021,15 +83329,19 @@ exports[`Storyshots Views / Discounts / Sale details loading 1`] = `
         data-test-id="page-header"
       >
         <div
-          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          class="ExtendedPageHeader-titleRow-id"
         >
-          <span
-            class="Skeleton-skeleton-id"
-            data-test-id="skeleton"
-            style="width:10em"
+          <div
+            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
           >
-            ‌
-          </span>
+            <span
+              class="Skeleton-skeleton-id"
+              data-test-id="skeleton"
+              style="width:10em"
+            >
+              ‌
+            </span>
+          </div>
         </div>
         <div
           class="ExtendedPageHeader-action-id"
@@ -84483,9 +84795,13 @@ exports[`Storyshots Views / Discounts / Sale details products 1`] = `
         data-test-id="page-header"
       >
         <div
-          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          class="ExtendedPageHeader-titleRow-id"
         >
-          Happy minute day!
+          <div
+            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          >
+            Happy minute day!
+          </div>
         </div>
         <div
           class="ExtendedPageHeader-action-id"
@@ -86344,9 +86660,13 @@ exports[`Storyshots Views / Discounts / Sale list default 1`] = `
       data-test-id="page-header"
     >
       <div
-        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+        class="ExtendedPageHeader-titleRow-id"
       >
-        Sales
+        <div
+          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+        >
+          Sales
+        </div>
       </div>
       <div
         class="ExtendedPageHeader-action-id"
@@ -87019,9 +87339,13 @@ exports[`Storyshots Views / Discounts / Sale list loading 1`] = `
       data-test-id="page-header"
     >
       <div
-        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+        class="ExtendedPageHeader-titleRow-id"
       >
-        Sales
+        <div
+          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+        >
+          Sales
+        </div>
       </div>
       <div
         class="ExtendedPageHeader-action-id"
@@ -87435,9 +87759,13 @@ exports[`Storyshots Views / Discounts / Sale list no channels 1`] = `
       data-test-id="page-header"
     >
       <div
-        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+        class="ExtendedPageHeader-titleRow-id"
       >
-        Sales
+        <div
+          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+        >
+          Sales
+        </div>
       </div>
       <div
         class="ExtendedPageHeader-action-id"
@@ -88105,9 +88433,13 @@ exports[`Storyshots Views / Discounts / Sale list no data 1`] = `
       data-test-id="page-header"
     >
       <div
-        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+        class="ExtendedPageHeader-titleRow-id"
       >
-        Sales
+        <div
+          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+        >
+          Sales
+        </div>
       </div>
       <div
         class="ExtendedPageHeader-action-id"
@@ -88413,9 +88745,13 @@ exports[`Storyshots Views / Discounts / Voucher create default 1`] = `
         data-test-id="page-header"
       >
         <div
-          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          class="ExtendedPageHeader-titleRow-id"
         >
-          Create Voucher
+          <div
+            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          >
+            Create Voucher
+          </div>
         </div>
         <div
           class="ExtendedPageHeader-action-id"
@@ -89969,9 +90305,13 @@ exports[`Storyshots Views / Discounts / Voucher create form errors 1`] = `
         data-test-id="page-header"
       >
         <div
-          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          class="ExtendedPageHeader-titleRow-id"
         >
-          Create Voucher
+          <div
+            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          >
+            Create Voucher
+          </div>
         </div>
         <div
           class="ExtendedPageHeader-action-id"
@@ -91545,9 +91885,13 @@ exports[`Storyshots Views / Discounts / Voucher details default 1`] = `
         data-test-id="page-header"
       >
         <div
-          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          class="ExtendedPageHeader-titleRow-id"
         >
-          DISCOUNT
+          <div
+            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          >
+            DISCOUNT
+          </div>
         </div>
         <div
           class="ExtendedPageHeader-action-id"
@@ -93867,9 +94211,13 @@ exports[`Storyshots Views / Discounts / Voucher details form errors 1`] = `
         data-test-id="page-header"
       >
         <div
-          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          class="ExtendedPageHeader-titleRow-id"
         >
-          DISCOUNT
+          <div
+            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          >
+            DISCOUNT
+          </div>
         </div>
         <div
           class="ExtendedPageHeader-action-id"
@@ -96214,15 +96562,19 @@ exports[`Storyshots Views / Discounts / Voucher details loading 1`] = `
         data-test-id="page-header"
       >
         <div
-          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          class="ExtendedPageHeader-titleRow-id"
         >
-          <span
-            class="Skeleton-skeleton-id"
-            data-test-id="skeleton"
-            style="width:10em"
+          <div
+            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
           >
-            ‌
-          </span>
+            <span
+              class="Skeleton-skeleton-id"
+              data-test-id="skeleton"
+              style="width:10em"
+            >
+              ‌
+            </span>
+          </div>
         </div>
         <div
           class="ExtendedPageHeader-action-id"
@@ -98094,9 +98446,13 @@ exports[`Storyshots Views / Discounts / Voucher list default 1`] = `
       data-test-id="page-header"
     >
       <div
-        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+        class="ExtendedPageHeader-titleRow-id"
       >
-        Vouchers
+        <div
+          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+        >
+          Vouchers
+        </div>
       </div>
       <div
         class="ExtendedPageHeader-action-id"
@@ -98626,9 +98982,13 @@ exports[`Storyshots Views / Discounts / Voucher list loading 1`] = `
       data-test-id="page-header"
     >
       <div
-        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+        class="ExtendedPageHeader-titleRow-id"
       >
-        Vouchers
+        <div
+          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+        >
+          Vouchers
+        </div>
       </div>
       <div
         class="ExtendedPageHeader-action-id"
@@ -99090,9 +99450,13 @@ exports[`Storyshots Views / Discounts / Voucher list no channels 1`] = `
       data-test-id="page-header"
     >
       <div
-        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+        class="ExtendedPageHeader-titleRow-id"
       >
-        Vouchers
+        <div
+          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+        >
+          Vouchers
+        </div>
       </div>
       <div
         class="ExtendedPageHeader-action-id"
@@ -99607,9 +99971,13 @@ exports[`Storyshots Views / Discounts / Voucher list no data 1`] = `
       data-test-id="page-header"
     >
       <div
-        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+        class="ExtendedPageHeader-titleRow-id"
       >
-        Vouchers
+        <div
+          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+        >
+          Vouchers
+        </div>
       </div>
       <div
         class="ExtendedPageHeader-action-id"
@@ -103808,9 +104176,13 @@ exports[`Storyshots Views / Navigation / Menu list default 1`] = `
       data-test-id="page-header"
     >
       <div
-        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+        class="ExtendedPageHeader-titleRow-id"
       >
-        Navigation
+        <div
+          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+        >
+          Navigation
+        </div>
       </div>
       <div
         class="ExtendedPageHeader-action-id"
@@ -104183,9 +104555,13 @@ exports[`Storyshots Views / Navigation / Menu list loading 1`] = `
       data-test-id="page-header"
     >
       <div
-        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+        class="ExtendedPageHeader-titleRow-id"
       >
-        Navigation
+        <div
+          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+        >
+          Navigation
+        </div>
       </div>
       <div
         class="ExtendedPageHeader-action-id"
@@ -104499,9 +104875,13 @@ exports[`Storyshots Views / Navigation / Menu list no data 1`] = `
       data-test-id="page-header"
     >
       <div
-        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+        class="ExtendedPageHeader-titleRow-id"
       >
-        Navigation
+        <div
+          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+        >
+          Navigation
+        </div>
       </div>
       <div
         class="ExtendedPageHeader-action-id"
@@ -104746,9 +105126,13 @@ exports[`Storyshots Views / Orders / Draft order list default 1`] = `
       data-test-id="page-header"
     >
       <div
-        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+        class="ExtendedPageHeader-titleRow-id"
       >
-        Draft Orders
+        <div
+          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+        >
+          Draft Orders
+        </div>
       </div>
       <div
         class="ExtendedPageHeader-action-id"
@@ -106545,9 +106929,13 @@ exports[`Storyshots Views / Orders / Draft order list limits reached 1`] = `
       data-test-id="page-header"
     >
       <div
-        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+        class="ExtendedPageHeader-titleRow-id"
       >
-        Draft Orders
+        <div
+          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+        >
+          Draft Orders
+        </div>
       </div>
       <div
         class="ExtendedPageHeader-action-id"
@@ -108424,9 +108812,13 @@ exports[`Storyshots Views / Orders / Draft order list loading 1`] = `
       data-test-id="page-header"
     >
       <div
-        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+        class="ExtendedPageHeader-titleRow-id"
       >
-        Draft Orders
+        <div
+          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+        >
+          Draft Orders
+        </div>
       </div>
       <div
         class="ExtendedPageHeader-action-id"
@@ -108851,9 +109243,13 @@ exports[`Storyshots Views / Orders / Draft order list when no data 1`] = `
       data-test-id="page-header"
     >
       <div
-        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+        class="ExtendedPageHeader-titleRow-id"
       >
-        Draft Orders
+        <div
+          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+        >
+          Draft Orders
+        </div>
       </div>
       <div
         class="ExtendedPageHeader-action-id"
@@ -109162,9 +109558,13 @@ exports[`Storyshots Views / Orders / Fulfill order default 1`] = `
       data-test-id="page-header"
     >
       <div
-        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+        class="ExtendedPageHeader-titleRow-id"
       >
-        Order no. 9123 - Add Fulfillment
+        <div
+          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+        >
+          Order no. 9123 - Add Fulfillment
+        </div>
       </div>
       <div
         class="ExtendedPageHeader-action-id"
@@ -109767,9 +110167,13 @@ exports[`Storyshots Views / Orders / Fulfill order error 1`] = `
       data-test-id="page-header"
     >
       <div
-        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+        class="ExtendedPageHeader-titleRow-id"
       >
-        Order no. 9123 - Add Fulfillment
+        <div
+          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+        >
+          Order no. 9123 - Add Fulfillment
+        </div>
       </div>
       <div
         class="ExtendedPageHeader-action-id"
@@ -110372,9 +110776,13 @@ exports[`Storyshots Views / Orders / Fulfill order loading 1`] = `
       data-test-id="page-header"
     >
       <div
-        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+        class="ExtendedPageHeader-titleRow-id"
       >
-        Order no.  - Add Fulfillment
+        <div
+          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+        >
+          Order no.  - Add Fulfillment
+        </div>
       </div>
       <div
         class="ExtendedPageHeader-action-id"
@@ -110456,9 +110864,13 @@ exports[`Storyshots Views / Orders / Fulfill order one warehouse 1`] = `
       data-test-id="page-header"
     >
       <div
-        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+        class="ExtendedPageHeader-titleRow-id"
       >
-        Order no. 9123 - Add Fulfillment
+        <div
+          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+        >
+          Order no. 9123 - Add Fulfillment
+        </div>
       </div>
       <div
         class="ExtendedPageHeader-action-id"
@@ -110769,65 +111181,72 @@ exports[`Storyshots Views / Orders / Order details cancelled 1`] = `
         data-test-id="page-header"
       >
         <div
-          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          class="ExtendedPageHeader-titleRow-id"
         >
           <div
-            class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
+            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
           >
-            9
             <div
-              class="ExtendedPageHeader-action-id OrderDetailsPageTitleWithStatusChip-container-id"
+              class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
             >
               <div
-                class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-              />
+                class="ExtendedPageHeader-titleRow-id"
+              >
+                9
+              </div>
               <div
-                class="StatusChip-root-id StatusChip-error-id StatusChip-md-id"
+                class="ExtendedPageHeader-action-id OrderDetailsPageTitleWithStatusChip-container-id"
               >
                 <div
-                  class="MuiTypography-root-id StatusChip-label-id StatusChip-errorLabel-id StatusChip-mdLabel-id MuiTypography-body1-id"
+                  class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
+                />
+                <div
+                  class="StatusChip-root-id StatusChip-error-id StatusChip-md-id"
                 >
-                  Cancelled
+                  <div
+                    class="MuiTypography-root-id StatusChip-label-id StatusChip-errorLabel-id StatusChip-mdLabel-id MuiTypography-body1-id"
+                  >
+                    Cancelled
+                  </div>
                 </div>
               </div>
             </div>
           </div>
+          <div>
+            <button
+              aria-haspopup="true"
+              aria-label="More"
+              class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
+              data-test-id="showMoreButton"
+              tabindex="0"
+              type="button"
+            >
+              <span
+                class="MuiIconButton-label-id"
+              >
+                <svg
+                  aria-hidden="true"
+                  class="MuiSvgIcon-root-id"
+                  focusable="false"
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    clip-rule="evenodd"
+                    d="M10 18C10 16.8954 10.8954 16 12 16C13.1046 16 14 16.8954 14 18C14 19.1046 13.1046 20 12 20C10.8954 20 10 19.1046 10 18ZM10 12C10 10.8954 10.8954 10 12 10C13.1046 10 14 10.8954 14 12C14 13.1046 13.1046 14 12 14C10.8954 14 10 13.1046 10 12ZM12 4C10.8954 4 10 4.89543 10 6C10 7.10457 10.8954 8 12 8C13.1046 8 14 7.10457 14 6C14 4.89543 13.1046 4 12 4Z"
+                    fill="currentColor"
+                    fill-rule="evenodd"
+                  />
+                </svg>
+              </span>
+            </button>
+          </div>
         </div>
         <div
           class="ExtendedPageHeader-action-id"
         >
           <div
             class="PageHeader-root-id"
-          >
-            <div>
-              <button
-                aria-haspopup="true"
-                aria-label="More"
-                class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
-                data-test-id="showMoreButton"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiIconButton-label-id"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id"
-                    focusable="false"
-                    viewBox="0 0 24 24"
-                  >
-                    <path
-                      clip-rule="evenodd"
-                      d="M10 18C10 16.8954 10.8954 16 12 16C13.1046 16 14 16.8954 14 18C14 19.1046 13.1046 20 12 20C10.8954 20 10 19.1046 10 18ZM10 12C10 10.8954 10.8954 10 12 10C13.1046 10 14 10.8954 14 12C14 13.1046 13.1046 14 12 14C10.8954 14 10 13.1046 10 12ZM12 4C10.8954 4 10 4.89543 10 6C10 7.10457 10.8954 8 12 8C13.1046 8 14 7.10457 14 6C14 4.89543 13.1046 4 12 4Z"
-                      fill="currentColor"
-                      fill-rule="evenodd"
-                    />
-                  </svg>
-                </span>
-              </button>
-            </div>
-          </div>
+          />
         </div>
       </div>
       <div
@@ -112604,65 +113023,72 @@ exports[`Storyshots Views / Orders / Order details default 1`] = `
         data-test-id="page-header"
       >
         <div
-          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          class="ExtendedPageHeader-titleRow-id"
         >
           <div
-            class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
+            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
           >
-            9
             <div
-              class="ExtendedPageHeader-action-id OrderDetailsPageTitleWithStatusChip-container-id"
+              class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
             >
               <div
-                class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-              />
+                class="ExtendedPageHeader-titleRow-id"
+              >
+                9
+              </div>
               <div
-                class="StatusChip-root-id StatusChip-neutral-id StatusChip-md-id"
+                class="ExtendedPageHeader-action-id OrderDetailsPageTitleWithStatusChip-container-id"
               >
                 <div
-                  class="MuiTypography-root-id StatusChip-label-id StatusChip-neutralLabel-id StatusChip-mdLabel-id MuiTypography-body1-id"
+                  class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
+                />
+                <div
+                  class="StatusChip-root-id StatusChip-neutral-id StatusChip-md-id"
                 >
-                  Partially fulfilled
+                  <div
+                    class="MuiTypography-root-id StatusChip-label-id StatusChip-neutralLabel-id StatusChip-mdLabel-id MuiTypography-body1-id"
+                  >
+                    Partially fulfilled
+                  </div>
                 </div>
               </div>
             </div>
           </div>
+          <div>
+            <button
+              aria-haspopup="true"
+              aria-label="More"
+              class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
+              data-test-id="showMoreButton"
+              tabindex="0"
+              type="button"
+            >
+              <span
+                class="MuiIconButton-label-id"
+              >
+                <svg
+                  aria-hidden="true"
+                  class="MuiSvgIcon-root-id"
+                  focusable="false"
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    clip-rule="evenodd"
+                    d="M10 18C10 16.8954 10.8954 16 12 16C13.1046 16 14 16.8954 14 18C14 19.1046 13.1046 20 12 20C10.8954 20 10 19.1046 10 18ZM10 12C10 10.8954 10.8954 10 12 10C13.1046 10 14 10.8954 14 12C14 13.1046 13.1046 14 12 14C10.8954 14 10 13.1046 10 12ZM12 4C10.8954 4 10 4.89543 10 6C10 7.10457 10.8954 8 12 8C13.1046 8 14 7.10457 14 6C14 4.89543 13.1046 4 12 4Z"
+                    fill="currentColor"
+                    fill-rule="evenodd"
+                  />
+                </svg>
+              </span>
+            </button>
+          </div>
         </div>
         <div
           class="ExtendedPageHeader-action-id"
         >
           <div
             class="PageHeader-root-id"
-          >
-            <div>
-              <button
-                aria-haspopup="true"
-                aria-label="More"
-                class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
-                data-test-id="showMoreButton"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiIconButton-label-id"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id"
-                    focusable="false"
-                    viewBox="0 0 24 24"
-                  >
-                    <path
-                      clip-rule="evenodd"
-                      d="M10 18C10 16.8954 10.8954 16 12 16C13.1046 16 14 16.8954 14 18C14 19.1046 13.1046 20 12 20C10.8954 20 10 19.1046 10 18ZM10 12C10 10.8954 10.8954 10 12 10C13.1046 10 14 10.8954 14 12C14 13.1046 13.1046 14 12 14C10.8954 14 10 13.1046 10 12ZM12 4C10.8954 4 10 4.89543 10 6C10 7.10457 10.8954 8 12 8C13.1046 8 14 7.10457 14 6C14 4.89543 13.1046 4 12 4Z"
-                      fill="currentColor"
-                      fill-rule="evenodd"
-                    />
-                  </svg>
-                </span>
-              </button>
-            </div>
-          </div>
+          />
         </div>
       </div>
       <div
@@ -114629,65 +115055,72 @@ exports[`Storyshots Views / Orders / Order details fulfilled 1`] = `
         data-test-id="page-header"
       >
         <div
-          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          class="ExtendedPageHeader-titleRow-id"
         >
           <div
-            class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
+            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
           >
-            9
             <div
-              class="ExtendedPageHeader-action-id OrderDetailsPageTitleWithStatusChip-container-id"
+              class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
             >
               <div
-                class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-              />
+                class="ExtendedPageHeader-titleRow-id"
+              >
+                9
+              </div>
               <div
-                class="StatusChip-root-id StatusChip-success-id StatusChip-md-id"
+                class="ExtendedPageHeader-action-id OrderDetailsPageTitleWithStatusChip-container-id"
               >
                 <div
-                  class="MuiTypography-root-id StatusChip-label-id StatusChip-successLabel-id StatusChip-mdLabel-id MuiTypography-body1-id"
+                  class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
+                />
+                <div
+                  class="StatusChip-root-id StatusChip-success-id StatusChip-md-id"
                 >
-                  Fulfilled
+                  <div
+                    class="MuiTypography-root-id StatusChip-label-id StatusChip-successLabel-id StatusChip-mdLabel-id MuiTypography-body1-id"
+                  >
+                    Fulfilled
+                  </div>
                 </div>
               </div>
             </div>
           </div>
+          <div>
+            <button
+              aria-haspopup="true"
+              aria-label="More"
+              class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
+              data-test-id="showMoreButton"
+              tabindex="0"
+              type="button"
+            >
+              <span
+                class="MuiIconButton-label-id"
+              >
+                <svg
+                  aria-hidden="true"
+                  class="MuiSvgIcon-root-id"
+                  focusable="false"
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    clip-rule="evenodd"
+                    d="M10 18C10 16.8954 10.8954 16 12 16C13.1046 16 14 16.8954 14 18C14 19.1046 13.1046 20 12 20C10.8954 20 10 19.1046 10 18ZM10 12C10 10.8954 10.8954 10 12 10C13.1046 10 14 10.8954 14 12C14 13.1046 13.1046 14 12 14C10.8954 14 10 13.1046 10 12ZM12 4C10.8954 4 10 4.89543 10 6C10 7.10457 10.8954 8 12 8C13.1046 8 14 7.10457 14 6C14 4.89543 13.1046 4 12 4Z"
+                    fill="currentColor"
+                    fill-rule="evenodd"
+                  />
+                </svg>
+              </span>
+            </button>
+          </div>
         </div>
         <div
           class="ExtendedPageHeader-action-id"
         >
           <div
             class="PageHeader-root-id"
-          >
-            <div>
-              <button
-                aria-haspopup="true"
-                aria-label="More"
-                class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
-                data-test-id="showMoreButton"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiIconButton-label-id"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id"
-                    focusable="false"
-                    viewBox="0 0 24 24"
-                  >
-                    <path
-                      clip-rule="evenodd"
-                      d="M10 18C10 16.8954 10.8954 16 12 16C13.1046 16 14 16.8954 14 18C14 19.1046 13.1046 20 12 20C10.8954 20 10 19.1046 10 18ZM10 12C10 10.8954 10.8954 10 12 10C13.1046 10 14 10.8954 14 12C14 13.1046 13.1046 14 12 14C10.8954 14 10 13.1046 10 12ZM12 4C10.8954 4 10 4.89543 10 6C10 7.10457 10.8954 8 12 8C13.1046 8 14 7.10457 14 6C14 4.89543 13.1046 4 12 4Z"
-                      fill="currentColor"
-                      fill-rule="evenodd"
-                    />
-                  </svg>
-                </span>
-              </button>
-            </div>
-          </div>
+          />
         </div>
       </div>
       <div
@@ -116654,55 +117087,61 @@ exports[`Storyshots Views / Orders / Order details loading 1`] = `
         data-test-id="page-header"
       >
         <div
-          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          class="ExtendedPageHeader-titleRow-id"
         >
           <div
-            class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
+            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
           >
             <div
-              class="ExtendedPageHeader-action-id OrderDetailsPageTitleWithStatusChip-container-id"
+              class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
             >
               <div
-                class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
+                class="ExtendedPageHeader-titleRow-id"
               />
+              <div
+                class="ExtendedPageHeader-action-id OrderDetailsPageTitleWithStatusChip-container-id"
+              >
+                <div
+                  class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
+                />
+              </div>
             </div>
           </div>
+          <div>
+            <button
+              aria-haspopup="true"
+              aria-label="More"
+              class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
+              data-test-id="showMoreButton"
+              tabindex="0"
+              type="button"
+            >
+              <span
+                class="MuiIconButton-label-id"
+              >
+                <svg
+                  aria-hidden="true"
+                  class="MuiSvgIcon-root-id"
+                  focusable="false"
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    clip-rule="evenodd"
+                    d="M10 18C10 16.8954 10.8954 16 12 16C13.1046 16 14 16.8954 14 18C14 19.1046 13.1046 20 12 20C10.8954 20 10 19.1046 10 18ZM10 12C10 10.8954 10.8954 10 12 10C13.1046 10 14 10.8954 14 12C14 13.1046 13.1046 14 12 14C10.8954 14 10 13.1046 10 12ZM12 4C10.8954 4 10 4.89543 10 6C10 7.10457 10.8954 8 12 8C13.1046 8 14 7.10457 14 6C14 4.89543 13.1046 4 12 4Z"
+                    fill="currentColor"
+                    fill-rule="evenodd"
+                  />
+                </svg>
+              </span>
+            </button>
+          </div>
         </div>
         <div
           class="ExtendedPageHeader-action-id"
         >
           <div
             class="PageHeader-root-id"
-          >
-            <div>
-              <button
-                aria-haspopup="true"
-                aria-label="More"
-                class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
-                data-test-id="showMoreButton"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiIconButton-label-id"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id"
-                    focusable="false"
-                    viewBox="0 0 24 24"
-                  >
-                    <path
-                      clip-rule="evenodd"
-                      d="M10 18C10 16.8954 10.8954 16 12 16C13.1046 16 14 16.8954 14 18C14 19.1046 13.1046 20 12 20C10.8954 20 10 19.1046 10 18ZM10 12C10 10.8954 10.8954 10 12 10C13.1046 10 14 10.8954 14 12C14 13.1046 13.1046 14 12 14C10.8954 14 10 13.1046 10 12ZM12 4C10.8954 4 10 4.89543 10 6C10 7.10457 10.8954 8 12 8C13.1046 8 14 7.10457 14 6C14 4.89543 13.1046 4 12 4Z"
-                      fill="currentColor"
-                      fill-rule="evenodd"
-                    />
-                  </svg>
-                </span>
-              </button>
-            </div>
-          </div>
+          />
         </div>
       </div>
       <div
@@ -117289,65 +117728,72 @@ exports[`Storyshots Views / Orders / Order details no customer note 1`] = `
         data-test-id="page-header"
       >
         <div
-          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          class="ExtendedPageHeader-titleRow-id"
         >
           <div
-            class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
+            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
           >
-            9
             <div
-              class="ExtendedPageHeader-action-id OrderDetailsPageTitleWithStatusChip-container-id"
+              class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
             >
               <div
-                class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-              />
+                class="ExtendedPageHeader-titleRow-id"
+              >
+                9
+              </div>
               <div
-                class="StatusChip-root-id StatusChip-neutral-id StatusChip-md-id"
+                class="ExtendedPageHeader-action-id OrderDetailsPageTitleWithStatusChip-container-id"
               >
                 <div
-                  class="MuiTypography-root-id StatusChip-label-id StatusChip-neutralLabel-id StatusChip-mdLabel-id MuiTypography-body1-id"
+                  class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
+                />
+                <div
+                  class="StatusChip-root-id StatusChip-neutral-id StatusChip-md-id"
                 >
-                  Partially fulfilled
+                  <div
+                    class="MuiTypography-root-id StatusChip-label-id StatusChip-neutralLabel-id StatusChip-mdLabel-id MuiTypography-body1-id"
+                  >
+                    Partially fulfilled
+                  </div>
                 </div>
               </div>
             </div>
           </div>
+          <div>
+            <button
+              aria-haspopup="true"
+              aria-label="More"
+              class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
+              data-test-id="showMoreButton"
+              tabindex="0"
+              type="button"
+            >
+              <span
+                class="MuiIconButton-label-id"
+              >
+                <svg
+                  aria-hidden="true"
+                  class="MuiSvgIcon-root-id"
+                  focusable="false"
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    clip-rule="evenodd"
+                    d="M10 18C10 16.8954 10.8954 16 12 16C13.1046 16 14 16.8954 14 18C14 19.1046 13.1046 20 12 20C10.8954 20 10 19.1046 10 18ZM10 12C10 10.8954 10.8954 10 12 10C13.1046 10 14 10.8954 14 12C14 13.1046 13.1046 14 12 14C10.8954 14 10 13.1046 10 12ZM12 4C10.8954 4 10 4.89543 10 6C10 7.10457 10.8954 8 12 8C13.1046 8 14 7.10457 14 6C14 4.89543 13.1046 4 12 4Z"
+                    fill="currentColor"
+                    fill-rule="evenodd"
+                  />
+                </svg>
+              </span>
+            </button>
+          </div>
         </div>
         <div
           class="ExtendedPageHeader-action-id"
         >
           <div
             class="PageHeader-root-id"
-          >
-            <div>
-              <button
-                aria-haspopup="true"
-                aria-label="More"
-                class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
-                data-test-id="showMoreButton"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiIconButton-label-id"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id"
-                    focusable="false"
-                    viewBox="0 0 24 24"
-                  >
-                    <path
-                      clip-rule="evenodd"
-                      d="M10 18C10 16.8954 10.8954 16 12 16C13.1046 16 14 16.8954 14 18C14 19.1046 13.1046 20 12 20C10.8954 20 10 19.1046 10 18ZM10 12C10 10.8954 10.8954 10 12 10C13.1046 10 14 10.8954 14 12C14 13.1046 13.1046 14 12 14C10.8954 14 10 13.1046 10 12ZM12 4C10.8954 4 10 4.89543 10 6C10 7.10457 10.8954 8 12 8C13.1046 8 14 7.10457 14 6C14 4.89543 13.1046 4 12 4Z"
-                      fill="currentColor"
-                      fill-rule="evenodd"
-                    />
-                  </svg>
-                </span>
-              </button>
-            </div>
-          </div>
+          />
         </div>
       </div>
       <div
@@ -119314,65 +119760,72 @@ exports[`Storyshots Views / Orders / Order details no payment 1`] = `
         data-test-id="page-header"
       >
         <div
-          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          class="ExtendedPageHeader-titleRow-id"
         >
           <div
-            class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
+            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
           >
-            9
             <div
-              class="ExtendedPageHeader-action-id OrderDetailsPageTitleWithStatusChip-container-id"
+              class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
             >
               <div
-                class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-              />
+                class="ExtendedPageHeader-titleRow-id"
+              >
+                9
+              </div>
               <div
-                class="StatusChip-root-id StatusChip-neutral-id StatusChip-md-id"
+                class="ExtendedPageHeader-action-id OrderDetailsPageTitleWithStatusChip-container-id"
               >
                 <div
-                  class="MuiTypography-root-id StatusChip-label-id StatusChip-neutralLabel-id StatusChip-mdLabel-id MuiTypography-body1-id"
+                  class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
+                />
+                <div
+                  class="StatusChip-root-id StatusChip-neutral-id StatusChip-md-id"
                 >
-                  Partially fulfilled
+                  <div
+                    class="MuiTypography-root-id StatusChip-label-id StatusChip-neutralLabel-id StatusChip-mdLabel-id MuiTypography-body1-id"
+                  >
+                    Partially fulfilled
+                  </div>
                 </div>
               </div>
             </div>
           </div>
+          <div>
+            <button
+              aria-haspopup="true"
+              aria-label="More"
+              class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
+              data-test-id="showMoreButton"
+              tabindex="0"
+              type="button"
+            >
+              <span
+                class="MuiIconButton-label-id"
+              >
+                <svg
+                  aria-hidden="true"
+                  class="MuiSvgIcon-root-id"
+                  focusable="false"
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    clip-rule="evenodd"
+                    d="M10 18C10 16.8954 10.8954 16 12 16C13.1046 16 14 16.8954 14 18C14 19.1046 13.1046 20 12 20C10.8954 20 10 19.1046 10 18ZM10 12C10 10.8954 10.8954 10 12 10C13.1046 10 14 10.8954 14 12C14 13.1046 13.1046 14 12 14C10.8954 14 10 13.1046 10 12ZM12 4C10.8954 4 10 4.89543 10 6C10 7.10457 10.8954 8 12 8C13.1046 8 14 7.10457 14 6C14 4.89543 13.1046 4 12 4Z"
+                    fill="currentColor"
+                    fill-rule="evenodd"
+                  />
+                </svg>
+              </span>
+            </button>
+          </div>
         </div>
         <div
           class="ExtendedPageHeader-action-id"
         >
           <div
             class="PageHeader-root-id"
-          >
-            <div>
-              <button
-                aria-haspopup="true"
-                aria-label="More"
-                class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
-                data-test-id="showMoreButton"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiIconButton-label-id"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id"
-                    focusable="false"
-                    viewBox="0 0 24 24"
-                  >
-                    <path
-                      clip-rule="evenodd"
-                      d="M10 18C10 16.8954 10.8954 16 12 16C13.1046 16 14 16.8954 14 18C14 19.1046 13.1046 20 12 20C10.8954 20 10 19.1046 10 18ZM10 12C10 10.8954 10.8954 10 12 10C13.1046 10 14 10.8954 14 12C14 13.1046 13.1046 14 12 14C10.8954 14 10 13.1046 10 12ZM12 4C10.8954 4 10 4.89543 10 6C10 7.10457 10.8954 8 12 8C13.1046 8 14 7.10457 14 6C14 4.89543 13.1046 4 12 4Z"
-                      fill="currentColor"
-                      fill-rule="evenodd"
-                    />
-                  </svg>
-                </span>
-              </button>
-            </div>
-          </div>
+          />
         </div>
       </div>
       <div
@@ -121337,65 +121790,72 @@ exports[`Storyshots Views / Orders / Order details no shipping address 1`] = `
         data-test-id="page-header"
       >
         <div
-          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          class="ExtendedPageHeader-titleRow-id"
         >
           <div
-            class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
+            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
           >
-            9
             <div
-              class="ExtendedPageHeader-action-id OrderDetailsPageTitleWithStatusChip-container-id"
+              class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
             >
               <div
-                class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-              />
+                class="ExtendedPageHeader-titleRow-id"
+              >
+                9
+              </div>
               <div
-                class="StatusChip-root-id StatusChip-neutral-id StatusChip-md-id"
+                class="ExtendedPageHeader-action-id OrderDetailsPageTitleWithStatusChip-container-id"
               >
                 <div
-                  class="MuiTypography-root-id StatusChip-label-id StatusChip-neutralLabel-id StatusChip-mdLabel-id MuiTypography-body1-id"
+                  class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
+                />
+                <div
+                  class="StatusChip-root-id StatusChip-neutral-id StatusChip-md-id"
                 >
-                  Partially fulfilled
+                  <div
+                    class="MuiTypography-root-id StatusChip-label-id StatusChip-neutralLabel-id StatusChip-mdLabel-id MuiTypography-body1-id"
+                  >
+                    Partially fulfilled
+                  </div>
                 </div>
               </div>
             </div>
           </div>
+          <div>
+            <button
+              aria-haspopup="true"
+              aria-label="More"
+              class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
+              data-test-id="showMoreButton"
+              tabindex="0"
+              type="button"
+            >
+              <span
+                class="MuiIconButton-label-id"
+              >
+                <svg
+                  aria-hidden="true"
+                  class="MuiSvgIcon-root-id"
+                  focusable="false"
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    clip-rule="evenodd"
+                    d="M10 18C10 16.8954 10.8954 16 12 16C13.1046 16 14 16.8954 14 18C14 19.1046 13.1046 20 12 20C10.8954 20 10 19.1046 10 18ZM10 12C10 10.8954 10.8954 10 12 10C13.1046 10 14 10.8954 14 12C14 13.1046 13.1046 14 12 14C10.8954 14 10 13.1046 10 12ZM12 4C10.8954 4 10 4.89543 10 6C10 7.10457 10.8954 8 12 8C13.1046 8 14 7.10457 14 6C14 4.89543 13.1046 4 12 4Z"
+                    fill="currentColor"
+                    fill-rule="evenodd"
+                  />
+                </svg>
+              </span>
+            </button>
+          </div>
         </div>
         <div
           class="ExtendedPageHeader-action-id"
         >
           <div
             class="PageHeader-root-id"
-          >
-            <div>
-              <button
-                aria-haspopup="true"
-                aria-label="More"
-                class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
-                data-test-id="showMoreButton"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiIconButton-label-id"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id"
-                    focusable="false"
-                    viewBox="0 0 24 24"
-                  >
-                    <path
-                      clip-rule="evenodd"
-                      d="M10 18C10 16.8954 10.8954 16 12 16C13.1046 16 14 16.8954 14 18C14 19.1046 13.1046 20 12 20C10.8954 20 10 19.1046 10 18ZM10 12C10 10.8954 10.8954 10 12 10C13.1046 10 14 10.8954 14 12C14 13.1046 13.1046 14 12 14C10.8954 14 10 13.1046 10 12ZM12 4C10.8954 4 10 4.89543 10 6C10 7.10457 10.8954 8 12 8C13.1046 8 14 7.10457 14 6C14 4.89543 13.1046 4 12 4Z"
-                      fill="currentColor"
-                      fill-rule="evenodd"
-                    />
-                  </svg>
-                </span>
-              </button>
-            </div>
-          </div>
+          />
         </div>
       </div>
       <div
@@ -123354,65 +123814,72 @@ exports[`Storyshots Views / Orders / Order details partially fulfilled 1`] = `
         data-test-id="page-header"
       >
         <div
-          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          class="ExtendedPageHeader-titleRow-id"
         >
           <div
-            class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
+            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
           >
-            9
             <div
-              class="ExtendedPageHeader-action-id OrderDetailsPageTitleWithStatusChip-container-id"
+              class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
             >
               <div
-                class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-              />
+                class="ExtendedPageHeader-titleRow-id"
+              >
+                9
+              </div>
               <div
-                class="StatusChip-root-id StatusChip-neutral-id StatusChip-md-id"
+                class="ExtendedPageHeader-action-id OrderDetailsPageTitleWithStatusChip-container-id"
               >
                 <div
-                  class="MuiTypography-root-id StatusChip-label-id StatusChip-neutralLabel-id StatusChip-mdLabel-id MuiTypography-body1-id"
+                  class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
+                />
+                <div
+                  class="StatusChip-root-id StatusChip-neutral-id StatusChip-md-id"
                 >
-                  Partially fulfilled
+                  <div
+                    class="MuiTypography-root-id StatusChip-label-id StatusChip-neutralLabel-id StatusChip-mdLabel-id MuiTypography-body1-id"
+                  >
+                    Partially fulfilled
+                  </div>
                 </div>
               </div>
             </div>
           </div>
+          <div>
+            <button
+              aria-haspopup="true"
+              aria-label="More"
+              class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
+              data-test-id="showMoreButton"
+              tabindex="0"
+              type="button"
+            >
+              <span
+                class="MuiIconButton-label-id"
+              >
+                <svg
+                  aria-hidden="true"
+                  class="MuiSvgIcon-root-id"
+                  focusable="false"
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    clip-rule="evenodd"
+                    d="M10 18C10 16.8954 10.8954 16 12 16C13.1046 16 14 16.8954 14 18C14 19.1046 13.1046 20 12 20C10.8954 20 10 19.1046 10 18ZM10 12C10 10.8954 10.8954 10 12 10C13.1046 10 14 10.8954 14 12C14 13.1046 13.1046 14 12 14C10.8954 14 10 13.1046 10 12ZM12 4C10.8954 4 10 4.89543 10 6C10 7.10457 10.8954 8 12 8C13.1046 8 14 7.10457 14 6C14 4.89543 13.1046 4 12 4Z"
+                    fill="currentColor"
+                    fill-rule="evenodd"
+                  />
+                </svg>
+              </span>
+            </button>
+          </div>
         </div>
         <div
           class="ExtendedPageHeader-action-id"
         >
           <div
             class="PageHeader-root-id"
-          >
-            <div>
-              <button
-                aria-haspopup="true"
-                aria-label="More"
-                class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
-                data-test-id="showMoreButton"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiIconButton-label-id"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id"
-                    focusable="false"
-                    viewBox="0 0 24 24"
-                  >
-                    <path
-                      clip-rule="evenodd"
-                      d="M10 18C10 16.8954 10.8954 16 12 16C13.1046 16 14 16.8954 14 18C14 19.1046 13.1046 20 12 20C10.8954 20 10 19.1046 10 18ZM10 12C10 10.8954 10.8954 10 12 10C13.1046 10 14 10.8954 14 12C14 13.1046 13.1046 14 12 14C10.8954 14 10 13.1046 10 12ZM12 4C10.8954 4 10 4.89543 10 6C10 7.10457 10.8954 8 12 8C13.1046 8 14 7.10457 14 6C14 4.89543 13.1046 4 12 4Z"
-                      fill="currentColor"
-                      fill-rule="evenodd"
-                    />
-                  </svg>
-                </span>
-              </button>
-            </div>
-          </div>
+          />
         </div>
       </div>
       <div
@@ -125379,65 +125846,72 @@ exports[`Storyshots Views / Orders / Order details payment confirmed 1`] = `
         data-test-id="page-header"
       >
         <div
-          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          class="ExtendedPageHeader-titleRow-id"
         >
           <div
-            class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
+            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
           >
-            9
             <div
-              class="ExtendedPageHeader-action-id OrderDetailsPageTitleWithStatusChip-container-id"
+              class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
             >
               <div
-                class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-              />
+                class="ExtendedPageHeader-titleRow-id"
+              >
+                9
+              </div>
               <div
-                class="StatusChip-root-id StatusChip-neutral-id StatusChip-md-id"
+                class="ExtendedPageHeader-action-id OrderDetailsPageTitleWithStatusChip-container-id"
               >
                 <div
-                  class="MuiTypography-root-id StatusChip-label-id StatusChip-neutralLabel-id StatusChip-mdLabel-id MuiTypography-body1-id"
+                  class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
+                />
+                <div
+                  class="StatusChip-root-id StatusChip-neutral-id StatusChip-md-id"
                 >
-                  Partially fulfilled
+                  <div
+                    class="MuiTypography-root-id StatusChip-label-id StatusChip-neutralLabel-id StatusChip-mdLabel-id MuiTypography-body1-id"
+                  >
+                    Partially fulfilled
+                  </div>
                 </div>
               </div>
             </div>
           </div>
+          <div>
+            <button
+              aria-haspopup="true"
+              aria-label="More"
+              class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
+              data-test-id="showMoreButton"
+              tabindex="0"
+              type="button"
+            >
+              <span
+                class="MuiIconButton-label-id"
+              >
+                <svg
+                  aria-hidden="true"
+                  class="MuiSvgIcon-root-id"
+                  focusable="false"
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    clip-rule="evenodd"
+                    d="M10 18C10 16.8954 10.8954 16 12 16C13.1046 16 14 16.8954 14 18C14 19.1046 13.1046 20 12 20C10.8954 20 10 19.1046 10 18ZM10 12C10 10.8954 10.8954 10 12 10C13.1046 10 14 10.8954 14 12C14 13.1046 13.1046 14 12 14C10.8954 14 10 13.1046 10 12ZM12 4C10.8954 4 10 4.89543 10 6C10 7.10457 10.8954 8 12 8C13.1046 8 14 7.10457 14 6C14 4.89543 13.1046 4 12 4Z"
+                    fill="currentColor"
+                    fill-rule="evenodd"
+                  />
+                </svg>
+              </span>
+            </button>
+          </div>
         </div>
         <div
           class="ExtendedPageHeader-action-id"
         >
           <div
             class="PageHeader-root-id"
-          >
-            <div>
-              <button
-                aria-haspopup="true"
-                aria-label="More"
-                class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
-                data-test-id="showMoreButton"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiIconButton-label-id"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id"
-                    focusable="false"
-                    viewBox="0 0 24 24"
-                  >
-                    <path
-                      clip-rule="evenodd"
-                      d="M10 18C10 16.8954 10.8954 16 12 16C13.1046 16 14 16.8954 14 18C14 19.1046 13.1046 20 12 20C10.8954 20 10 19.1046 10 18ZM10 12C10 10.8954 10.8954 10 12 10C13.1046 10 14 10.8954 14 12C14 13.1046 13.1046 14 12 14C10.8954 14 10 13.1046 10 12ZM12 4C10.8954 4 10 4.89543 10 6C10 7.10457 10.8954 8 12 8C13.1046 8 14 7.10457 14 6C14 4.89543 13.1046 4 12 4Z"
-                      fill="currentColor"
-                      fill-rule="evenodd"
-                    />
-                  </svg>
-                </span>
-              </button>
-            </div>
-          </div>
+          />
         </div>
       </div>
       <div
@@ -127404,65 +127878,72 @@ exports[`Storyshots Views / Orders / Order details payment error 1`] = `
         data-test-id="page-header"
       >
         <div
-          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          class="ExtendedPageHeader-titleRow-id"
         >
           <div
-            class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
+            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
           >
-            9
             <div
-              class="ExtendedPageHeader-action-id OrderDetailsPageTitleWithStatusChip-container-id"
+              class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
             >
               <div
-                class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-              />
+                class="ExtendedPageHeader-titleRow-id"
+              >
+                9
+              </div>
               <div
-                class="StatusChip-root-id StatusChip-neutral-id StatusChip-md-id"
+                class="ExtendedPageHeader-action-id OrderDetailsPageTitleWithStatusChip-container-id"
               >
                 <div
-                  class="MuiTypography-root-id StatusChip-label-id StatusChip-neutralLabel-id StatusChip-mdLabel-id MuiTypography-body1-id"
+                  class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
+                />
+                <div
+                  class="StatusChip-root-id StatusChip-neutral-id StatusChip-md-id"
                 >
-                  Partially fulfilled
+                  <div
+                    class="MuiTypography-root-id StatusChip-label-id StatusChip-neutralLabel-id StatusChip-mdLabel-id MuiTypography-body1-id"
+                  >
+                    Partially fulfilled
+                  </div>
                 </div>
               </div>
             </div>
           </div>
+          <div>
+            <button
+              aria-haspopup="true"
+              aria-label="More"
+              class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
+              data-test-id="showMoreButton"
+              tabindex="0"
+              type="button"
+            >
+              <span
+                class="MuiIconButton-label-id"
+              >
+                <svg
+                  aria-hidden="true"
+                  class="MuiSvgIcon-root-id"
+                  focusable="false"
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    clip-rule="evenodd"
+                    d="M10 18C10 16.8954 10.8954 16 12 16C13.1046 16 14 16.8954 14 18C14 19.1046 13.1046 20 12 20C10.8954 20 10 19.1046 10 18ZM10 12C10 10.8954 10.8954 10 12 10C13.1046 10 14 10.8954 14 12C14 13.1046 13.1046 14 12 14C10.8954 14 10 13.1046 10 12ZM12 4C10.8954 4 10 4.89543 10 6C10 7.10457 10.8954 8 12 8C13.1046 8 14 7.10457 14 6C14 4.89543 13.1046 4 12 4Z"
+                    fill="currentColor"
+                    fill-rule="evenodd"
+                  />
+                </svg>
+              </span>
+            </button>
+          </div>
         </div>
         <div
           class="ExtendedPageHeader-action-id"
         >
           <div
             class="PageHeader-root-id"
-          >
-            <div>
-              <button
-                aria-haspopup="true"
-                aria-label="More"
-                class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
-                data-test-id="showMoreButton"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiIconButton-label-id"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id"
-                    focusable="false"
-                    viewBox="0 0 24 24"
-                  >
-                    <path
-                      clip-rule="evenodd"
-                      d="M10 18C10 16.8954 10.8954 16 12 16C13.1046 16 14 16.8954 14 18C14 19.1046 13.1046 20 12 20C10.8954 20 10 19.1046 10 18ZM10 12C10 10.8954 10.8954 10 12 10C13.1046 10 14 10.8954 14 12C14 13.1046 13.1046 14 12 14C10.8954 14 10 13.1046 10 12ZM12 4C10.8954 4 10 4.89543 10 6C10 7.10457 10.8954 8 12 8C13.1046 8 14 7.10457 14 6C14 4.89543 13.1046 4 12 4Z"
-                      fill="currentColor"
-                      fill-rule="evenodd"
-                    />
-                  </svg>
-                </span>
-              </button>
-            </div>
-          </div>
+          />
         </div>
       </div>
       <div
@@ -129429,65 +129910,72 @@ exports[`Storyshots Views / Orders / Order details pending payment 1`] = `
         data-test-id="page-header"
       >
         <div
-          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          class="ExtendedPageHeader-titleRow-id"
         >
           <div
-            class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
+            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
           >
-            9
             <div
-              class="ExtendedPageHeader-action-id OrderDetailsPageTitleWithStatusChip-container-id"
+              class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
             >
               <div
-                class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-              />
+                class="ExtendedPageHeader-titleRow-id"
+              >
+                9
+              </div>
               <div
-                class="StatusChip-root-id StatusChip-neutral-id StatusChip-md-id"
+                class="ExtendedPageHeader-action-id OrderDetailsPageTitleWithStatusChip-container-id"
               >
                 <div
-                  class="MuiTypography-root-id StatusChip-label-id StatusChip-neutralLabel-id StatusChip-mdLabel-id MuiTypography-body1-id"
+                  class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
+                />
+                <div
+                  class="StatusChip-root-id StatusChip-neutral-id StatusChip-md-id"
                 >
-                  Partially fulfilled
+                  <div
+                    class="MuiTypography-root-id StatusChip-label-id StatusChip-neutralLabel-id StatusChip-mdLabel-id MuiTypography-body1-id"
+                  >
+                    Partially fulfilled
+                  </div>
                 </div>
               </div>
             </div>
           </div>
+          <div>
+            <button
+              aria-haspopup="true"
+              aria-label="More"
+              class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
+              data-test-id="showMoreButton"
+              tabindex="0"
+              type="button"
+            >
+              <span
+                class="MuiIconButton-label-id"
+              >
+                <svg
+                  aria-hidden="true"
+                  class="MuiSvgIcon-root-id"
+                  focusable="false"
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    clip-rule="evenodd"
+                    d="M10 18C10 16.8954 10.8954 16 12 16C13.1046 16 14 16.8954 14 18C14 19.1046 13.1046 20 12 20C10.8954 20 10 19.1046 10 18ZM10 12C10 10.8954 10.8954 10 12 10C13.1046 10 14 10.8954 14 12C14 13.1046 13.1046 14 12 14C10.8954 14 10 13.1046 10 12ZM12 4C10.8954 4 10 4.89543 10 6C10 7.10457 10.8954 8 12 8C13.1046 8 14 7.10457 14 6C14 4.89543 13.1046 4 12 4Z"
+                    fill="currentColor"
+                    fill-rule="evenodd"
+                  />
+                </svg>
+              </span>
+            </button>
+          </div>
         </div>
         <div
           class="ExtendedPageHeader-action-id"
         >
           <div
             class="PageHeader-root-id"
-          >
-            <div>
-              <button
-                aria-haspopup="true"
-                aria-label="More"
-                class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
-                data-test-id="showMoreButton"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiIconButton-label-id"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id"
-                    focusable="false"
-                    viewBox="0 0 24 24"
-                  >
-                    <path
-                      clip-rule="evenodd"
-                      d="M10 18C10 16.8954 10.8954 16 12 16C13.1046 16 14 16.8954 14 18C14 19.1046 13.1046 20 12 20C10.8954 20 10 19.1046 10 18ZM10 12C10 10.8954 10.8954 10 12 10C13.1046 10 14 10.8954 14 12C14 13.1046 13.1046 14 12 14C10.8954 14 10 13.1046 10 12ZM12 4C10.8954 4 10 4.89543 10 6C10 7.10457 10.8954 8 12 8C13.1046 8 14 7.10457 14 6C14 4.89543 13.1046 4 12 4Z"
-                      fill="currentColor"
-                      fill-rule="evenodd"
-                    />
-                  </svg>
-                </span>
-              </button>
-            </div>
-          </div>
+          />
         </div>
       </div>
       <div
@@ -131454,65 +131942,72 @@ exports[`Storyshots Views / Orders / Order details refunded payment 1`] = `
         data-test-id="page-header"
       >
         <div
-          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          class="ExtendedPageHeader-titleRow-id"
         >
           <div
-            class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
+            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
           >
-            9
             <div
-              class="ExtendedPageHeader-action-id OrderDetailsPageTitleWithStatusChip-container-id"
+              class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
             >
               <div
-                class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-              />
+                class="ExtendedPageHeader-titleRow-id"
+              >
+                9
+              </div>
               <div
-                class="StatusChip-root-id StatusChip-neutral-id StatusChip-md-id"
+                class="ExtendedPageHeader-action-id OrderDetailsPageTitleWithStatusChip-container-id"
               >
                 <div
-                  class="MuiTypography-root-id StatusChip-label-id StatusChip-neutralLabel-id StatusChip-mdLabel-id MuiTypography-body1-id"
+                  class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
+                />
+                <div
+                  class="StatusChip-root-id StatusChip-neutral-id StatusChip-md-id"
                 >
-                  Partially fulfilled
+                  <div
+                    class="MuiTypography-root-id StatusChip-label-id StatusChip-neutralLabel-id StatusChip-mdLabel-id MuiTypography-body1-id"
+                  >
+                    Partially fulfilled
+                  </div>
                 </div>
               </div>
             </div>
           </div>
+          <div>
+            <button
+              aria-haspopup="true"
+              aria-label="More"
+              class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
+              data-test-id="showMoreButton"
+              tabindex="0"
+              type="button"
+            >
+              <span
+                class="MuiIconButton-label-id"
+              >
+                <svg
+                  aria-hidden="true"
+                  class="MuiSvgIcon-root-id"
+                  focusable="false"
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    clip-rule="evenodd"
+                    d="M10 18C10 16.8954 10.8954 16 12 16C13.1046 16 14 16.8954 14 18C14 19.1046 13.1046 20 12 20C10.8954 20 10 19.1046 10 18ZM10 12C10 10.8954 10.8954 10 12 10C13.1046 10 14 10.8954 14 12C14 13.1046 13.1046 14 12 14C10.8954 14 10 13.1046 10 12ZM12 4C10.8954 4 10 4.89543 10 6C10 7.10457 10.8954 8 12 8C13.1046 8 14 7.10457 14 6C14 4.89543 13.1046 4 12 4Z"
+                    fill="currentColor"
+                    fill-rule="evenodd"
+                  />
+                </svg>
+              </span>
+            </button>
+          </div>
         </div>
         <div
           class="ExtendedPageHeader-action-id"
         >
           <div
             class="PageHeader-root-id"
-          >
-            <div>
-              <button
-                aria-haspopup="true"
-                aria-label="More"
-                class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
-                data-test-id="showMoreButton"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiIconButton-label-id"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id"
-                    focusable="false"
-                    viewBox="0 0 24 24"
-                  >
-                    <path
-                      clip-rule="evenodd"
-                      d="M10 18C10 16.8954 10.8954 16 12 16C13.1046 16 14 16.8954 14 18C14 19.1046 13.1046 20 12 20C10.8954 20 10 19.1046 10 18ZM10 12C10 10.8954 10.8954 10 12 10C13.1046 10 14 10.8954 14 12C14 13.1046 13.1046 14 12 14C10.8954 14 10 13.1046 10 12ZM12 4C10.8954 4 10 4.89543 10 6C10 7.10457 10.8954 8 12 8C13.1046 8 14 7.10457 14 6C14 4.89543 13.1046 4 12 4Z"
-                      fill="currentColor"
-                      fill-rule="evenodd"
-                    />
-                  </svg>
-                </span>
-              </button>
-            </div>
-          </div>
+          />
         </div>
       </div>
       <div
@@ -133479,65 +133974,72 @@ exports[`Storyshots Views / Orders / Order details rejected payment 1`] = `
         data-test-id="page-header"
       >
         <div
-          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          class="ExtendedPageHeader-titleRow-id"
         >
           <div
-            class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
+            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
           >
-            9
             <div
-              class="ExtendedPageHeader-action-id OrderDetailsPageTitleWithStatusChip-container-id"
+              class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
             >
               <div
-                class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-              />
+                class="ExtendedPageHeader-titleRow-id"
+              >
+                9
+              </div>
               <div
-                class="StatusChip-root-id StatusChip-neutral-id StatusChip-md-id"
+                class="ExtendedPageHeader-action-id OrderDetailsPageTitleWithStatusChip-container-id"
               >
                 <div
-                  class="MuiTypography-root-id StatusChip-label-id StatusChip-neutralLabel-id StatusChip-mdLabel-id MuiTypography-body1-id"
+                  class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
+                />
+                <div
+                  class="StatusChip-root-id StatusChip-neutral-id StatusChip-md-id"
                 >
-                  Partially fulfilled
+                  <div
+                    class="MuiTypography-root-id StatusChip-label-id StatusChip-neutralLabel-id StatusChip-mdLabel-id MuiTypography-body1-id"
+                  >
+                    Partially fulfilled
+                  </div>
                 </div>
               </div>
             </div>
           </div>
+          <div>
+            <button
+              aria-haspopup="true"
+              aria-label="More"
+              class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
+              data-test-id="showMoreButton"
+              tabindex="0"
+              type="button"
+            >
+              <span
+                class="MuiIconButton-label-id"
+              >
+                <svg
+                  aria-hidden="true"
+                  class="MuiSvgIcon-root-id"
+                  focusable="false"
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    clip-rule="evenodd"
+                    d="M10 18C10 16.8954 10.8954 16 12 16C13.1046 16 14 16.8954 14 18C14 19.1046 13.1046 20 12 20C10.8954 20 10 19.1046 10 18ZM10 12C10 10.8954 10.8954 10 12 10C13.1046 10 14 10.8954 14 12C14 13.1046 13.1046 14 12 14C10.8954 14 10 13.1046 10 12ZM12 4C10.8954 4 10 4.89543 10 6C10 7.10457 10.8954 8 12 8C13.1046 8 14 7.10457 14 6C14 4.89543 13.1046 4 12 4Z"
+                    fill="currentColor"
+                    fill-rule="evenodd"
+                  />
+                </svg>
+              </span>
+            </button>
+          </div>
         </div>
         <div
           class="ExtendedPageHeader-action-id"
         >
           <div
             class="PageHeader-root-id"
-          >
-            <div>
-              <button
-                aria-haspopup="true"
-                aria-label="More"
-                class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
-                data-test-id="showMoreButton"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiIconButton-label-id"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id"
-                    focusable="false"
-                    viewBox="0 0 24 24"
-                  >
-                    <path
-                      clip-rule="evenodd"
-                      d="M10 18C10 16.8954 10.8954 16 12 16C13.1046 16 14 16.8954 14 18C14 19.1046 13.1046 20 12 20C10.8954 20 10 19.1046 10 18ZM10 12C10 10.8954 10.8954 10 12 10C13.1046 10 14 10.8954 14 12C14 13.1046 13.1046 14 12 14C10.8954 14 10 13.1046 10 12ZM12 4C10.8954 4 10 4.89543 10 6C10 7.10457 10.8954 8 12 8C13.1046 8 14 7.10457 14 6C14 4.89543 13.1046 4 12 4Z"
-                      fill="currentColor"
-                      fill-rule="evenodd"
-                    />
-                  </svg>
-                </span>
-              </button>
-            </div>
-          </div>
+          />
         </div>
       </div>
       <div
@@ -135504,65 +136006,72 @@ exports[`Storyshots Views / Orders / Order details unfulfilled 1`] = `
         data-test-id="page-header"
       >
         <div
-          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          class="ExtendedPageHeader-titleRow-id"
         >
           <div
-            class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
+            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
           >
-            9
             <div
-              class="ExtendedPageHeader-action-id OrderDetailsPageTitleWithStatusChip-container-id"
+              class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
             >
               <div
-                class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-              />
+                class="ExtendedPageHeader-titleRow-id"
+              >
+                9
+              </div>
               <div
-                class="StatusChip-root-id StatusChip-error-id StatusChip-md-id"
+                class="ExtendedPageHeader-action-id OrderDetailsPageTitleWithStatusChip-container-id"
               >
                 <div
-                  class="MuiTypography-root-id StatusChip-label-id StatusChip-errorLabel-id StatusChip-mdLabel-id MuiTypography-body1-id"
+                  class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
+                />
+                <div
+                  class="StatusChip-root-id StatusChip-error-id StatusChip-md-id"
                 >
-                  Unfulfilled
+                  <div
+                    class="MuiTypography-root-id StatusChip-label-id StatusChip-errorLabel-id StatusChip-mdLabel-id MuiTypography-body1-id"
+                  >
+                    Unfulfilled
+                  </div>
                 </div>
               </div>
             </div>
           </div>
+          <div>
+            <button
+              aria-haspopup="true"
+              aria-label="More"
+              class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
+              data-test-id="showMoreButton"
+              tabindex="0"
+              type="button"
+            >
+              <span
+                class="MuiIconButton-label-id"
+              >
+                <svg
+                  aria-hidden="true"
+                  class="MuiSvgIcon-root-id"
+                  focusable="false"
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    clip-rule="evenodd"
+                    d="M10 18C10 16.8954 10.8954 16 12 16C13.1046 16 14 16.8954 14 18C14 19.1046 13.1046 20 12 20C10.8954 20 10 19.1046 10 18ZM10 12C10 10.8954 10.8954 10 12 10C13.1046 10 14 10.8954 14 12C14 13.1046 13.1046 14 12 14C10.8954 14 10 13.1046 10 12ZM12 4C10.8954 4 10 4.89543 10 6C10 7.10457 10.8954 8 12 8C13.1046 8 14 7.10457 14 6C14 4.89543 13.1046 4 12 4Z"
+                    fill="currentColor"
+                    fill-rule="evenodd"
+                  />
+                </svg>
+              </span>
+            </button>
+          </div>
         </div>
         <div
           class="ExtendedPageHeader-action-id"
         >
           <div
             class="PageHeader-root-id"
-          >
-            <div>
-              <button
-                aria-haspopup="true"
-                aria-label="More"
-                class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
-                data-test-id="showMoreButton"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiIconButton-label-id"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id"
-                    focusable="false"
-                    viewBox="0 0 24 24"
-                  >
-                    <path
-                      clip-rule="evenodd"
-                      d="M10 18C10 16.8954 10.8954 16 12 16C13.1046 16 14 16.8954 14 18C14 19.1046 13.1046 20 12 20C10.8954 20 10 19.1046 10 18ZM10 12C10 10.8954 10.8954 10 12 10C13.1046 10 14 10.8954 14 12C14 13.1046 13.1046 14 12 14C10.8954 14 10 13.1046 10 12ZM12 4C10.8954 4 10 4.89543 10 6C10 7.10457 10.8954 8 12 8C13.1046 8 14 7.10457 14 6C14 4.89543 13.1046 4 12 4Z"
-                      fill="currentColor"
-                      fill-rule="evenodd"
-                    />
-                  </svg>
-                </span>
-              </button>
-            </div>
-          </div>
+          />
         </div>
       </div>
       <div
@@ -137528,9 +138037,13 @@ exports[`Storyshots Views / Orders / Order draft default 1`] = `
       data-test-id="page-header"
     >
       <div
-        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+        class="ExtendedPageHeader-titleRow-id"
       >
-        #24
+        <div
+          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+        >
+          #24
+        </div>
       </div>
       <div
         class="ExtendedPageHeader-action-id"
@@ -138211,15 +138724,19 @@ exports[`Storyshots Views / Orders / Order draft loading 1`] = `
       data-test-id="page-header"
     >
       <div
-        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+        class="ExtendedPageHeader-titleRow-id"
       >
-        <span
-          class="Skeleton-skeleton-id"
-          data-test-id="skeleton"
-          style="width:10em"
+        <div
+          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
         >
-          ‌
-        </span>
+          <span
+            class="Skeleton-skeleton-id"
+            data-test-id="skeleton"
+            style="width:10em"
+          >
+            ‌
+          </span>
+        </div>
       </div>
       <div
         class="ExtendedPageHeader-action-id"
@@ -138468,9 +138985,13 @@ exports[`Storyshots Views / Orders / Order draft no user permissions 1`] = `
       data-test-id="page-header"
     >
       <div
-        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+        class="ExtendedPageHeader-titleRow-id"
       >
-        #24
+        <div
+          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+        >
+          #24
+        </div>
       </div>
       <div
         class="ExtendedPageHeader-action-id"
@@ -139138,9 +139659,13 @@ exports[`Storyshots Views / Orders / Order draft without lines 1`] = `
       data-test-id="page-header"
     >
       <div
-        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+        class="ExtendedPageHeader-titleRow-id"
       >
-        #24
+        <div
+          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+        >
+          #24
+        </div>
       </div>
       <div
         class="ExtendedPageHeader-action-id"
@@ -139472,9 +139997,40 @@ exports[`Storyshots Views / Orders / Order list default 1`] = `
       data-test-id="page-header"
     >
       <div
-        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+        class="ExtendedPageHeader-titleRow-id"
       >
-        Orders
+        <div
+          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+        >
+          Orders
+        </div>
+        <div
+          class="OrderListPage-settings-id"
+        >
+          <button
+            aria-haspopup="true"
+            aria-label="More"
+            class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
+            color="primary"
+            data-test-id="showMoreButton"
+            tabindex="0"
+            type="button"
+          >
+            <svg
+              aria-hidden="true"
+              class="MuiSvgIcon-root-id"
+              focusable="false"
+              viewBox="0 0 24 24"
+            >
+              <path
+                clip-rule="evenodd"
+                d="M10 18C10 16.8954 10.8954 16 12 16C13.1046 16 14 16.8954 14 18C14 19.1046 13.1046 20 12 20C10.8954 20 10 19.1046 10 18ZM10 12C10 10.8954 10.8954 10 12 10C13.1046 10 14 10.8954 14 12C14 13.1046 13.1046 14 12 14C10.8954 14 10 13.1046 10 12ZM12 4C10.8954 4 10 4.89543 10 6C10 7.10457 10.8954 8 12 8C13.1046 8 14 7.10457 14 6C14 4.89543 13.1046 4 12 4Z"
+                fill="currentColor"
+                fill-rule="evenodd"
+              />
+            </svg>
+          </button>
+        </div>
       </div>
       <div
         class="ExtendedPageHeader-action-id"
@@ -139487,33 +140043,6 @@ exports[`Storyshots Views / Orders / Order list default 1`] = `
           >
             230/500 orders
           </div>
-          <div
-            class="OrderListPage-settings-id"
-          >
-            <button
-              aria-haspopup="true"
-              aria-label="More"
-              class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-              color="primary"
-              data-test-id="showMoreButton"
-              tabindex="0"
-              type="button"
-            >
-              <svg
-                aria-hidden="true"
-                class="MuiSvgIcon-root-id"
-                focusable="false"
-                viewBox="0 0 24 24"
-              >
-                <path
-                  clip-rule="evenodd"
-                  d="M10 18C10 16.8954 10.8954 16 12 16C13.1046 16 14 16.8954 14 18C14 19.1046 13.1046 20 12 20C10.8954 20 10 19.1046 10 18ZM10 12C10 10.8954 10.8954 10 12 10C13.1046 10 14 10.8954 14 12C14 13.1046 13.1046 14 12 14C10.8954 14 10 13.1046 10 12ZM12 4C10.8954 4 10 4.89543 10 6C10 7.10457 10.8954 8 12 8C13.1046 8 14 7.10457 14 6C14 4.89543 13.1046 4 12 4Z"
-                  fill="currentColor"
-                  fill-rule="evenodd"
-                />
-              </svg>
-            </button>
-          </div>
           <button
             class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
             data-test-id="create-order-button"
@@ -141349,9 +141878,40 @@ exports[`Storyshots Views / Orders / Order list limits reached 1`] = `
       data-test-id="page-header"
     >
       <div
-        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+        class="ExtendedPageHeader-titleRow-id"
       >
-        Orders
+        <div
+          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+        >
+          Orders
+        </div>
+        <div
+          class="OrderListPage-settings-id"
+        >
+          <button
+            aria-haspopup="true"
+            aria-label="More"
+            class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
+            color="primary"
+            data-test-id="showMoreButton"
+            tabindex="0"
+            type="button"
+          >
+            <svg
+              aria-hidden="true"
+              class="MuiSvgIcon-root-id"
+              focusable="false"
+              viewBox="0 0 24 24"
+            >
+              <path
+                clip-rule="evenodd"
+                d="M10 18C10 16.8954 10.8954 16 12 16C13.1046 16 14 16.8954 14 18C14 19.1046 13.1046 20 12 20C10.8954 20 10 19.1046 10 18ZM10 12C10 10.8954 10.8954 10 12 10C13.1046 10 14 10.8954 14 12C14 13.1046 13.1046 14 12 14C10.8954 14 10 13.1046 10 12ZM12 4C10.8954 4 10 4.89543 10 6C10 7.10457 10.8954 8 12 8C13.1046 8 14 7.10457 14 6C14 4.89543 13.1046 4 12 4Z"
+                fill="currentColor"
+                fill-rule="evenodd"
+              />
+            </svg>
+          </button>
+        </div>
       </div>
       <div
         class="ExtendedPageHeader-action-id"
@@ -141364,33 +141924,6 @@ exports[`Storyshots Views / Orders / Order list limits reached 1`] = `
           >
             500/500 orders
           </div>
-          <div
-            class="OrderListPage-settings-id"
-          >
-            <button
-              aria-haspopup="true"
-              aria-label="More"
-              class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-              color="primary"
-              data-test-id="showMoreButton"
-              tabindex="0"
-              type="button"
-            >
-              <svg
-                aria-hidden="true"
-                class="MuiSvgIcon-root-id"
-                focusable="false"
-                viewBox="0 0 24 24"
-              >
-                <path
-                  clip-rule="evenodd"
-                  d="M10 18C10 16.8954 10.8954 16 12 16C13.1046 16 14 16.8954 14 18C14 19.1046 13.1046 20 12 20C10.8954 20 10 19.1046 10 18ZM10 12C10 10.8954 10.8954 10 12 10C13.1046 10 14 10.8954 14 12C14 13.1046 13.1046 14 12 14C10.8954 14 10 13.1046 10 12ZM12 4C10.8954 4 10 4.89543 10 6C10 7.10457 10.8954 8 12 8C13.1046 8 14 7.10457 14 6C14 4.89543 13.1046 4 12 4Z"
-                  fill="currentColor"
-                  fill-rule="evenodd"
-                />
-              </svg>
-            </button>
-          </div>
           <button
             class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id MuiButton-disabled-id MuiButtonBase-disabled-id"
             data-test-id="create-order-button"
@@ -143306,9 +143839,40 @@ exports[`Storyshots Views / Orders / Order list loading 1`] = `
       data-test-id="page-header"
     >
       <div
-        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+        class="ExtendedPageHeader-titleRow-id"
       >
-        Orders
+        <div
+          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+        >
+          Orders
+        </div>
+        <div
+          class="OrderListPage-settings-id"
+        >
+          <button
+            aria-haspopup="true"
+            aria-label="More"
+            class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
+            color="primary"
+            data-test-id="showMoreButton"
+            tabindex="0"
+            type="button"
+          >
+            <svg
+              aria-hidden="true"
+              class="MuiSvgIcon-root-id"
+              focusable="false"
+              viewBox="0 0 24 24"
+            >
+              <path
+                clip-rule="evenodd"
+                d="M10 18C10 16.8954 10.8954 16 12 16C13.1046 16 14 16.8954 14 18C14 19.1046 13.1046 20 12 20C10.8954 20 10 19.1046 10 18ZM10 12C10 10.8954 10.8954 10 12 10C13.1046 10 14 10.8954 14 12C14 13.1046 13.1046 14 12 14C10.8954 14 10 13.1046 10 12ZM12 4C10.8954 4 10 4.89543 10 6C10 7.10457 10.8954 8 12 8C13.1046 8 14 7.10457 14 6C14 4.89543 13.1046 4 12 4Z"
+                fill="currentColor"
+                fill-rule="evenodd"
+              />
+            </svg>
+          </button>
+        </div>
       </div>
       <div
         class="ExtendedPageHeader-action-id"
@@ -143321,33 +143885,6 @@ exports[`Storyshots Views / Orders / Order list loading 1`] = `
           >
             230/500 orders
           </div>
-          <div
-            class="OrderListPage-settings-id"
-          >
-            <button
-              aria-haspopup="true"
-              aria-label="More"
-              class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-              color="primary"
-              data-test-id="showMoreButton"
-              tabindex="0"
-              type="button"
-            >
-              <svg
-                aria-hidden="true"
-                class="MuiSvgIcon-root-id"
-                focusable="false"
-                viewBox="0 0 24 24"
-              >
-                <path
-                  clip-rule="evenodd"
-                  d="M10 18C10 16.8954 10.8954 16 12 16C13.1046 16 14 16.8954 14 18C14 19.1046 13.1046 20 12 20C10.8954 20 10 19.1046 10 18ZM10 12C10 10.8954 10.8954 10 12 10C13.1046 10 14 10.8954 14 12C14 13.1046 13.1046 14 12 14C10.8954 14 10 13.1046 10 12ZM12 4C10.8954 4 10 4.89543 10 6C10 7.10457 10.8954 8 12 8C13.1046 8 14 7.10457 14 6C14 4.89543 13.1046 4 12 4Z"
-                  fill="currentColor"
-                  fill-rule="evenodd"
-                />
-              </svg>
-            </button>
-          </div>
           <button
             class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
             data-test-id="create-order-button"
@@ -143740,9 +144277,40 @@ exports[`Storyshots Views / Orders / Order list no limits 1`] = `
       data-test-id="page-header"
     >
       <div
-        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+        class="ExtendedPageHeader-titleRow-id"
       >
-        Orders
+        <div
+          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+        >
+          Orders
+        </div>
+        <div
+          class="OrderListPage-settings-id"
+        >
+          <button
+            aria-haspopup="true"
+            aria-label="More"
+            class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
+            color="primary"
+            data-test-id="showMoreButton"
+            tabindex="0"
+            type="button"
+          >
+            <svg
+              aria-hidden="true"
+              class="MuiSvgIcon-root-id"
+              focusable="false"
+              viewBox="0 0 24 24"
+            >
+              <path
+                clip-rule="evenodd"
+                d="M10 18C10 16.8954 10.8954 16 12 16C13.1046 16 14 16.8954 14 18C14 19.1046 13.1046 20 12 20C10.8954 20 10 19.1046 10 18ZM10 12C10 10.8954 10.8954 10 12 10C13.1046 10 14 10.8954 14 12C14 13.1046 13.1046 14 12 14C10.8954 14 10 13.1046 10 12ZM12 4C10.8954 4 10 4.89543 10 6C10 7.10457 10.8954 8 12 8C13.1046 8 14 7.10457 14 6C14 4.89543 13.1046 4 12 4Z"
+                fill="currentColor"
+                fill-rule="evenodd"
+              />
+            </svg>
+          </button>
+        </div>
       </div>
       <div
         class="ExtendedPageHeader-action-id"
@@ -143750,33 +144318,6 @@ exports[`Storyshots Views / Orders / Order list no limits 1`] = `
         <div
           class="PageHeader-root-id"
         >
-          <div
-            class="OrderListPage-settings-id"
-          >
-            <button
-              aria-haspopup="true"
-              aria-label="More"
-              class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-              color="primary"
-              data-test-id="showMoreButton"
-              tabindex="0"
-              type="button"
-            >
-              <svg
-                aria-hidden="true"
-                class="MuiSvgIcon-root-id"
-                focusable="false"
-                viewBox="0 0 24 24"
-              >
-                <path
-                  clip-rule="evenodd"
-                  d="M10 18C10 16.8954 10.8954 16 12 16C13.1046 16 14 16.8954 14 18C14 19.1046 13.1046 20 12 20C10.8954 20 10 19.1046 10 18ZM10 12C10 10.8954 10.8954 10 12 10C13.1046 10 14 10.8954 14 12C14 13.1046 13.1046 14 12 14C10.8954 14 10 13.1046 10 12ZM12 4C10.8954 4 10 4.89543 10 6C10 7.10457 10.8954 8 12 8C13.1046 8 14 7.10457 14 6C14 4.89543 13.1046 4 12 4Z"
-                  fill="currentColor"
-                  fill-rule="evenodd"
-                />
-              </svg>
-            </button>
-          </div>
           <button
             class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
             data-test-id="create-order-button"
@@ -145612,9 +146153,40 @@ exports[`Storyshots Views / Orders / Order list when no data 1`] = `
       data-test-id="page-header"
     >
       <div
-        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+        class="ExtendedPageHeader-titleRow-id"
       >
-        Orders
+        <div
+          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+        >
+          Orders
+        </div>
+        <div
+          class="OrderListPage-settings-id"
+        >
+          <button
+            aria-haspopup="true"
+            aria-label="More"
+            class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
+            color="primary"
+            data-test-id="showMoreButton"
+            tabindex="0"
+            type="button"
+          >
+            <svg
+              aria-hidden="true"
+              class="MuiSvgIcon-root-id"
+              focusable="false"
+              viewBox="0 0 24 24"
+            >
+              <path
+                clip-rule="evenodd"
+                d="M10 18C10 16.8954 10.8954 16 12 16C13.1046 16 14 16.8954 14 18C14 19.1046 13.1046 20 12 20C10.8954 20 10 19.1046 10 18ZM10 12C10 10.8954 10.8954 10 12 10C13.1046 10 14 10.8954 14 12C14 13.1046 13.1046 14 12 14C10.8954 14 10 13.1046 10 12ZM12 4C10.8954 4 10 4.89543 10 6C10 7.10457 10.8954 8 12 8C13.1046 8 14 7.10457 14 6C14 4.89543 13.1046 4 12 4Z"
+                fill="currentColor"
+                fill-rule="evenodd"
+              />
+            </svg>
+          </button>
+        </div>
       </div>
       <div
         class="ExtendedPageHeader-action-id"
@@ -145627,33 +146199,6 @@ exports[`Storyshots Views / Orders / Order list when no data 1`] = `
           >
             230/500 orders
           </div>
-          <div
-            class="OrderListPage-settings-id"
-          >
-            <button
-              aria-haspopup="true"
-              aria-label="More"
-              class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-              color="primary"
-              data-test-id="showMoreButton"
-              tabindex="0"
-              type="button"
-            >
-              <svg
-                aria-hidden="true"
-                class="MuiSvgIcon-root-id"
-                focusable="false"
-                viewBox="0 0 24 24"
-              >
-                <path
-                  clip-rule="evenodd"
-                  d="M10 18C10 16.8954 10.8954 16 12 16C13.1046 16 14 16.8954 14 18C14 19.1046 13.1046 20 12 20C10.8954 20 10 19.1046 10 18ZM10 12C10 10.8954 10.8954 10 12 10C13.1046 10 14 10.8954 14 12C14 13.1046 13.1046 14 12 14C10.8954 14 10 13.1046 10 12ZM12 4C10.8954 4 10 4.89543 10 6C10 7.10457 10.8954 8 12 8C13.1046 8 14 7.10457 14 6C14 4.89543 13.1046 4 12 4Z"
-                  fill="currentColor"
-                  fill-rule="evenodd"
-                />
-              </svg>
-            </button>
-          </div>
           <button
             class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
             data-test-id="create-order-button"
@@ -145980,9 +146525,13 @@ exports[`Storyshots Views / Orders / Order settings default 1`] = `
         data-test-id="page-header"
       >
         <div
-          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          class="ExtendedPageHeader-titleRow-id"
         >
-          Order settings
+          <div
+            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          >
+            Order settings
+          </div>
         </div>
         <div
           class="ExtendedPageHeader-action-id"
@@ -146308,9 +146857,13 @@ exports[`Storyshots Views / Orders / Order settings loading 1`] = `
         data-test-id="page-header"
       >
         <div
-          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          class="ExtendedPageHeader-titleRow-id"
         >
-          Order settings
+          <div
+            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          >
+            Order settings
+          </div>
         </div>
         <div
           class="ExtendedPageHeader-action-id"
@@ -146611,9 +147164,13 @@ exports[`Storyshots Views / Orders / Refund order loading 1`] = `
         data-test-id="page-header"
       >
         <div
-          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          class="ExtendedPageHeader-titleRow-id"
         >
-          Order no.  - Refund
+          <div
+            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          >
+            Order no.  - Refund
+          </div>
         </div>
         <div
           class="ExtendedPageHeader-action-id"
@@ -146950,9 +147507,13 @@ exports[`Storyshots Views / Orders / Refund order miscellaneous 1`] = `
         data-test-id="page-header"
       >
         <div
-          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          class="ExtendedPageHeader-titleRow-id"
         >
-          Order no. 22 - Refund
+          <div
+            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          >
+            Order no. 22 - Refund
+          </div>
         </div>
         <div
           class="ExtendedPageHeader-action-id"
@@ -147227,9 +147788,13 @@ exports[`Storyshots Views / Orders / Refund order products 1`] = `
         data-test-id="page-header"
       >
         <div
-          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          class="ExtendedPageHeader-titleRow-id"
         >
-          Order no. 22 - Refund
+          <div
+            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          >
+            Order no. 22 - Refund
+          </div>
         </div>
         <div
           class="ExtendedPageHeader-action-id"
@@ -148403,9 +148968,13 @@ exports[`Storyshots Views / Page types / Create page type default 1`] = `
         data-test-id="page-header"
       >
         <div
-          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          class="ExtendedPageHeader-titleRow-id"
         >
-          Create Page Type
+          <div
+            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          >
+            Create Page Type
+          </div>
         </div>
         <div
           class="ExtendedPageHeader-action-id"
@@ -148669,9 +149238,13 @@ exports[`Storyshots Views / Page types / Create page type form errors 1`] = `
         data-test-id="page-header"
       >
         <div
-          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          class="ExtendedPageHeader-titleRow-id"
         >
-          Create Page Type
+          <div
+            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          >
+            Create Page Type
+          </div>
         </div>
         <div
           class="ExtendedPageHeader-action-id"
@@ -148940,9 +149513,13 @@ exports[`Storyshots Views / Page types / Create page type loading 1`] = `
         data-test-id="page-header"
       >
         <div
-          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          class="ExtendedPageHeader-titleRow-id"
         >
-          Create Page Type
+          <div
+            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          >
+            Create Page Type
+          </div>
         </div>
         <div
           class="ExtendedPageHeader-action-id"
@@ -149207,9 +149784,13 @@ exports[`Storyshots Views / Page types / Page type details default 1`] = `
         data-test-id="page-header"
       >
         <div
-          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          class="ExtendedPageHeader-titleRow-id"
         >
-          Blog
+          <div
+            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          >
+            Blog
+          </div>
         </div>
         <div
           class="ExtendedPageHeader-action-id"
@@ -150034,9 +150615,13 @@ exports[`Storyshots Views / Page types / Page type details form errors 1`] = `
         data-test-id="page-header"
       >
         <div
-          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          class="ExtendedPageHeader-titleRow-id"
         >
-          Blog
+          <div
+            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          >
+            Blog
+          </div>
         </div>
         <div
           class="ExtendedPageHeader-action-id"
@@ -150866,15 +151451,19 @@ exports[`Storyshots Views / Page types / Page type details loading 1`] = `
         data-test-id="page-header"
       >
         <div
-          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          class="ExtendedPageHeader-titleRow-id"
         >
-          <span
-            class="Skeleton-skeleton-id"
-            data-test-id="skeleton"
-            style="width:10em"
+          <div
+            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
           >
-            ‌
-          </span>
+            <span
+              class="Skeleton-skeleton-id"
+              data-test-id="skeleton"
+              style="width:10em"
+            >
+              ‌
+            </span>
+          </div>
         </div>
         <div
           class="ExtendedPageHeader-action-id"
@@ -151284,9 +151873,13 @@ exports[`Storyshots Views / Page types / Page type details no attributes 1`] = `
         data-test-id="page-header"
       >
         <div
-          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          class="ExtendedPageHeader-titleRow-id"
         >
-          Blog
+          <div
+            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          >
+            Blog
+          </div>
         </div>
         <div
           class="ExtendedPageHeader-action-id"
@@ -151769,9 +152362,13 @@ exports[`Storyshots Views / Page types / Page types list default 1`] = `
       data-test-id="page-header"
     >
       <div
-        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+        class="ExtendedPageHeader-titleRow-id"
       >
-        Page Types
+        <div
+          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+        >
+          Page Types
+        </div>
       </div>
       <div
         class="ExtendedPageHeader-action-id"
@@ -152193,9 +152790,13 @@ exports[`Storyshots Views / Page types / Page types list loading 1`] = `
       data-test-id="page-header"
     >
       <div
-        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+        class="ExtendedPageHeader-titleRow-id"
       >
-        Page Types
+        <div
+          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+        >
+          Page Types
+        </div>
       </div>
       <div
         class="ExtendedPageHeader-action-id"
@@ -152518,9 +153119,13 @@ exports[`Storyshots Views / Page types / Page types list no data 1`] = `
       data-test-id="page-header"
     >
       <div
-        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+        class="ExtendedPageHeader-titleRow-id"
       >
-        Page Types
+        <div
+          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+        >
+          Page Types
+        </div>
       </div>
       <div
         class="ExtendedPageHeader-action-id"
@@ -152759,9 +153364,13 @@ exports[`Storyshots Views / Pages / Page details default 1`] = `
         data-test-id="page-header"
       >
         <div
-          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          class="ExtendedPageHeader-titleRow-id"
         >
-          About
+          <div
+            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          >
+            About
+          </div>
         </div>
         <div
           class="ExtendedPageHeader-action-id"
@@ -153625,9 +154234,13 @@ exports[`Storyshots Views / Pages / Page details form errors 1`] = `
         data-test-id="page-header"
       >
         <div
-          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          class="ExtendedPageHeader-titleRow-id"
         >
-          About
+          <div
+            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          >
+            About
+          </div>
         </div>
         <div
           class="ExtendedPageHeader-action-id"
@@ -154504,15 +155117,19 @@ exports[`Storyshots Views / Pages / Page details loading 1`] = `
         data-test-id="page-header"
       >
         <div
-          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          class="ExtendedPageHeader-titleRow-id"
         >
-          <span
-            class="Skeleton-skeleton-id"
-            data-test-id="skeleton"
-            style="width:10em"
+          <div
+            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
           >
-            ‌
-          </span>
+            <span
+              class="Skeleton-skeleton-id"
+              data-test-id="skeleton"
+              style="width:10em"
+            >
+              ‌
+            </span>
+          </div>
         </div>
         <div
           class="ExtendedPageHeader-action-id"
@@ -155050,9 +155667,13 @@ exports[`Storyshots Views / Pages / Page list default 1`] = `
       data-test-id="page-header"
     >
       <div
-        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+        class="ExtendedPageHeader-titleRow-id"
       >
-        Pages
+        <div
+          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+        >
+          Pages
+        </div>
       </div>
       <div
         class="ExtendedPageHeader-action-id"
@@ -155569,9 +156190,13 @@ exports[`Storyshots Views / Pages / Page list loading 1`] = `
       data-test-id="page-header"
     >
       <div
-        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+        class="ExtendedPageHeader-titleRow-id"
       >
-        Pages
+        <div
+          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+        >
+          Pages
+        </div>
       </div>
       <div
         class="ExtendedPageHeader-action-id"
@@ -155880,9 +156505,13 @@ exports[`Storyshots Views / Pages / Page list no data 1`] = `
       data-test-id="page-header"
     >
       <div
-        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+        class="ExtendedPageHeader-titleRow-id"
       >
-        Pages
+        <div
+          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+        >
+          Pages
+        </div>
       </div>
       <div
         class="ExtendedPageHeader-action-id"
@@ -158790,9 +159419,13 @@ exports[`Storyshots Views / Permission Groups / Permission Group Details default
         data-test-id="page-header"
       >
         <div
-          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          class="ExtendedPageHeader-titleRow-id"
         >
-          Editors
+          <div
+            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          >
+            Editors
+          </div>
         </div>
         <div
           class="ExtendedPageHeader-action-id"
@@ -160218,15 +160851,19 @@ exports[`Storyshots Views / Permission Groups / Permission Group Details loading
         data-test-id="page-header"
       >
         <div
-          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          class="ExtendedPageHeader-titleRow-id"
         >
-          <span
-            class="Skeleton-skeleton-id"
-            data-test-id="skeleton"
-            style="width:10em"
+          <div
+            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
           >
-            ‌
-          </span>
+            <span
+              class="Skeleton-skeleton-id"
+              data-test-id="skeleton"
+              style="width:10em"
+            >
+              ‌
+            </span>
+          </div>
         </div>
         <div
           class="ExtendedPageHeader-action-id"
@@ -160937,9 +161574,13 @@ exports[`Storyshots Views / Permission Groups / Permission Group Details no memb
         data-test-id="page-header"
       >
         <div
-          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          class="ExtendedPageHeader-titleRow-id"
         >
-          Editors
+          <div
+            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          >
+            Editors
+          </div>
         </div>
         <div
           class="ExtendedPageHeader-action-id"
@@ -161906,9 +162547,13 @@ exports[`Storyshots Views / Permission Groups / Permission Group List default 1`
       data-test-id="page-header"
     >
       <div
-        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+        class="ExtendedPageHeader-titleRow-id"
       >
-        Permission Groups
+        <div
+          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+        >
+          Permission Groups
+        </div>
       </div>
       <div
         class="ExtendedPageHeader-action-id"
@@ -162307,9 +162952,13 @@ exports[`Storyshots Views / Permission Groups / Permission Group List loading 1`
       data-test-id="page-header"
     >
       <div
-        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+        class="ExtendedPageHeader-titleRow-id"
       >
-        Permission Groups
+        <div
+          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+        >
+          Permission Groups
+        </div>
       </div>
       <div
         class="ExtendedPageHeader-action-id"
@@ -162521,9 +163170,13 @@ exports[`Storyshots Views / Permission Groups / Permission Group List no data 1`
       data-test-id="page-header"
     >
       <div
-        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+        class="ExtendedPageHeader-titleRow-id"
       >
-        Permission Groups
+        <div
+          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+        >
+          Permission Groups
+        </div>
       </div>
       <div
         class="ExtendedPageHeader-action-id"
@@ -162753,9 +163406,13 @@ exports[`Storyshots Views / Plugins / Plugin details default 1`] = `
         data-test-id="page-header"
       >
         <div
-          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          class="ExtendedPageHeader-titleRow-id"
         >
-          Username or account Details
+          <div
+            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          >
+            Username or account Details
+          </div>
         </div>
         <div
           class="ExtendedPageHeader-action-id"
@@ -162925,9 +163582,13 @@ exports[`Storyshots Views / Plugins / Plugin details form errors 1`] = `
         data-test-id="page-header"
       >
         <div
-          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          class="ExtendedPageHeader-titleRow-id"
         >
-          Username or account Details
+          <div
+            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          >
+            Username or account Details
+          </div>
         </div>
         <div
           class="ExtendedPageHeader-action-id"
@@ -163102,9 +163763,13 @@ exports[`Storyshots Views / Plugins / Plugin details loading 1`] = `
         data-test-id="page-header"
       >
         <div
-          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          class="ExtendedPageHeader-titleRow-id"
         >
-          ... Details
+          <div
+            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          >
+            ... Details
+          </div>
         </div>
         <div
           class="ExtendedPageHeader-action-id"
@@ -163253,9 +163918,13 @@ exports[`Storyshots Views / Plugins / Plugin details not configurable 1`] = `
         data-test-id="page-header"
       >
         <div
-          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          class="ExtendedPageHeader-titleRow-id"
         >
-          Username or account Details
+          <div
+            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          >
+            Username or account Details
+          </div>
         </div>
         <div
           class="ExtendedPageHeader-action-id"
@@ -163424,9 +164093,13 @@ exports[`Storyshots Views / Plugins / Plugin list default 1`] = `
       data-test-id="page-header"
     >
       <div
-        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+        class="ExtendedPageHeader-titleRow-id"
       >
-        Plugins
+        <div
+          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+        >
+          Plugins
+        </div>
       </div>
       <div
         class="ExtendedPageHeader-action-id"
@@ -163837,9 +164510,13 @@ exports[`Storyshots Views / Plugins / Plugin list loading 1`] = `
       data-test-id="page-header"
     >
       <div
-        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+        class="ExtendedPageHeader-titleRow-id"
       >
-        Plugins
+        <div
+          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+        >
+          Plugins
+        </div>
       </div>
       <div
         class="ExtendedPageHeader-action-id"
@@ -164136,9 +164813,13 @@ exports[`Storyshots Views / Plugins / Plugin list no data 1`] = `
       data-test-id="page-header"
     >
       <div
-        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+        class="ExtendedPageHeader-titleRow-id"
       >
-        Plugins
+        <div
+          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+        >
+          Plugins
+        </div>
       </div>
       <div
         class="ExtendedPageHeader-action-id"
@@ -164430,9 +165111,13 @@ exports[`Storyshots Views / Product types / Create product type default 1`] = `
         data-test-id="page-header"
       >
         <div
-          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          class="ExtendedPageHeader-titleRow-id"
         >
-          Create product type
+          <div
+            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          >
+            Create product type
+          </div>
         </div>
         <div
           class="ExtendedPageHeader-action-id"
@@ -164949,9 +165634,13 @@ exports[`Storyshots Views / Product types / Create product type form errors 1`]
         data-test-id="page-header"
       >
         <div
-          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          class="ExtendedPageHeader-titleRow-id"
         >
-          Create product type
+          <div
+            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          >
+            Create product type
+          </div>
         </div>
         <div
           class="ExtendedPageHeader-action-id"
@@ -165473,15 +166162,19 @@ exports[`Storyshots Views / Product types / Create product type loading 1`] = `
         data-test-id="page-header"
       >
         <div
-          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          class="ExtendedPageHeader-titleRow-id"
         >
-          <span
-            class="Skeleton-skeleton-id"
-            data-test-id="skeleton"
-            style="width:10em"
+          <div
+            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
           >
-            ‌
-          </span>
+            <span
+              class="Skeleton-skeleton-id"
+              data-test-id="skeleton"
+              style="width:10em"
+            >
+              ‌
+            </span>
+          </div>
         </div>
         <div
           class="ExtendedPageHeader-action-id"
@@ -166006,9 +166699,13 @@ exports[`Storyshots Views / Product types / Product type details default 1`] = `
         data-test-id="page-header"
       >
         <div
-          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          class="ExtendedPageHeader-titleRow-id"
         >
-          E-books
+          <div
+            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          >
+            E-books
+          </div>
         </div>
         <div
           class="ExtendedPageHeader-action-id"
@@ -167118,9 +167815,13 @@ exports[`Storyshots Views / Product types / Product type details form errors 1`]
         data-test-id="page-header"
       >
         <div
-          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          class="ExtendedPageHeader-titleRow-id"
         >
-          E-books
+          <div
+            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          >
+            E-books
+          </div>
         </div>
         <div
           class="ExtendedPageHeader-action-id"
@@ -168235,15 +168936,19 @@ exports[`Storyshots Views / Product types / Product type details loading 1`] = `
         data-test-id="page-header"
       >
         <div
-          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          class="ExtendedPageHeader-titleRow-id"
         >
-          <span
-            class="Skeleton-skeleton-id"
-            data-test-id="skeleton"
-            style="width:10em"
+          <div
+            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
           >
-            ‌
-          </span>
+            <span
+              class="Skeleton-skeleton-id"
+              data-test-id="skeleton"
+              style="width:10em"
+            >
+              ‌
+            </span>
+          </div>
         </div>
         <div
           class="ExtendedPageHeader-action-id"
@@ -168949,9 +169654,13 @@ exports[`Storyshots Views / Product types / Product type details no attributes 1
         data-test-id="page-header"
       >
         <div
-          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          class="ExtendedPageHeader-titleRow-id"
         >
-          E-books
+          <div
+            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          >
+            E-books
+          </div>
         </div>
         <div
           class="ExtendedPageHeader-action-id"
@@ -169719,9 +170428,13 @@ exports[`Storyshots Views / Product types / Product types list default 1`] = `
       data-test-id="page-header"
     >
       <div
-        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+        class="ExtendedPageHeader-titleRow-id"
       >
-        Product Types
+        <div
+          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+        >
+          Product Types
+        </div>
       </div>
       <div
         class="ExtendedPageHeader-action-id"
@@ -170356,9 +171069,13 @@ exports[`Storyshots Views / Product types / Product types list loading 1`] = `
       data-test-id="page-header"
     >
       <div
-        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+        class="ExtendedPageHeader-titleRow-id"
       >
-        Product Types
+        <div
+          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+        >
+          Product Types
+        </div>
       </div>
       <div
         class="ExtendedPageHeader-action-id"
@@ -170735,9 +171452,13 @@ exports[`Storyshots Views / Product types / Product types list no data 1`] = `
       data-test-id="page-header"
     >
       <div
-        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+        class="ExtendedPageHeader-titleRow-id"
       >
-        Product Types
+        <div
+          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+        >
+          Product Types
+        </div>
       </div>
       <div
         class="ExtendedPageHeader-action-id"
@@ -178573,13 +179294,17 @@ exports[`Storyshots Views / Products / Create multiple variants interactive 1`]
       data-test-id="page-header"
     >
       <div
-        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+        class="ExtendedPageHeader-titleRow-id"
       >
-        Choose Values
         <div
-          class="MuiTypography-root-id ProductVariantCreatePage-description-id MuiTypography-body2-id"
+          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
         >
-          Selected values will be used to create variants for the configurable product.
+          Choose Values
+          <div
+            class="MuiTypography-root-id ProductVariantCreatePage-description-id MuiTypography-body2-id"
+          >
+            Selected values will be used to create variants for the configurable product.
+          </div>
         </div>
       </div>
       <div
@@ -178971,9 +179696,13 @@ exports[`Storyshots Views / Products / Create product When loading 1`] = `
         data-test-id="page-header"
       >
         <div
-          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          class="ExtendedPageHeader-titleRow-id"
         >
-          Add product
+          <div
+            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          >
+            Add product
+          </div>
         </div>
         <div
           class="ExtendedPageHeader-action-id"
@@ -179708,9 +180437,13 @@ exports[`Storyshots Views / Products / Create product default 1`] = `
         data-test-id="page-header"
       >
         <div
-          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          class="ExtendedPageHeader-titleRow-id"
         >
-          Add product
+          <div
+            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          >
+            Add product
+          </div>
         </div>
         <div
           class="ExtendedPageHeader-action-id"
@@ -180437,9 +181170,13 @@ exports[`Storyshots Views / Products / Create product form errors 1`] = `
         data-test-id="page-header"
       >
         <div
-          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          class="ExtendedPageHeader-titleRow-id"
         >
-          Add product
+          <div
+            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          >
+            Add product
+          </div>
         </div>
         <div
           class="ExtendedPageHeader-action-id"
@@ -181317,9 +182054,13 @@ exports[`Storyshots Views / Products / Create product variant add first variant
         data-test-id="page-header"
       >
         <div
-          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          class="ExtendedPageHeader-titleRow-id"
         >
-          Add variant
+          <div
+            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          >
+            Add variant
+          </div>
         </div>
         <div
           class="ExtendedPageHeader-action-id"
@@ -182248,9 +182989,13 @@ exports[`Storyshots Views / Products / Create product variant default 1`] = `
         data-test-id="page-header"
       >
         <div
-          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          class="ExtendedPageHeader-titleRow-id"
         >
-          Add variant
+          <div
+            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          >
+            Add variant
+          </div>
         </div>
         <div
           class="ExtendedPageHeader-action-id"
@@ -183273,9 +184018,13 @@ exports[`Storyshots Views / Products / Create product variant no warehouses 1`]
         data-test-id="page-header"
       >
         <div
-          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          class="ExtendedPageHeader-titleRow-id"
         >
-          Add variant
+          <div
+            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          >
+            Add variant
+          </div>
         </div>
         <div
           class="ExtendedPageHeader-action-id"
@@ -184218,9 +184967,13 @@ exports[`Storyshots Views / Products / Create product variant when loading data
         data-test-id="page-header"
       >
         <div
-          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          class="ExtendedPageHeader-titleRow-id"
         >
-          Add variant
+          <div
+            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          >
+            Add variant
+          </div>
         </div>
         <div
           class="ExtendedPageHeader-action-id"
@@ -185089,9 +185842,13 @@ exports[`Storyshots Views / Products / Create product variant with errors 1`] =
         data-test-id="page-header"
       >
         <div
-          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          class="ExtendedPageHeader-titleRow-id"
         >
-          Add variant
+          <div
+            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          >
+            Add variant
+          </div>
         </div>
         <div
           class="ExtendedPageHeader-action-id"
@@ -186142,9 +186899,13 @@ exports[`Storyshots Views / Products / Product edit form errors 1`] = `
         data-test-id="page-header"
       >
         <div
-          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          class="ExtendedPageHeader-titleRow-id"
         >
-          Ergonomic Plastic Bacon
+          <div
+            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          >
+            Ergonomic Plastic Bacon
+          </div>
         </div>
         <div
           class="ExtendedPageHeader-action-id"
@@ -187866,9 +188627,13 @@ exports[`Storyshots Views / Products / Product edit limits reached 1`] = `
         data-test-id="page-header"
       >
         <div
-          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          class="ExtendedPageHeader-titleRow-id"
         >
-          Ergonomic Plastic Bacon
+          <div
+            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          >
+            Ergonomic Plastic Bacon
+          </div>
         </div>
         <div
           class="ExtendedPageHeader-action-id"
@@ -189655,9 +190420,13 @@ exports[`Storyshots Views / Products / Product edit no limits 1`] = `
         data-test-id="page-header"
       >
         <div
-          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          class="ExtendedPageHeader-titleRow-id"
         >
-          Ergonomic Plastic Bacon
+          <div
+            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          >
+            Ergonomic Plastic Bacon
+          </div>
         </div>
         <div
           class="ExtendedPageHeader-action-id"
@@ -191364,9 +192133,13 @@ exports[`Storyshots Views / Products / Product edit no product attributes 1`] =
         data-test-id="page-header"
       >
         <div
-          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          class="ExtendedPageHeader-titleRow-id"
         >
-          Ergonomic Plastic Bacon
+          <div
+            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          >
+            Ergonomic Plastic Bacon
+          </div>
         </div>
         <div
           class="ExtendedPageHeader-action-id"
@@ -192828,9 +193601,13 @@ exports[`Storyshots Views / Products / Product edit no stock and no variants 1`]
         data-test-id="page-header"
       >
         <div
-          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          class="ExtendedPageHeader-titleRow-id"
         >
-          Ergonomic Plastic Bacon
+          <div
+            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          >
+            Ergonomic Plastic Bacon
+          </div>
         </div>
         <div
           class="ExtendedPageHeader-action-id"
@@ -194426,9 +195203,13 @@ exports[`Storyshots Views / Products / Product edit no stock, no variants and no
         data-test-id="page-header"
       >
         <div
-          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          class="ExtendedPageHeader-titleRow-id"
         >
-          Ergonomic Plastic Bacon
+          <div
+            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          >
+            Ergonomic Plastic Bacon
+          </div>
         </div>
         <div
           class="ExtendedPageHeader-action-id"
@@ -196024,9 +196805,13 @@ exports[`Storyshots Views / Products / Product edit no variants 1`] = `
         data-test-id="page-header"
       >
         <div
-          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          class="ExtendedPageHeader-titleRow-id"
         >
-          Ergonomic Plastic Bacon
+          <div
+            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          >
+            Ergonomic Plastic Bacon
+          </div>
         </div>
         <div
           class="ExtendedPageHeader-action-id"
@@ -197622,9 +198407,13 @@ exports[`Storyshots Views / Products / Product edit when data is fully loaded 1`
         data-test-id="page-header"
       >
         <div
-          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          class="ExtendedPageHeader-titleRow-id"
         >
-          Ergonomic Plastic Bacon
+          <div
+            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          >
+            Ergonomic Plastic Bacon
+          </div>
         </div>
         <div
           class="ExtendedPageHeader-action-id"
@@ -199331,15 +200120,19 @@ exports[`Storyshots Views / Products / Product edit when loading data 1`] = `
         data-test-id="page-header"
       >
         <div
-          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          class="ExtendedPageHeader-titleRow-id"
         >
-          <span
-            class="Skeleton-skeleton-id"
-            data-test-id="skeleton"
-            style="width:10em"
+          <div
+            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
           >
-            ‌
-          </span>
+            <span
+              class="Skeleton-skeleton-id"
+              data-test-id="skeleton"
+              style="width:10em"
+            >
+              ‌
+            </span>
+          </div>
         </div>
         <div
           class="ExtendedPageHeader-action-id"
@@ -200405,9 +201198,13 @@ exports[`Storyshots Views / Products / Product edit when product has no images 1
         data-test-id="page-header"
       >
         <div
-          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          class="ExtendedPageHeader-titleRow-id"
         >
-          Ergonomic Plastic Bacon
+          <div
+            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          >
+            Ergonomic Plastic Bacon
+          </div>
         </div>
         <div
           class="ExtendedPageHeader-action-id"
@@ -202053,9 +202850,13 @@ exports[`Storyshots Views / Products / Product edit when product has no variants
         data-test-id="page-header"
       >
         <div
-          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          class="ExtendedPageHeader-titleRow-id"
         >
-          Ergonomic Plastic Bacon
+          <div
+            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          >
+            Ergonomic Plastic Bacon
+          </div>
         </div>
         <div
           class="ExtendedPageHeader-action-id"
@@ -203651,9 +204452,13 @@ exports[`Storyshots Views / Products / Product edit with channels 1`] = `
         data-test-id="page-header"
       >
         <div
-          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          class="ExtendedPageHeader-titleRow-id"
         >
-          Ergonomic Plastic Bacon
+          <div
+            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          >
+            Ergonomic Plastic Bacon
+          </div>
         </div>
         <div
           class="ExtendedPageHeader-action-id"
@@ -205360,9 +206165,13 @@ exports[`Storyshots Views / Products / Product image details when loaded data 1`
         data-test-id="page-header"
       >
         <div
-          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          class="ExtendedPageHeader-titleRow-id"
         >
-          Edit Media
+          <div
+            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          >
+            Edit Media
+          </div>
         </div>
         <div
           class="ExtendedPageHeader-action-id"
@@ -205584,9 +206393,13 @@ exports[`Storyshots Views / Products / Product image details when loading data 1
         data-test-id="page-header"
       >
         <div
-          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          class="ExtendedPageHeader-titleRow-id"
         >
-          Edit Media
+          <div
+            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          >
+            Edit Media
+          </div>
         </div>
         <div
           class="ExtendedPageHeader-action-id"
@@ -205741,9 +206554,41 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
       data-test-id="page-header"
     >
       <div
-        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+        class="ExtendedPageHeader-titleRow-id"
       >
-        Products
+        <div
+          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+        >
+          Products
+        </div>
+        <div
+          class="ProductListPage-settings-id"
+          data-test="menu"
+        >
+          <button
+            aria-haspopup="true"
+            aria-label="More"
+            class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
+            color="primary"
+            data-test-id="showMoreButton"
+            tabindex="0"
+            type="button"
+          >
+            <svg
+              aria-hidden="true"
+              class="MuiSvgIcon-root-id"
+              focusable="false"
+              viewBox="0 0 24 24"
+            >
+              <path
+                clip-rule="evenodd"
+                d="M10 18C10 16.8954 10.8954 16 12 16C13.1046 16 14 16.8954 14 18C14 19.1046 13.1046 20 12 20C10.8954 20 10 19.1046 10 18ZM10 12C10 10.8954 10.8954 10 12 10C13.1046 10 14 10.8954 14 12C14 13.1046 13.1046 14 12 14C10.8954 14 10 13.1046 10 12ZM12 4C10.8954 4 10 4.89543 10 6C10 7.10457 10.8954 8 12 8C13.1046 8 14 7.10457 14 6C14 4.89543 13.1046 4 12 4Z"
+                fill="currentColor"
+                fill-rule="evenodd"
+              />
+            </svg>
+          </button>
+        </div>
       </div>
       <div
         class="ExtendedPageHeader-action-id"
@@ -205756,34 +206601,6 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
           >
             100/1000 SKUs used
           </div>
-          <div
-            class="ProductListPage-settings-id"
-            data-test="menu"
-          >
-            <button
-              aria-haspopup="true"
-              aria-label="More"
-              class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-              color="primary"
-              data-test-id="showMoreButton"
-              tabindex="0"
-              type="button"
-            >
-              <svg
-                aria-hidden="true"
-                class="MuiSvgIcon-root-id"
-                focusable="false"
-                viewBox="0 0 24 24"
-              >
-                <path
-                  clip-rule="evenodd"
-                  d="M10 18C10 16.8954 10.8954 16 12 16C13.1046 16 14 16.8954 14 18C14 19.1046 13.1046 20 12 20C10.8954 20 10 19.1046 10 18ZM10 12C10 10.8954 10.8954 10 12 10C13.1046 10 14 10.8954 14 12C14 13.1046 13.1046 14 12 14C10.8954 14 10 13.1046 10 12ZM12 4C10.8954 4 10 4.89543 10 6C10 7.10457 10.8954 8 12 8C13.1046 8 14 7.10457 14 6C14 4.89543 13.1046 4 12 4Z"
-                  fill="currentColor"
-                  fill-rule="evenodd"
-                />
-              </svg>
-            </button>
-          </div>
           <div
             class="ProductListPage-columnPicker-id"
           >
@@ -205817,6 +206634,7 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
           >
             <button
               class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButtonGroup-grouped-id MuiButtonGroup-groupedHorizontal-id MuiButtonGroup-groupedContained-id MuiButtonGroup-groupedContainedHorizontal-id MuiButtonGroup-groupedContainedPrimary-id MuiButton-containedPrimary-id"
+              style="width:100%"
               tabindex="0"
               type="button"
             >
@@ -208427,9 +209245,41 @@ exports[`Storyshots Views / Products / Product list limits reached 1`] = `
       data-test-id="page-header"
     >
       <div
-        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+        class="ExtendedPageHeader-titleRow-id"
       >
-        Products
+        <div
+          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+        >
+          Products
+        </div>
+        <div
+          class="ProductListPage-settings-id"
+          data-test="menu"
+        >
+          <button
+            aria-haspopup="true"
+            aria-label="More"
+            class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
+            color="primary"
+            data-test-id="showMoreButton"
+            tabindex="0"
+            type="button"
+          >
+            <svg
+              aria-hidden="true"
+              class="MuiSvgIcon-root-id"
+              focusable="false"
+              viewBox="0 0 24 24"
+            >
+              <path
+                clip-rule="evenodd"
+                d="M10 18C10 16.8954 10.8954 16 12 16C13.1046 16 14 16.8954 14 18C14 19.1046 13.1046 20 12 20C10.8954 20 10 19.1046 10 18ZM10 12C10 10.8954 10.8954 10 12 10C13.1046 10 14 10.8954 14 12C14 13.1046 13.1046 14 12 14C10.8954 14 10 13.1046 10 12ZM12 4C10.8954 4 10 4.89543 10 6C10 7.10457 10.8954 8 12 8C13.1046 8 14 7.10457 14 6C14 4.89543 13.1046 4 12 4Z"
+                fill="currentColor"
+                fill-rule="evenodd"
+              />
+            </svg>
+          </button>
+        </div>
       </div>
       <div
         class="ExtendedPageHeader-action-id"
@@ -208442,34 +209292,6 @@ exports[`Storyshots Views / Products / Product list limits reached 1`] = `
           >
             1000/1000 SKUs used
           </div>
-          <div
-            class="ProductListPage-settings-id"
-            data-test="menu"
-          >
-            <button
-              aria-haspopup="true"
-              aria-label="More"
-              class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-              color="primary"
-              data-test-id="showMoreButton"
-              tabindex="0"
-              type="button"
-            >
-              <svg
-                aria-hidden="true"
-                class="MuiSvgIcon-root-id"
-                focusable="false"
-                viewBox="0 0 24 24"
-              >
-                <path
-                  clip-rule="evenodd"
-                  d="M10 18C10 16.8954 10.8954 16 12 16C13.1046 16 14 16.8954 14 18C14 19.1046 13.1046 20 12 20C10.8954 20 10 19.1046 10 18ZM10 12C10 10.8954 10.8954 10 12 10C13.1046 10 14 10.8954 14 12C14 13.1046 13.1046 14 12 14C10.8954 14 10 13.1046 10 12ZM12 4C10.8954 4 10 4.89543 10 6C10 7.10457 10.8954 8 12 8C13.1046 8 14 7.10457 14 6C14 4.89543 13.1046 4 12 4Z"
-                  fill="currentColor"
-                  fill-rule="evenodd"
-                />
-              </svg>
-            </button>
-          </div>
           <div
             class="ProductListPage-columnPicker-id"
           >
@@ -208504,6 +209326,7 @@ exports[`Storyshots Views / Products / Product list limits reached 1`] = `
             <button
               class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButtonGroup-grouped-id MuiButtonGroup-groupedHorizontal-id MuiButtonGroup-groupedContained-id MuiButtonGroup-groupedContainedHorizontal-id MuiButtonGroup-groupedContainedPrimary-id MuiButtonGroup-disabled-id MuiButton-containedPrimary-id MuiButton-disabled-id MuiButtonBase-disabled-id"
               disabled=""
+              style="width:100%"
               tabindex="-1"
               type="button"
             >
@@ -211193,9 +212016,41 @@ exports[`Storyshots Views / Products / Product list loading 1`] = `
       data-test-id="page-header"
     >
       <div
-        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+        class="ExtendedPageHeader-titleRow-id"
       >
-        Products
+        <div
+          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+        >
+          Products
+        </div>
+        <div
+          class="ProductListPage-settings-id"
+          data-test="menu"
+        >
+          <button
+            aria-haspopup="true"
+            aria-label="More"
+            class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
+            color="primary"
+            data-test-id="showMoreButton"
+            tabindex="0"
+            type="button"
+          >
+            <svg
+              aria-hidden="true"
+              class="MuiSvgIcon-root-id"
+              focusable="false"
+              viewBox="0 0 24 24"
+            >
+              <path
+                clip-rule="evenodd"
+                d="M10 18C10 16.8954 10.8954 16 12 16C13.1046 16 14 16.8954 14 18C14 19.1046 13.1046 20 12 20C10.8954 20 10 19.1046 10 18ZM10 12C10 10.8954 10.8954 10 12 10C13.1046 10 14 10.8954 14 12C14 13.1046 13.1046 14 12 14C10.8954 14 10 13.1046 10 12ZM12 4C10.8954 4 10 4.89543 10 6C10 7.10457 10.8954 8 12 8C13.1046 8 14 7.10457 14 6C14 4.89543 13.1046 4 12 4Z"
+                fill="currentColor"
+                fill-rule="evenodd"
+              />
+            </svg>
+          </button>
+        </div>
       </div>
       <div
         class="ExtendedPageHeader-action-id"
@@ -211208,34 +212063,6 @@ exports[`Storyshots Views / Products / Product list loading 1`] = `
           >
             100/1000 SKUs used
           </div>
-          <div
-            class="ProductListPage-settings-id"
-            data-test="menu"
-          >
-            <button
-              aria-haspopup="true"
-              aria-label="More"
-              class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-              color="primary"
-              data-test-id="showMoreButton"
-              tabindex="0"
-              type="button"
-            >
-              <svg
-                aria-hidden="true"
-                class="MuiSvgIcon-root-id"
-                focusable="false"
-                viewBox="0 0 24 24"
-              >
-                <path
-                  clip-rule="evenodd"
-                  d="M10 18C10 16.8954 10.8954 16 12 16C13.1046 16 14 16.8954 14 18C14 19.1046 13.1046 20 12 20C10.8954 20 10 19.1046 10 18ZM10 12C10 10.8954 10.8954 10 12 10C13.1046 10 14 10.8954 14 12C14 13.1046 13.1046 14 12 14C10.8954 14 10 13.1046 10 12ZM12 4C10.8954 4 10 4.89543 10 6C10 7.10457 10.8954 8 12 8C13.1046 8 14 7.10457 14 6C14 4.89543 13.1046 4 12 4Z"
-                  fill="currentColor"
-                  fill-rule="evenodd"
-                />
-              </svg>
-            </button>
-          </div>
           <div
             class="ProductListPage-columnPicker-id"
           >
@@ -211269,6 +212096,7 @@ exports[`Storyshots Views / Products / Product list loading 1`] = `
           >
             <button
               class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButtonGroup-grouped-id MuiButtonGroup-groupedHorizontal-id MuiButtonGroup-groupedContained-id MuiButtonGroup-groupedContainedHorizontal-id MuiButtonGroup-groupedContainedPrimary-id MuiButton-containedPrimary-id"
+              style="width:100%"
               tabindex="0"
               type="button"
             >
@@ -211748,9 +212576,41 @@ exports[`Storyshots Views / Products / Product list no channels 1`] = `
       data-test-id="page-header"
     >
       <div
-        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+        class="ExtendedPageHeader-titleRow-id"
       >
-        Products
+        <div
+          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+        >
+          Products
+        </div>
+        <div
+          class="ProductListPage-settings-id"
+          data-test="menu"
+        >
+          <button
+            aria-haspopup="true"
+            aria-label="More"
+            class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
+            color="primary"
+            data-test-id="showMoreButton"
+            tabindex="0"
+            type="button"
+          >
+            <svg
+              aria-hidden="true"
+              class="MuiSvgIcon-root-id"
+              focusable="false"
+              viewBox="0 0 24 24"
+            >
+              <path
+                clip-rule="evenodd"
+                d="M10 18C10 16.8954 10.8954 16 12 16C13.1046 16 14 16.8954 14 18C14 19.1046 13.1046 20 12 20C10.8954 20 10 19.1046 10 18ZM10 12C10 10.8954 10.8954 10 12 10C13.1046 10 14 10.8954 14 12C14 13.1046 13.1046 14 12 14C10.8954 14 10 13.1046 10 12ZM12 4C10.8954 4 10 4.89543 10 6C10 7.10457 10.8954 8 12 8C13.1046 8 14 7.10457 14 6C14 4.89543 13.1046 4 12 4Z"
+                fill="currentColor"
+                fill-rule="evenodd"
+              />
+            </svg>
+          </button>
+        </div>
       </div>
       <div
         class="ExtendedPageHeader-action-id"
@@ -211763,34 +212623,6 @@ exports[`Storyshots Views / Products / Product list no channels 1`] = `
           >
             100/1000 SKUs used
           </div>
-          <div
-            class="ProductListPage-settings-id"
-            data-test="menu"
-          >
-            <button
-              aria-haspopup="true"
-              aria-label="More"
-              class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-              color="primary"
-              data-test-id="showMoreButton"
-              tabindex="0"
-              type="button"
-            >
-              <svg
-                aria-hidden="true"
-                class="MuiSvgIcon-root-id"
-                focusable="false"
-                viewBox="0 0 24 24"
-              >
-                <path
-                  clip-rule="evenodd"
-                  d="M10 18C10 16.8954 10.8954 16 12 16C13.1046 16 14 16.8954 14 18C14 19.1046 13.1046 20 12 20C10.8954 20 10 19.1046 10 18ZM10 12C10 10.8954 10.8954 10 12 10C13.1046 10 14 10.8954 14 12C14 13.1046 13.1046 14 12 14C10.8954 14 10 13.1046 10 12ZM12 4C10.8954 4 10 4.89543 10 6C10 7.10457 10.8954 8 12 8C13.1046 8 14 7.10457 14 6C14 4.89543 13.1046 4 12 4Z"
-                  fill="currentColor"
-                  fill-rule="evenodd"
-                />
-              </svg>
-            </button>
-          </div>
           <div
             class="ProductListPage-columnPicker-id"
           >
@@ -211824,6 +212656,7 @@ exports[`Storyshots Views / Products / Product list no channels 1`] = `
           >
             <button
               class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButtonGroup-grouped-id MuiButtonGroup-groupedHorizontal-id MuiButtonGroup-groupedContained-id MuiButtonGroup-groupedContainedHorizontal-id MuiButtonGroup-groupedContainedPrimary-id MuiButton-containedPrimary-id"
+              style="width:100%"
               tabindex="0"
               type="button"
             >
@@ -214134,9 +214967,41 @@ exports[`Storyshots Views / Products / Product list no data 1`] = `
       data-test-id="page-header"
     >
       <div
-        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+        class="ExtendedPageHeader-titleRow-id"
       >
-        Products
+        <div
+          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+        >
+          Products
+        </div>
+        <div
+          class="ProductListPage-settings-id"
+          data-test="menu"
+        >
+          <button
+            aria-haspopup="true"
+            aria-label="More"
+            class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
+            color="primary"
+            data-test-id="showMoreButton"
+            tabindex="0"
+            type="button"
+          >
+            <svg
+              aria-hidden="true"
+              class="MuiSvgIcon-root-id"
+              focusable="false"
+              viewBox="0 0 24 24"
+            >
+              <path
+                clip-rule="evenodd"
+                d="M10 18C10 16.8954 10.8954 16 12 16C13.1046 16 14 16.8954 14 18C14 19.1046 13.1046 20 12 20C10.8954 20 10 19.1046 10 18ZM10 12C10 10.8954 10.8954 10 12 10C13.1046 10 14 10.8954 14 12C14 13.1046 13.1046 14 12 14C10.8954 14 10 13.1046 10 12ZM12 4C10.8954 4 10 4.89543 10 6C10 7.10457 10.8954 8 12 8C13.1046 8 14 7.10457 14 6C14 4.89543 13.1046 4 12 4Z"
+                fill="currentColor"
+                fill-rule="evenodd"
+              />
+            </svg>
+          </button>
+        </div>
       </div>
       <div
         class="ExtendedPageHeader-action-id"
@@ -214149,34 +215014,6 @@ exports[`Storyshots Views / Products / Product list no data 1`] = `
           >
             100/1000 SKUs used
           </div>
-          <div
-            class="ProductListPage-settings-id"
-            data-test="menu"
-          >
-            <button
-              aria-haspopup="true"
-              aria-label="More"
-              class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-              color="primary"
-              data-test-id="showMoreButton"
-              tabindex="0"
-              type="button"
-            >
-              <svg
-                aria-hidden="true"
-                class="MuiSvgIcon-root-id"
-                focusable="false"
-                viewBox="0 0 24 24"
-              >
-                <path
-                  clip-rule="evenodd"
-                  d="M10 18C10 16.8954 10.8954 16 12 16C13.1046 16 14 16.8954 14 18C14 19.1046 13.1046 20 12 20C10.8954 20 10 19.1046 10 18ZM10 12C10 10.8954 10.8954 10 12 10C13.1046 10 14 10.8954 14 12C14 13.1046 13.1046 14 12 14C10.8954 14 10 13.1046 10 12ZM12 4C10.8954 4 10 4.89543 10 6C10 7.10457 10.8954 8 12 8C13.1046 8 14 7.10457 14 6C14 4.89543 13.1046 4 12 4Z"
-                  fill="currentColor"
-                  fill-rule="evenodd"
-                />
-              </svg>
-            </button>
-          </div>
           <div
             class="ProductListPage-columnPicker-id"
           >
@@ -214210,6 +215047,7 @@ exports[`Storyshots Views / Products / Product list no data 1`] = `
           >
             <button
               class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButtonGroup-grouped-id MuiButtonGroup-groupedHorizontal-id MuiButtonGroup-groupedContained-id MuiButtonGroup-groupedContainedHorizontal-id MuiButtonGroup-groupedContainedPrimary-id MuiButton-containedPrimary-id"
+              style="width:100%"
               tabindex="0"
               type="button"
             >
@@ -214531,9 +215369,41 @@ exports[`Storyshots Views / Products / Product list no limits 1`] = `
       data-test-id="page-header"
     >
       <div
-        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+        class="ExtendedPageHeader-titleRow-id"
       >
-        Products
+        <div
+          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+        >
+          Products
+        </div>
+        <div
+          class="ProductListPage-settings-id"
+          data-test="menu"
+        >
+          <button
+            aria-haspopup="true"
+            aria-label="More"
+            class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
+            color="primary"
+            data-test-id="showMoreButton"
+            tabindex="0"
+            type="button"
+          >
+            <svg
+              aria-hidden="true"
+              class="MuiSvgIcon-root-id"
+              focusable="false"
+              viewBox="0 0 24 24"
+            >
+              <path
+                clip-rule="evenodd"
+                d="M10 18C10 16.8954 10.8954 16 12 16C13.1046 16 14 16.8954 14 18C14 19.1046 13.1046 20 12 20C10.8954 20 10 19.1046 10 18ZM10 12C10 10.8954 10.8954 10 12 10C13.1046 10 14 10.8954 14 12C14 13.1046 13.1046 14 12 14C10.8954 14 10 13.1046 10 12ZM12 4C10.8954 4 10 4.89543 10 6C10 7.10457 10.8954 8 12 8C13.1046 8 14 7.10457 14 6C14 4.89543 13.1046 4 12 4Z"
+                fill="currentColor"
+                fill-rule="evenodd"
+              />
+            </svg>
+          </button>
+        </div>
       </div>
       <div
         class="ExtendedPageHeader-action-id"
@@ -214541,34 +215411,6 @@ exports[`Storyshots Views / Products / Product list no limits 1`] = `
         <div
           class="PageHeader-root-id"
         >
-          <div
-            class="ProductListPage-settings-id"
-            data-test="menu"
-          >
-            <button
-              aria-haspopup="true"
-              aria-label="More"
-              class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-              color="primary"
-              data-test-id="showMoreButton"
-              tabindex="0"
-              type="button"
-            >
-              <svg
-                aria-hidden="true"
-                class="MuiSvgIcon-root-id"
-                focusable="false"
-                viewBox="0 0 24 24"
-              >
-                <path
-                  clip-rule="evenodd"
-                  d="M10 18C10 16.8954 10.8954 16 12 16C13.1046 16 14 16.8954 14 18C14 19.1046 13.1046 20 12 20C10.8954 20 10 19.1046 10 18ZM10 12C10 10.8954 10.8954 10 12 10C13.1046 10 14 10.8954 14 12C14 13.1046 13.1046 14 12 14C10.8954 14 10 13.1046 10 12ZM12 4C10.8954 4 10 4.89543 10 6C10 7.10457 10.8954 8 12 8C13.1046 8 14 7.10457 14 6C14 4.89543 13.1046 4 12 4Z"
-                  fill="currentColor"
-                  fill-rule="evenodd"
-                />
-              </svg>
-            </button>
-          </div>
           <div
             class="ProductListPage-columnPicker-id"
           >
@@ -214602,6 +215444,7 @@ exports[`Storyshots Views / Products / Product list no limits 1`] = `
           >
             <button
               class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButtonGroup-grouped-id MuiButtonGroup-groupedHorizontal-id MuiButtonGroup-groupedContained-id MuiButtonGroup-groupedContainedHorizontal-id MuiButtonGroup-groupedContainedPrimary-id MuiButton-containedPrimary-id"
+              style="width:100%"
               tabindex="0"
               type="button"
             >
@@ -217212,9 +218055,41 @@ exports[`Storyshots Views / Products / Product list with data 1`] = `
       data-test-id="page-header"
     >
       <div
-        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+        class="ExtendedPageHeader-titleRow-id"
       >
-        Products
+        <div
+          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+        >
+          Products
+        </div>
+        <div
+          class="ProductListPage-settings-id"
+          data-test="menu"
+        >
+          <button
+            aria-haspopup="true"
+            aria-label="More"
+            class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
+            color="primary"
+            data-test-id="showMoreButton"
+            tabindex="0"
+            type="button"
+          >
+            <svg
+              aria-hidden="true"
+              class="MuiSvgIcon-root-id"
+              focusable="false"
+              viewBox="0 0 24 24"
+            >
+              <path
+                clip-rule="evenodd"
+                d="M10 18C10 16.8954 10.8954 16 12 16C13.1046 16 14 16.8954 14 18C14 19.1046 13.1046 20 12 20C10.8954 20 10 19.1046 10 18ZM10 12C10 10.8954 10.8954 10 12 10C13.1046 10 14 10.8954 14 12C14 13.1046 13.1046 14 12 14C10.8954 14 10 13.1046 10 12ZM12 4C10.8954 4 10 4.89543 10 6C10 7.10457 10.8954 8 12 8C13.1046 8 14 7.10457 14 6C14 4.89543 13.1046 4 12 4Z"
+                fill="currentColor"
+                fill-rule="evenodd"
+              />
+            </svg>
+          </button>
+        </div>
       </div>
       <div
         class="ExtendedPageHeader-action-id"
@@ -217227,34 +218102,6 @@ exports[`Storyshots Views / Products / Product list with data 1`] = `
           >
             100/1000 SKUs used
           </div>
-          <div
-            class="ProductListPage-settings-id"
-            data-test="menu"
-          >
-            <button
-              aria-haspopup="true"
-              aria-label="More"
-              class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-              color="primary"
-              data-test-id="showMoreButton"
-              tabindex="0"
-              type="button"
-            >
-              <svg
-                aria-hidden="true"
-                class="MuiSvgIcon-root-id"
-                focusable="false"
-                viewBox="0 0 24 24"
-              >
-                <path
-                  clip-rule="evenodd"
-                  d="M10 18C10 16.8954 10.8954 16 12 16C13.1046 16 14 16.8954 14 18C14 19.1046 13.1046 20 12 20C10.8954 20 10 19.1046 10 18ZM10 12C10 10.8954 10.8954 10 12 10C13.1046 10 14 10.8954 14 12C14 13.1046 13.1046 14 12 14C10.8954 14 10 13.1046 10 12ZM12 4C10.8954 4 10 4.89543 10 6C10 7.10457 10.8954 8 12 8C13.1046 8 14 7.10457 14 6C14 4.89543 13.1046 4 12 4Z"
-                  fill="currentColor"
-                  fill-rule="evenodd"
-                />
-              </svg>
-            </button>
-          </div>
           <div
             class="ProductListPage-columnPicker-id"
           >
@@ -217288,6 +218135,7 @@ exports[`Storyshots Views / Products / Product list with data 1`] = `
           >
             <button
               class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButtonGroup-grouped-id MuiButtonGroup-groupedHorizontal-id MuiButtonGroup-groupedContained-id MuiButtonGroup-groupedContainedHorizontal-id MuiButtonGroup-groupedContainedPrimary-id MuiButton-containedPrimary-id"
+              style="width:100%"
               tabindex="0"
               type="button"
             >
@@ -219898,9 +220746,13 @@ exports[`Storyshots Views / Products / Product variant details attribute errors
       data-test-id="page-header"
     >
       <div
-        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+        class="ExtendedPageHeader-titleRow-id"
       >
-        Extended Hard
+        <div
+          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+        >
+          Extended Hard
+        </div>
       </div>
       <div
         class="ExtendedPageHeader-action-id"
@@ -221752,9 +222604,13 @@ exports[`Storyshots Views / Products / Product variant details no warehouses 1`]
       data-test-id="page-header"
     >
       <div
-        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+        class="ExtendedPageHeader-titleRow-id"
       >
-        Extended Hard
+        <div
+          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+        >
+          Extended Hard
+        </div>
       </div>
       <div
         class="ExtendedPageHeader-action-id"
@@ -223596,9 +224452,13 @@ exports[`Storyshots Views / Products / Product variant details when loaded data
       data-test-id="page-header"
     >
       <div
-        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+        class="ExtendedPageHeader-titleRow-id"
       >
-        Extended Hard
+        <div
+          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+        >
+          Extended Hard
+        </div>
       </div>
       <div
         class="ExtendedPageHeader-action-id"
@@ -225440,15 +226300,19 @@ exports[`Storyshots Views / Products / Product variant details when loading data
       data-test-id="page-header"
     >
       <div
-        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+        class="ExtendedPageHeader-titleRow-id"
       >
-        <span
-          class="Skeleton-skeleton-id"
-          data-test-id="skeleton"
-          style="width:10em"
+        <div
+          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
         >
-          ‌
-        </span>
+          <span
+            class="Skeleton-skeleton-id"
+            data-test-id="skeleton"
+            style="width:10em"
+          >
+            ‌
+          </span>
+        </div>
       </div>
       <div
         class="ExtendedPageHeader-action-id"
@@ -226335,9 +227199,13 @@ exports[`Storyshots Views / Shipping / Create shipping zone default 1`] = `
         data-test-id="page-header"
       >
         <div
-          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          class="ExtendedPageHeader-titleRow-id"
         >
-          Create New Shipping Zone
+          <div
+            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          >
+            Create New Shipping Zone
+          </div>
         </div>
         <div
           class="ExtendedPageHeader-action-id"
@@ -226556,9 +227424,13 @@ exports[`Storyshots Views / Shipping / Create shipping zone form errors 1`] = `
         data-test-id="page-header"
       >
         <div
-          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          class="ExtendedPageHeader-titleRow-id"
         >
-          Create New Shipping Zone
+          <div
+            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          >
+            Create New Shipping Zone
+          </div>
         </div>
         <div
           class="ExtendedPageHeader-action-id"
@@ -226782,9 +227654,13 @@ exports[`Storyshots Views / Shipping / Create shipping zone loading 1`] = `
         data-test-id="page-header"
       >
         <div
-          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          class="ExtendedPageHeader-titleRow-id"
         >
-          Create New Shipping Zone
+          <div
+            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          >
+            Create New Shipping Zone
+          </div>
         </div>
         <div
           class="ExtendedPageHeader-action-id"
@@ -227006,9 +227882,13 @@ exports[`Storyshots Views / Shipping / Shipping rate create price rate 1`] = `
         data-test-id="page-header"
       >
         <div
-          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          class="ExtendedPageHeader-titleRow-id"
         >
-          DB Schenker
+          <div
+            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          >
+            DB Schenker
+          </div>
         </div>
         <div
           class="ExtendedPageHeader-action-id"
@@ -228278,9 +229158,13 @@ exports[`Storyshots Views / Shipping / Shipping rate create weight rate 1`] = `
         data-test-id="page-header"
       >
         <div
-          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          class="ExtendedPageHeader-titleRow-id"
         >
-          DB Schenker
+          <div
+            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          >
+            DB Schenker
+          </div>
         </div>
         <div
           class="ExtendedPageHeader-action-id"
@@ -229477,15 +230361,19 @@ exports[`Storyshots Views / Shipping / Shipping rate loading 1`] = `
         data-test-id="page-header"
       >
         <div
-          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          class="ExtendedPageHeader-titleRow-id"
         >
-          <span
-            class="Skeleton-skeleton-id"
-            data-test-id="skeleton"
-            style="width:10em"
+          <div
+            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
           >
-            ‌
-          </span>
+            <span
+              class="Skeleton-skeleton-id"
+              data-test-id="skeleton"
+              style="width:10em"
+            >
+              ‌
+            </span>
+          </div>
         </div>
         <div
           class="ExtendedPageHeader-action-id"
@@ -230445,9 +231333,13 @@ exports[`Storyshots Views / Shipping / Shipping rate update price rate 1`] = `
         data-test-id="page-header"
       >
         <div
-          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          class="ExtendedPageHeader-titleRow-id"
         >
-          UPS
+          <div
+            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          >
+            UPS
+          </div>
         </div>
         <div
           class="ExtendedPageHeader-action-id"
@@ -231638,9 +232530,13 @@ exports[`Storyshots Views / Shipping / Shipping rate update weight rate 1`] = `
         data-test-id="page-header"
       >
         <div
-          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          class="ExtendedPageHeader-titleRow-id"
         >
-          DB Schenker
+          <div
+            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          >
+            DB Schenker
+          </div>
         </div>
         <div
           class="ExtendedPageHeader-action-id"
@@ -232920,9 +233816,13 @@ exports[`Storyshots Views / Shipping / Shipping zone details default 1`] = `
         data-test-id="page-header"
       >
         <div
-          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          class="ExtendedPageHeader-titleRow-id"
         >
-          Europe
+          <div
+            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          >
+            Europe
+          </div>
         </div>
         <div
           class="ExtendedPageHeader-action-id"
@@ -234015,9 +234915,13 @@ exports[`Storyshots Views / Shipping / Shipping zone details form errors 1`] = `
         data-test-id="page-header"
       >
         <div
-          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          class="ExtendedPageHeader-titleRow-id"
         >
-          Europe
+          <div
+            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          >
+            Europe
+          </div>
         </div>
         <div
           class="ExtendedPageHeader-action-id"
@@ -235115,15 +236019,19 @@ exports[`Storyshots Views / Shipping / Shipping zone details loading 1`] = `
         data-test-id="page-header"
       >
         <div
-          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          class="ExtendedPageHeader-titleRow-id"
         >
-          <span
-            class="Skeleton-skeleton-id"
-            data-test-id="skeleton"
-            style="width:10em"
+          <div
+            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
           >
-            ‌
-          </span>
+            <span
+              class="Skeleton-skeleton-id"
+              data-test-id="skeleton"
+              style="width:10em"
+            >
+              ‌
+            </span>
+          </div>
         </div>
         <div
           class="ExtendedPageHeader-action-id"
@@ -235958,9 +236866,13 @@ exports[`Storyshots Views / Shipping / Shipping zones list default 1`] = `
       data-test-id="page-header"
     >
       <div
-        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+        class="ExtendedPageHeader-titleRow-id"
       >
-        Shipping
+        <div
+          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+        >
+          Shipping
+        </div>
       </div>
       <div
         class="ExtendedPageHeader-action-id"
@@ -236659,9 +237571,13 @@ exports[`Storyshots Views / Shipping / Shipping zones list loading 1`] = `
       data-test-id="page-header"
     >
       <div
-        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+        class="ExtendedPageHeader-titleRow-id"
       >
-        Shipping
+        <div
+          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+        >
+          Shipping
+        </div>
       </div>
       <div
         class="ExtendedPageHeader-action-id"
@@ -237076,9 +237992,13 @@ exports[`Storyshots Views / Shipping / Shipping zones list no data 1`] = `
       data-test-id="page-header"
     >
       <div
-        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+        class="ExtendedPageHeader-titleRow-id"
       >
-        Shipping
+        <div
+          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+        >
+          Shipping
+        </div>
       </div>
       <div
         class="ExtendedPageHeader-action-id"
@@ -237374,9 +238294,13 @@ exports[`Storyshots Views / Shipping / Shipping zones list no site settings perm
       data-test-id="page-header"
     >
       <div
-        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+        class="ExtendedPageHeader-titleRow-id"
       >
-        Shipping
+        <div
+          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+        >
+          Shipping
+        </div>
       </div>
       <div
         class="ExtendedPageHeader-action-id"
@@ -237976,9 +238900,13 @@ exports[`Storyshots Views / Site settings / Page default 1`] = `
         data-test-id="page-header"
       >
         <div
-          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          class="ExtendedPageHeader-titleRow-id"
         >
-          General Information
+          <div
+            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          >
+            General Information
+          </div>
         </div>
         <div
           class="ExtendedPageHeader-action-id"
@@ -238719,9 +239647,13 @@ exports[`Storyshots Views / Site settings / Page form errors 1`] = `
         data-test-id="page-header"
       >
         <div
-          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          class="ExtendedPageHeader-titleRow-id"
         >
-          General Information
+          <div
+            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          >
+            General Information
+          </div>
         </div>
         <div
           class="ExtendedPageHeader-action-id"
@@ -239467,9 +240399,13 @@ exports[`Storyshots Views / Site settings / Page loading 1`] = `
         data-test-id="page-header"
       >
         <div
-          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          class="ExtendedPageHeader-titleRow-id"
         >
-          General Information
+          <div
+            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          >
+            General Information
+          </div>
         </div>
         <div
           class="ExtendedPageHeader-action-id"
@@ -240224,9 +241160,13 @@ exports[`Storyshots Views / Staff / Staff member details default 1`] = `
         data-test-id="page-header"
       >
         <div
-          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          class="ExtendedPageHeader-titleRow-id"
         >
-          Jacob Smith
+          <div
+            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          >
+            Jacob Smith
+          </div>
         </div>
         <div
           class="ExtendedPageHeader-action-id"
@@ -240649,9 +241589,13 @@ exports[`Storyshots Views / Staff / Staff member details himself 1`] = `
         data-test-id="page-header"
       >
         <div
-          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          class="ExtendedPageHeader-titleRow-id"
         >
-          Jacob Smith
+          <div
+            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          >
+            Jacob Smith
+          </div>
         </div>
         <div
           class="ExtendedPageHeader-action-id"
@@ -240996,15 +241940,19 @@ exports[`Storyshots Views / Staff / Staff member details loading 1`] = `
         data-test-id="page-header"
       >
         <div
-          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          class="ExtendedPageHeader-titleRow-id"
         >
-          <span
-            class="Skeleton-skeleton-id"
-            data-test-id="skeleton"
-            style="width:10em"
+          <div
+            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
           >
-            ‌
-          </span>
+            <span
+              class="Skeleton-skeleton-id"
+              data-test-id="skeleton"
+              style="width:10em"
+            >
+              ‌
+            </span>
+          </div>
         </div>
         <div
           class="ExtendedPageHeader-action-id"
@@ -241359,9 +242307,13 @@ exports[`Storyshots Views / Staff / Staff member details not admin 1`] = `
         data-test-id="page-header"
       >
         <div
-          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          class="ExtendedPageHeader-titleRow-id"
         >
-          Jacob Smith
+          <div
+            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          >
+            Jacob Smith
+          </div>
         </div>
         <div
           class="ExtendedPageHeader-action-id"
@@ -241549,9 +242501,13 @@ exports[`Storyshots Views / Staff / Staff members default 1`] = `
       data-test-id="page-header"
     >
       <div
-        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+        class="ExtendedPageHeader-titleRow-id"
       >
-        Staff Members
+        <div
+          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+        >
+          Staff Members
+        </div>
       </div>
       <div
         class="ExtendedPageHeader-action-id"
@@ -242201,9 +243157,13 @@ exports[`Storyshots Views / Staff / Staff members limits reached 1`] = `
       data-test-id="page-header"
     >
       <div
-        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+        class="ExtendedPageHeader-titleRow-id"
       >
-        Staff Members
+        <div
+          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+        >
+          Staff Members
+        </div>
       </div>
       <div
         class="ExtendedPageHeader-action-id"
@@ -242933,9 +243893,13 @@ exports[`Storyshots Views / Staff / Staff members no limits 1`] = `
       data-test-id="page-header"
     >
       <div
-        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+        class="ExtendedPageHeader-titleRow-id"
       >
-        Staff Members
+        <div
+          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+        >
+          Staff Members
+        </div>
       </div>
       <div
         class="ExtendedPageHeader-action-id"
@@ -243580,9 +244544,13 @@ exports[`Storyshots Views / Staff / Staff members when loading 1`] = `
       data-test-id="page-header"
     >
       <div
-        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+        class="ExtendedPageHeader-titleRow-id"
       >
-        Staff Members
+        <div
+          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+        >
+          Staff Members
+        </div>
       </div>
       <div
         class="ExtendedPageHeader-action-id"
@@ -243911,9 +244879,13 @@ exports[`Storyshots Views / Taxes / Country List default 1`] = `
         data-test-id="page-header"
       >
         <div
-          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          class="ExtendedPageHeader-titleRow-id"
         >
-          Taxes
+          <div
+            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          >
+            Taxes
+          </div>
         </div>
         <div
           class="ExtendedPageHeader-action-id"
@@ -244708,9 +245680,13 @@ exports[`Storyshots Views / Taxes / Country List loading 1`] = `
         data-test-id="page-header"
       >
         <div
-          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          class="ExtendedPageHeader-titleRow-id"
         >
-          Taxes
+          <div
+            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          >
+            Taxes
+          </div>
         </div>
         <div
           class="ExtendedPageHeader-action-id"
@@ -245002,9 +245978,13 @@ exports[`Storyshots Views / Taxes / Reduced Tax Categories default 1`] = `
       data-test-id="page-header"
     >
       <div
-        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+        class="ExtendedPageHeader-titleRow-id"
       >
-        Tax Rates in Austria
+        <div
+          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+        >
+          Tax Rates in Austria
+        </div>
       </div>
       <div
         class="ExtendedPageHeader-action-id"
@@ -245184,15 +246164,19 @@ exports[`Storyshots Views / Taxes / Reduced Tax Categories loading 1`] = `
       data-test-id="page-header"
     >
       <div
-        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+        class="ExtendedPageHeader-titleRow-id"
       >
-        <span
-          class="Skeleton-skeleton-id"
-          data-test-id="skeleton"
-          style="width:10em"
+        <div
+          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
         >
-          ‌
-        </span>
+          <span
+            class="Skeleton-skeleton-id"
+            data-test-id="skeleton"
+            style="width:10em"
+          >
+            ‌
+          </span>
+        </div>
       </div>
       <div
         class="ExtendedPageHeader-action-id"
@@ -245284,9 +246268,13 @@ exports[`Storyshots Views / Translations / Entity list default 1`] = `
       data-test-id="page-header"
     >
       <div
-        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+        class="ExtendedPageHeader-titleRow-id"
       >
-        Translations to English
+        <div
+          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+        >
+          Translations to English
+        </div>
       </div>
       <div
         class="ExtendedPageHeader-action-id"
@@ -245547,9 +246535,13 @@ exports[`Storyshots Views / Translations / Language list default 1`] = `
       data-test-id="page-header"
     >
       <div
-        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+        class="ExtendedPageHeader-titleRow-id"
       >
-        Languages
+        <div
+          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+        >
+          Languages
+        </div>
       </div>
       <div
         class="ExtendedPageHeader-action-id"
@@ -245645,9 +246637,13 @@ exports[`Storyshots Views / Translations / Language list loading 1`] = `
       data-test-id="page-header"
     >
       <div
-        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+        class="ExtendedPageHeader-titleRow-id"
       >
-        Languages
+        <div
+          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+        >
+          Languages
+        </div>
       </div>
       <div
         class="ExtendedPageHeader-action-id"
@@ -245718,9 +246714,13 @@ exports[`Storyshots Views / Translations / Language list no data 1`] = `
       data-test-id="page-header"
     >
       <div
-        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+        class="ExtendedPageHeader-titleRow-id"
       >
-        Languages
+        <div
+          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+        >
+          Languages
+        </div>
       </div>
       <div
         class="ExtendedPageHeader-action-id"
@@ -245787,9 +246787,13 @@ exports[`Storyshots Views / Warehouses / Create warehouse default 1`] = `
         data-test-id="page-header"
       >
         <div
-          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          class="ExtendedPageHeader-titleRow-id"
         >
-          Create Warehouse
+          <div
+            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          >
+            Create Warehouse
+          </div>
         </div>
         <div
           class="ExtendedPageHeader-action-id"
@@ -246227,9 +247231,13 @@ exports[`Storyshots Views / Warehouses / Create warehouse form errors 1`] = `
         data-test-id="page-header"
       >
         <div
-          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          class="ExtendedPageHeader-titleRow-id"
         >
-          Create Warehouse
+          <div
+            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          >
+            Create Warehouse
+          </div>
         </div>
         <div
           class="ExtendedPageHeader-action-id"
@@ -246712,9 +247720,13 @@ exports[`Storyshots Views / Warehouses / Create warehouse loading 1`] = `
         data-test-id="page-header"
       >
         <div
-          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          class="ExtendedPageHeader-titleRow-id"
         >
-          Create Warehouse
+          <div
+            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          >
+            Create Warehouse
+          </div>
         </div>
         <div
           class="ExtendedPageHeader-action-id"
@@ -247161,9 +248173,13 @@ exports[`Storyshots Views / Warehouses / Warehouse details default 1`] = `
         data-test-id="page-header"
       >
         <div
-          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          class="ExtendedPageHeader-titleRow-id"
         >
-          C our wares
+          <div
+            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          >
+            C our wares
+          </div>
         </div>
         <div
           class="ExtendedPageHeader-action-id"
@@ -247906,9 +248922,13 @@ exports[`Storyshots Views / Warehouses / Warehouse details form errors 1`] = `
         data-test-id="page-header"
       >
         <div
-          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          class="ExtendedPageHeader-titleRow-id"
         >
-          C our wares
+          <div
+            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          >
+            C our wares
+          </div>
         </div>
         <div
           class="ExtendedPageHeader-action-id"
@@ -248696,15 +249716,19 @@ exports[`Storyshots Views / Warehouses / Warehouse details loading 1`] = `
         data-test-id="page-header"
       >
         <div
-          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+          class="ExtendedPageHeader-titleRow-id"
         >
-          <span
-            class="Skeleton-skeleton-id"
-            data-test-id="skeleton"
-            style="width:10em"
+          <div
+            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
           >
-            ‌
-          </span>
+            <span
+              class="Skeleton-skeleton-id"
+              data-test-id="skeleton"
+              style="width:10em"
+            >
+              ‌
+            </span>
+          </div>
         </div>
         <div
           class="ExtendedPageHeader-action-id"
@@ -249473,9 +250497,13 @@ exports[`Storyshots Views / Warehouses / Warehouse list default 1`] = `
       data-test-id="page-header"
     >
       <div
-        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+        class="ExtendedPageHeader-titleRow-id"
       >
-        Warehouses
+        <div
+          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+        >
+          Warehouses
+        </div>
       </div>
       <div
         class="ExtendedPageHeader-action-id"
@@ -249987,9 +251015,13 @@ exports[`Storyshots Views / Warehouses / Warehouse list limits reached 1`] = `
       data-test-id="page-header"
     >
       <div
-        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+        class="ExtendedPageHeader-titleRow-id"
       >
-        Warehouses
+        <div
+          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+        >
+          Warehouses
+        </div>
       </div>
       <div
         class="ExtendedPageHeader-action-id"
@@ -250581,9 +251613,13 @@ exports[`Storyshots Views / Warehouses / Warehouse list loading 1`] = `
       data-test-id="page-header"
     >
       <div
-        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+        class="ExtendedPageHeader-titleRow-id"
       >
-        Warehouses
+        <div
+          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+        >
+          Warehouses
+        </div>
       </div>
       <div
         class="ExtendedPageHeader-action-id"
@@ -250913,9 +251949,13 @@ exports[`Storyshots Views / Warehouses / Warehouse list no data 1`] = `
       data-test-id="page-header"
     >
       <div
-        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+        class="ExtendedPageHeader-titleRow-id"
       >
-        Warehouses
+        <div
+          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+        >
+          Warehouses
+        </div>
       </div>
       <div
         class="ExtendedPageHeader-action-id"
@@ -251182,9 +252222,13 @@ exports[`Storyshots Views / Warehouses / Warehouse list no limits 1`] = `
       data-test-id="page-header"
     >
       <div
-        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+        class="ExtendedPageHeader-titleRow-id"
       >
-        Warehouses
+        <div
+          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
+        >
+          Warehouses
+        </div>
       </div>
       <div
         class="ExtendedPageHeader-action-id"