Bring back responsiveness functionality of tables (#91)

prezly · Aug 9, 2024 · b27f6ac · b27f6ac
2 parents a6bc1da + 842ae20
commit b27f6ac
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 7 deletions.
diff --git 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
@@ -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>
     );
 }