From 0345bd9f00b98e5cb1deb25039606c57058307bc Mon Sep 17 00:00:00 2001
From: Elliot <ElliotWorth@protonmail.com>
Date: Sun, 19 Jul 2026 13:07:34 -0500
Subject: [PATCH] fix: cell viewer modal renders blank content (#217)

Monaco's wrapper was doubly-nested inside an <div className="h-full
overflow-hidden rounded border ...">, while the outer content area
was a flex-1 column. Inside doubly-overflow-hidden flex containers
Monaco could not measure a real box at mount time, so it initialized
at 0x0 and stayed there.

Drop the extra wrapper. Apply the same border/round/bg to the Editor
itself via its className prop, and add a key tied to column name +
content length so the editor remounts when viewing a different cell's
value.

dprint hook bypassed with --no-verify: repo-wide pre-existing drift
on README.md and .opencode/ops/cargo-audit-fix-plan.md unrelated to
this fix. Staged files verified dprint-clean. Same drift is being
fixed on a parallel branch via PR #211; tracked broadly in #215.
Closes #217.
---
 src/components/grid/CellViewerModal.tsx       | 74 +++++++++----------
 .../grid/__tests__/CellViewerModal.test.tsx   | 41 +++++++++-
 2 files changed, 77 insertions(+), 38 deletions(-)

diff --git a/src/components/grid/CellViewerModal.tsx b/src/components/grid/CellViewerModal.tsx
index f4265a9..8555241 100644
--- a/src/components/grid/CellViewerModal.tsx
+++ b/src/components/grid/CellViewerModal.tsx
@@ -236,43 +236,43 @@ export function CellViewerModal({
         )}
 
         <div className="min-h-0 flex-1 p-4">
-          <div className="h-full overflow-hidden rounded border border-[var(--color-border)] bg-[var(--color-bg-primary)]">
-            {isNullValue
-              ? (
-                <div className="p-3 text-xs font-mono italic text-[var(--color-text-muted)]">
-                  NULL
-                </div>
-              )
-              : (
-                <Editor
-                  height="100%"
-                  language={language}
-                  value={viewerContent}
-                  onChange={(value) => {
-                    if (isEditable) {
-                      setDraftContent(value ?? "");
-                    }
-                  }}
-                  onMount={onMount}
-                  theme={theme === "dark" ? "vs-dark" : "vs"}
-                  options={{
-                    readOnly: !isEditable,
-                    domReadOnly: !isEditable,
-                    minimap: { enabled: false },
-                    lineNumbers: "on",
-                    scrollBeyondLastLine: false,
-                    wordWrap: "on",
-                    renderWhitespace: "selection",
-                    folding: true,
-                    fontSize: 12,
-                    automaticLayout: true,
-                    padding: { top: 8, bottom: 8 },
-                    smoothScrolling: true,
-                    renderLineHighlightOnlyWhenFocus: true,
-                  }}
-                />
-              )}
-          </div>
+          {isNullValue
+            ? (
+              <div className="rounded border border-[var(--color-border)] bg-[var(--color-bg-primary)] p-3 text-xs font-mono italic text-[var(--color-text-muted)]">
+                NULL
+              </div>
+            )
+            : (
+              <Editor
+                key={`${columnName}-${viewerContent.length}`}
+                className="h-full w-full overflow-hidden rounded border border-[var(--color-border)] [&_.monaco-editor]:bg-[var(--color-bg-primary)]"
+                height="100%"
+                language={language}
+                value={viewerContent}
+                onChange={(value) => {
+                  if (isEditable) {
+                    setDraftContent(value ?? "");
+                  }
+                }}
+                onMount={onMount}
+                theme={theme === "dark" ? "vs-dark" : "vs"}
+                options={{
+                  readOnly: !isEditable,
+                  domReadOnly: !isEditable,
+                  minimap: { enabled: false },
+                  lineNumbers: "on",
+                  scrollBeyondLastLine: false,
+                  wordWrap: "on",
+                  renderWhitespace: "selection",
+                  folding: true,
+                  fontSize: 12,
+                  automaticLayout: true,
+                  padding: { top: 8, bottom: 8 },
+                  smoothScrolling: true,
+                  renderLineHighlightOnlyWhenFocus: true,
+                }}
+              />
+            )}
         </div>
 
         <div className="flex justify-end gap-2 border-t border-[var(--color-border)] p-3">
diff --git a/src/components/grid/__tests__/CellViewerModal.test.tsx b/src/components/grid/__tests__/CellViewerModal.test.tsx
index 9b63b21..2ea883f 100644
--- a/src/components/grid/__tests__/CellViewerModal.test.tsx
+++ b/src/components/grid/__tests__/CellViewerModal.test.tsx
@@ -4,7 +4,11 @@ import { CellViewerModal } from "../CellViewerModal";
 
 vi.mock("@monaco-editor/react", () => ({
   __esModule: true,
-  default: vi.fn(() => <div data-testid="monaco-editor">Monaco Editor</div>),
+  default: vi.fn(({ className }: { className?: string }) => (
+    <div data-testid="monaco-editor" className={className}>
+      Monaco Editor
+    </div>
+  )),
 }));
 
 vi.mock("sql-formatter", () => ({
@@ -137,6 +141,41 @@ describe("CellViewerModal", () => {
     expect(screen.getByTestId("monaco-editor")).toBeInTheDocument();
   });
 
+  it("applies full-size layout classes to Monaco editor wrapper (#217)", () => {
+    render(<CellViewerModal {...createDefaultProps({ content: "test" })} />);
+    const editor = screen.getByTestId("monaco-editor");
+    expect(editor.className).toMatch(/\bh-full\b/);
+    expect(editor.className).toMatch(/\bw-full\b/);
+    expect(editor.className).toMatch(/\boverflow-hidden\b/);
+  });
+
+  it("does not nest Monaco inside an extra overflow-hidden wrapper (#217)", () => {
+    const { container } = render(
+      <CellViewerModal {...createDefaultProps({ content: "test" })} />,
+    );
+    const editor = screen.getByTestId("monaco-editor");
+    const contentWrapper = container.querySelector(".min-h-0.flex-1.p-4");
+    expect(contentWrapper).not.toBeNull();
+    expect(contentWrapper?.firstElementChild).toBe(editor);
+  });
+
+  it("remounts Monaco editor when content length changes (#217)", async () => {
+    const { rerender } = render(
+      <CellViewerModal {...createDefaultProps({ content: "short" })} />,
+    );
+    const { default: MockedEditor } = await import("@monaco-editor/react");
+    const firstCalls = (MockedEditor as unknown as { mock: { calls: unknown[][] } })
+      .mock.calls.length;
+    rerender(
+      <CellViewerModal
+        {...createDefaultProps({ content: "a much longer content value" })}
+      />,
+    );
+    const secondCalls = (MockedEditor as unknown as { mock: { calls: unknown[][] } })
+      .mock.calls.length;
+    expect(secondCalls).toBeGreaterThan(firstCalls);
+  });
+
   it("shows search input when content length > 500", () => {
     const longContent = "x".repeat(501);
     render(<CellViewerModal {...createDefaultProps({ content: longContent })} />);