From 10b6ad55d11b939c94de7796f100faabc0ecd2ce Mon Sep 17 00:00:00 2001
From: Daniel Richards <daniel.richards@automattic.com>
Date: Mon, 17 Sep 2018 19:08:22 +0100
Subject: [PATCH] Add a wrapping div around the rendered table to provide
 mobile responsiveness

---
 packages/block-library/src/table/edit.js     |  4 ++--
 packages/block-library/src/table/editor.scss |  9 ---------
 packages/block-library/src/table/index.js    | 12 +++++++-----
 packages/block-library/src/table/style.scss  |  5 +++--
 packages/block-library/src/table/theme.scss  |  8 +++++---
 5 files changed, 17 insertions(+), 21 deletions(-)

diff --git a/packages/block-library/src/table/edit.js b/packages/block-library/src/table/edit.js
index 8aaf46254ce77..da92e4ddd75f8 100644
--- a/packages/block-library/src/table/edit.js
+++ b/packages/block-library/src/table/edit.js
@@ -442,7 +442,7 @@ export default class TableEdit extends Component {
 			);
 		}
 
-		const classes = classnames( className, {
+		const classes = classnames( {
 			'has-fixed-layout': hasFixedLayout,
 		} );
 
@@ -502,7 +502,7 @@ export default class TableEdit extends Component {
 						/>
 					</PanelBody>
 				</InspectorControls>
-				<div className="block-library-table__overflow_container">
+				<div className={ className }>
 					<table className={ classes } style={ getTableStyles( attributes ) }>
 						<Section type="head" rows={ head } />
 						<Section type="body" rows={ body } />
diff --git a/packages/block-library/src/table/editor.scss b/packages/block-library/src/table/editor.scss
index 82fa8faef0c53..c14ed2f4d4729 100644
--- a/packages/block-library/src/table/editor.scss
+++ b/packages/block-library/src/table/editor.scss
@@ -1,9 +1,4 @@
 .wp-block-table {
-	table {
-		border-collapse: collapse;
-		width: 100%;
-	}
-
 	td,
 	th {
 		padding: 0;
@@ -22,10 +17,6 @@
 	}
 }
 
-.block-library-table__overflow_container {
-	overflow: auto;
-}
-
 .block-library-table__dimensions__row {
 	display: flex;
 }
diff --git a/packages/block-library/src/table/index.js b/packages/block-library/src/table/index.js
index d6eebcf1ed151..9f669c44b0887 100644
--- a/packages/block-library/src/table/index.js
+++ b/packages/block-library/src/table/index.js
@@ -155,11 +155,13 @@ export const settings = {
 		};
 
 		return (
-			<table className={ classes } style={ getTableStyles( attributes ) }>
-				<Section type="head" rows={ head } />
-				<Section type="body" rows={ body } />
-				<Section type="foot" rows={ foot } />
-			</table>
+			<div>
+				<table className={ classes } style={ getTableStyles( attributes ) }>
+					<Section type="head" rows={ head } />
+					<Section type="body" rows={ body } />
+					<Section type="foot" rows={ foot } />
+				</table>
+			</div>
 		);
 	},
 
diff --git a/packages/block-library/src/table/style.scss b/packages/block-library/src/table/style.scss
index 494bae5889959..97124167bef56 100644
--- a/packages/block-library/src/table/style.scss
+++ b/packages/block-library/src/table/style.scss
@@ -1,6 +1,7 @@
 .wp-block-table {
-	// Fixed layout toggle
-	&.has-fixed-layout {
+	overflow-x: auto;
+
+	table.has-fixed-layout {
 		table-layout: fixed;
 		width: 100%;
 	}
diff --git a/packages/block-library/src/table/theme.scss b/packages/block-library/src/table/theme.scss
index 7219898d01328..5791099349796 100644
--- a/packages/block-library/src/table/theme.scss
+++ b/packages/block-library/src/table/theme.scss
@@ -1,7 +1,9 @@
 .wp-block-table {
-	width: 100%;
-	min-width: $break-mobile / 2;
-	border-collapse: collapse;
+	table {
+		width: 100%;
+		min-width: $break-mobile / 2;
+		border-collapse: collapse;
+	}
 
 	td,
 	th {