Made the tables responsive

bigbinary · Nov 5, 2024 · b2e5ccb · b2e5ccb
1 parent b414dd2
commit b2e5ccb
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 4 deletions.
diff --git a/src/components/Editor/CustomExtensions/Table/ExtensionConfig.js b/src/components/Editor/CustomExtensions/Table/ExtensionConfig.js
@@ -24,7 +24,11 @@ const Table = TiptapTable.extend({
       }
     );
 
-    return ["table", {}, ["colgroup", ...colgroups], ["tbody", 0]];
+    return [
+      "div",
+      { class: "table-responsive" },
+      ["table", {}, ["colgroup", ...colgroups], ["tbody", 0]],
+    ];
   },
 
   addKeyboardShortcuts() {

diff --git a/src/styles/editor/_table.scss b/src/styles/editor/_table.scss
@@ -1,9 +1,12 @@
 .neeto-editor-table {
-  display: relative;
+  position: relative;
   width: fit-content;
   margin: 8px 0 0;
+  max-width: 100%;
+  overflow-x: auto;
 
   table {
+
     th,
     td {
       p {
@@ -31,6 +34,8 @@
   &__wrapper {
     display: flex;
     gap: 2px;
+    max-width: 100%;
+    overflow-x: auto;
   }
 
   &__add-row,
@@ -50,7 +55,7 @@
       color: rgb(var(--neeto-ui-gray-500)) !important;
       font-size: var(--neeto-ui-text-base) !important;
       line-height: 16px !important;
-      font-weight: var(	--neeto-ui-font-light) !important;
+      font-weight: var(--neeto-ui-font-light) !important;
     }
 
     &:hover {
@@ -59,6 +64,7 @@
   }
 
   &:hover {
+
     .neeto-editor-table__add-row,
     .neeto-editor-table__add-column {
       visibility: visible;
@@ -79,4 +85,4 @@
 
 .ProseMirror.resize-cursor {
   cursor: col-resize;
-}
+}
diff --git a/src/styles/editor/editor-content.scss b/src/styles/editor/editor-content.scss
@@ -94,6 +94,11 @@
   word-break: break-word;
   tab-size: 2;
 
+  .table-responsive {
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+  }
+
   // Sizing
   &--size-large {
     --neeto-editor-content-paragraph-font-size: 1.125rem;