) : (
diff --git a/dotcom-rendering/src/components/LabsSectionHeader.stories.tsx b/dotcom-rendering/src/components/LabsSectionHeader.stories.tsx
index 599fbc6040a..36605196c2c 100644
--- a/dotcom-rendering/src/components/LabsSectionHeader.stories.tsx
+++ b/dotcom-rendering/src/components/LabsSectionHeader.stories.tsx
@@ -15,6 +15,7 @@ const meta = {
title: 'Container Title',
url: '/',
editionId: 'AU',
+ hasPageSkin: false,
},
render: (args) => (
(
+
+
+
+ ),
+};
diff --git a/dotcom-rendering/src/components/LabsSectionHeader.tsx b/dotcom-rendering/src/components/LabsSectionHeader.tsx
index 6f17ddb59d5..8b22910b29f 100644
--- a/dotcom-rendering/src/components/LabsSectionHeader.tsx
+++ b/dotcom-rendering/src/components/LabsSectionHeader.tsx
@@ -5,7 +5,6 @@ import {
space,
textSans14,
textSansBold15,
- until,
} from '@guardian/source/foundations';
import {
Link,
@@ -26,6 +25,7 @@ type Props = {
url?: string;
/** The ID of the edition, used to construct the Labs front URL */
editionId: EditionId;
+ hasPageSkin: boolean;
};
const headerStyles = css`
@@ -36,6 +36,9 @@ const headerStyles = css`
display: flex;
flex-grow: 1;
flex-direction: row;
+`;
+
+const headerStylesFromLeftCol = css`
${from.leftCol} {
flex-direction: column;
}
@@ -47,15 +50,22 @@ const logoStyles = css`
const dividerStylesUntilLeftCol = css`
position: relative;
- ${until.leftCol} {
- margin-right: ${space[4]}px;
+ margin-right: ${space[4]}px;
+ ::after {
+ content: '';
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ right: -${space[2]}px;
+ border-right: 1px solid ${schemePalette('--section-border')};
+ }
+`;
+
+const dividerStylesFromLeftCol = css`
+ ${from.leftCol} {
+ margin-right: unset;
::after {
- content: '';
- position: absolute;
- top: 0;
- bottom: 0;
- right: -${space[2]}px;
- border-right: 1px solid ${schemePalette('--section-border')};
+ display: none;
}
}
`;
@@ -76,7 +86,9 @@ const labelAndAboutStyles = css`
display: flex;
flex-direction: row;
justify-content: space-between;
+`;
+const labelAndAboutStylesFromLeftCol = css`
${between.leftCol.and.wide} {
flex-direction: column;
}
@@ -90,15 +102,17 @@ const labelStyles = css`
const aboutStyles = css`
justify-self: end;
${textSans14}
+`;
+const aboutStylesFromLeftCol = css`
${between.leftCol.and.wide} {
margin-top: ${space[1]}px;
}
`;
-const positionStyles = css`
+const positionStyles = (hasPageSkin: boolean) => css`
right: 0;
- ${from.leftCol} {
+ ${!hasPageSkin && from.leftCol} {
left: 0;
right: auto;
}
@@ -113,9 +127,20 @@ const detailsStyles = css`
}
`;
-export const LabsSectionHeader = ({ title, url, editionId }: Props) => (
-
-
+export const LabsSectionHeader = ({
+ title,
+ url,
+ editionId,
+ hasPageSkin,
+}: Props) => (
+