From 3303342b33958c2e1b1d3493fd406bb298b9ee4c Mon Sep 17 00:00:00 2001
From: James Koster <james@jameskoster.co.uk>
Date: Thu, 12 Dec 2024 16:21:21 +0000
Subject: [PATCH] Fix warnings in Layout document

---
 .../foundations/layout/page-composition.mdx   | 60 ++++++++++---------
 1 file changed, 31 insertions(+), 29 deletions(-)

diff --git a/storybook/stories/foundations/layout/page-composition.mdx b/storybook/stories/foundations/layout/page-composition.mdx
index e64982f2da8b6..d8f0201121b9c 100644
--- a/storybook/stories/foundations/layout/page-composition.mdx
+++ b/storybook/stories/foundations/layout/page-composition.mdx
@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/addon-docs/blocks';
+import { Meta } from '@storybook/blocks';
 import areas from './static/areas.svg';
 import pageLayoutExample1 from './static/page-layout-example-1.svg';
 import pageLayoutExample2 from './static/page-layout-example-2.svg';
@@ -27,32 +27,34 @@ At the highest level admin pages are comprised of _areas_, that can be arranged
 Areas can be combined in different ways depending on the use case. Here are some examples.
 
 <table>
-	<tr>
-		<td style={{verticalAlign: 'top', width: '50%'}}>
-			#### Sidebar, Content Frame and Preview Frame
-			<img src={ pageLayoutExample1 } alt="Diagram illustrating an example of the 'Sidebar, Content Frame and Preview Frame' arrangement" width="100%" />
-
-			A demonstration of this arrangement can be found in the Styles section of the Site Editor, and in the Pages and Templates sections when List layout is selected.
-		</td>
-		<td style={{verticalAlign: 'top', width: '50%'}}>
-			#### Sidebar and Preview Frame
-			<img src={ pageLayoutExample2 } alt="Diagram illustrating an example of the 'Sidebar and Preview Frame' arrangement" width="100%" />
-
-			A demonstration of this arrangement can be found in the Design section.
-		</td>
-	</tr>
-	<tr>
-		<td style={{verticalAlign: 'top', width: '50%'}}>
-			#### Sidebar and Content Frame
-			<img src={ pageLayoutExample3 } alt="Diagram illustrating an example of the 'Sidebar and Content Frame' arrangement" width="100%" />
-
-			A demonstration of this arrangement can be found in the Patterns and Templates sections of the Site Editor, or in the Pages section when Table or Grid layout are selected.
-		</td>
-		<td style={{verticalAlign: 'top', width: '50%'}}>
-			#### Sidebar and multiple Content Frames
-			<img src={ pageLayoutExample4 } alt="Diagram illustrating an example of the 'Sidebar and multiple Content Frames' arrangement" width="100%" />
-
-			Multiple content frames can be utilised as required.
-		</td>
-	</tr>
+	<tbody>
+		<tr>
+			<td style={{verticalAlign: 'top', width: '50%'}}>
+				#### Sidebar, Content Frame and Preview Frame
+				<img src={ pageLayoutExample1 } alt="Diagram illustrating an example of the 'Sidebar, Content Frame and Preview Frame' arrangement" width="100%" />
+
+				A demonstration of this arrangement can be found in the Styles section of the Site Editor, and in the Pages and Templates sections when List layout is selected.
+			</td>
+			<td style={{verticalAlign: 'top', width: '50%'}}>
+				#### Sidebar and Preview Frame
+				<img src={ pageLayoutExample2 } alt="Diagram illustrating an example of the 'Sidebar and Preview Frame' arrangement" width="100%" />
+
+				A demonstration of this arrangement can be found in the Design section.
+			</td>
+		</tr>
+		<tr>
+			<td style={{verticalAlign: 'top', width: '50%'}}>
+				#### Sidebar and Content Frame
+				<img src={ pageLayoutExample3 } alt="Diagram illustrating an example of the 'Sidebar and Content Frame' arrangement" width="100%" />
+
+				A demonstration of this arrangement can be found in the Patterns and Templates sections of the Site Editor, or in the Pages section when Table or Grid layout are selected.
+			</td>
+			<td style={{verticalAlign: 'top', width: '50%'}}>
+				#### Sidebar and multiple Content Frames
+				<img src={ pageLayoutExample4 } alt="Diagram illustrating an example of the 'Sidebar and multiple Content Frames' arrangement" width="100%" />
+
+				Multiple content frames can be utilised as required.
+			</td>
+		</tr>
+	</tbody>
 </table>