fix: handle rte table overflow on smaller screens

components/JsonToHtml/jsontohtml.module.css

@@ -55,6 +55,10 @@
   display: inline;
 }
 
+.tableContainer {
+  max-width: 100%;
+  overflow-x: auto;
+}
 @media screen and (min-width: 768px) {
   .ol:has(li:nth-last-child(n + 5)),
   .ul:has(li:nth-last-child(n + 5)) {

components/JsonToHtml/renderOptions.tsx

@@ -376,9 +376,11 @@ export const renderOptions: RenderOptions = {
   ) => {
     const props = extractPossibleAttributes(node.attrs)
     return (
-      <Table key={node.uid} {...props}>
-        {next(node.children, embeds, fullRenderOptions)}
-      </Table>
+      <div className={styles.tableContainer}>
+        <Table key={node.uid} {...props}>
+          {next(node.children, embeds, fullRenderOptions)}
+        </Table>
+      </div>
     )
   },