diff --git a/src/components/Editor/CustomExtensions/Table/ExtensionConfig.js b/src/components/Editor/CustomExtensions/Table/ExtensionConfig.js index 06070032..e65aa1a9 100644 --- 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 index c78abe75..c16506a4 100644 --- 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; -} +} \ No newline at end of file diff --git a/src/styles/editor/editor-content.scss b/src/styles/editor/editor-content.scss index 22d8e0fe..d97222b4 100644 --- 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;