From 842ae206687fcdb3403f9529722be2b2edb8fbdd Mon Sep 17 00:00:00 2001
From: Mohammad Ali Shahbazi <mohammadali.shahbazi@gmail.com>
Date: Fri, 9 Aug 2024 11:24:55 +0330
Subject: [PATCH] Bring back responsiveness functionality of tables
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Lukáš Kudlík <kudlajzzz@gmail.com>
---
 src/elements/Table/Table.scss |  6 ++++++
 src/elements/Table/Table.tsx  | 16 +++++++++-------
 2 files changed, 15 insertions(+), 7 deletions(-)

diff --git a/src/elements/Table/Table.scss b/src/elements/Table/Table.scss
index d5bb3a5f..be406d5a 100644
--- a/src/elements/Table/Table.scss
+++ b/src/elements/Table/Table.scss
@@ -1,7 +1,13 @@
 @import "styles/variables";
 
+.prezly-slate-table-container {
+    width: 100%;
+    overflow-x: auto;
+}
+
 .prezly-slate-table {
     width: 100%;
+    max-width: 100%;
     border-collapse: collapse;
     table-layout: auto;
 
diff --git a/src/elements/Table/Table.tsx b/src/elements/Table/Table.tsx
index a42929a2..ab5a17e9 100644
--- a/src/elements/Table/Table.tsx
+++ b/src/elements/Table/Table.tsx
@@ -8,12 +8,14 @@ interface Props extends HTMLAttributes<HTMLTableElement> {
 
 export function Table({ children, node }: Props) {
     return (
-        <table
-            className={classNames('prezly-slate-table', {
-                'prezly-slate-table--withBorders': node.border,
-            })}
-        >
-            <tbody>{children}</tbody>
-        </table>
+        <div className="prezly-slate-table-container">
+            <table
+                className={classNames('prezly-slate-table', {
+                    'prezly-slate-table--withBorders': node.border,
+                })}
+            >
+                <tbody>{children}</tbody>
+            </table>
+        </div>
     );
 }