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>
  );
 }