fix: UI overflow codeblock and table

vriteio · May 7, 2024 · 86961ba · 86961ba
1 parent 291bd05
commit 86961ba
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 19 deletions.
diff --git a/apps/web/src/lib/editor/extensions/code-block/node.tsx b/apps/web/src/lib/editor/extensions/code-block/node.tsx
@@ -79,20 +79,26 @@ const CodeBlock = BaseCodeBlock.extend<CodeBlockOptions>({
 
         return (
           <NodeViewWrapper
-            as={(props) => <div contenteditable={false} class="select-none" {...props} />}
+            as={(props) => (
+              <div contenteditable={false} class="select-none max-w-full" {...props} />
+            )}
           >
             <Show
               when={!loading()}
               fallback={<div style={{ "min-height": `${contentHeight()}px` }} />}
             >
-              <CodeBlockView
-                monaco={monacoRef()!}
-                updatingRef={updatingRef}
-                codeEditorRef={codeEditorRef}
-                setUpdatingRef={setUpdatingRef}
-                setCodeEditorRef={setCodeEditorRef}
-                contentHeight={contentHeight()}
-              />
+              <div class="relative w-full" style={{ "min-height": `${contentHeight()}px` }}>
+                <div class="absolute top-0 left-0 w-full">
+                  <CodeBlockView
+                    monaco={monacoRef()!}
+                    updatingRef={updatingRef}
+                    codeEditorRef={codeEditorRef}
+                    setUpdatingRef={setUpdatingRef}
+                    setCodeEditorRef={setCodeEditorRef}
+                    contentHeight={contentHeight()}
+                  />
+                </div>
+              </div>
             </Show>
           </NodeViewWrapper>
         );

diff --git a/apps/web/src/lib/editor/extensions/code-block/view.tsx b/apps/web/src/lib/editor/extensions/code-block/view.tsx
@@ -355,8 +355,9 @@ const CodeBlockView: Component<CodeBlockViewProps> = (props) => {
   return (
     <div
       class={clsx(
-        "relative rounded-2xl text-base leading-4 not-prose overflow-hidden min-w-64",
-        selected() && !codeEditorActive() && "ring ring-primary ring-2"
+        "relative rounded-2xl text-base leading-4 not-prose",
+        selected() && !codeEditorActive() && "ring-primary ring-2",
+        !codeEditorActive() && "overflow-hidden"
       )}
       contentEditable={selected() ? false : undefined}
       draggable={false}

diff --git a/apps/web/src/styles/styles.scss b/apps/web/src/styles/styles.scss
@@ -73,7 +73,7 @@ kbd {
     @apply pt-4 pb-48;
   }
   .tableWrapper {
-    @apply overflow-x-scroll pb-2 mb-3;
+    @apply overflow-x-scroll mb-1;
     &::-webkit-scrollbar {
       @apply w-2 h-2 rounded-lg bg-gray-100 dark:bg-gray-800;
     }
@@ -103,7 +103,7 @@ kbd {
       border-style: none solid solid none;
       word-break: break-all;
     }
-    td { 
+    td {
       @apply bg-gray-100 dark:bg-gray-800;
     }
     th {
@@ -140,7 +140,7 @@ kbd {
     }
 
     .column-resize-handle {
-      @apply bg-primary absolute w-1 -bottom-0.5 -top-0.5 -right-0.75 z-10 pointer-events-none;
+      @apply bg-primary absolute w-0.5 -bottom-0.5 -top-0.5 -right-0.5 z-10 pointer-events-none;
     }
     &.resizing {
       .code-block-editor {

diff --git a/packages/editor/src/table.ts b/packages/editor/src/table.ts
@@ -50,11 +50,11 @@ const updateColumns = (
   }
 
   if (fixedWidth) {
-    table.style.width = `${totalWidth}px`;
+    table.style.width = `${totalWidth + 4}px`;
     table.style.minWidth = "";
   } else {
     table.style.width = "";
-    table.style.minWidth = `${totalWidth}px`;
+    table.style.minWidth = `${totalWidth + 4}px`;
   }
 };
 
@@ -63,7 +63,7 @@ class TableView implements NodeView {
 
   public cellMinWidth: number;
 
-  public dom: Element;
+  public dom: HTMLElement;
 
   public table: HTMLElement;
 
@@ -72,11 +72,16 @@ class TableView implements NodeView {
   public contentDOM: HTMLElement;
 
   public constructor(node: ProseMirrorNode, cellMinWidth: number) {
+    const wrapper = document.createElement("div");
+
+    wrapper.className = "tableWrapper w-full h-full";
     this.node = node;
     this.cellMinWidth = cellMinWidth;
     this.dom = document.createElement("div");
-    this.dom.className = "tableWrapper";
-    this.table = this.dom.appendChild(document.createElement("table"));
+    this.dom.className = "relative";
+    this.dom.style.display = "inline-grid";
+    this.dom.appendChild(wrapper);
+    this.table = wrapper.appendChild(document.createElement("table"));
     this.colgroup = this.table.appendChild(document.createElement("colgroup"));
     updateColumns(node, this.colgroup, this.table, cellMinWidth);
     this.contentDOM = this.table.appendChild(document.createElement("tbody"));