fix(mobile): fill compact table widths (#270)

apps/mobile/src/components/LocalTiptapEditor.tsx

@@ -2871,6 +2871,21 @@ const getEditorStyles = (theme: "light" | "dark", options?: { viewer?: boolean }
     border-spacing: 0;
     table-layout: fixed;
   }
+  /* Let compact tables use the full content width. The fallback on
+     .tableWrapper remains the minimum column budget for 5+ columns, so only
+     wider tables scroll. TipTap always renders one <col> per logical column. */
+  .edgeever-editor-content table:has(> colgroup > col:first-child:last-child) {
+    --mobile-table-column-width: 100cqi;
+  }
+  .edgeever-editor-content table:has(> colgroup > col:first-child:nth-last-child(2)) {
+    --mobile-table-column-width: 50cqi;
+  }
+  .edgeever-editor-content table:has(> colgroup > col:first-child:nth-last-child(3)) {
+    --mobile-table-column-width: calc(100cqi / 3);
+  }
+  .edgeever-editor-content table:has(> colgroup > col:first-child:nth-last-child(4)) {
+    --mobile-table-column-width: 25cqi;
+  }
   /* Override TipTap/desktop col widths with the mobile equal-ish column budget. */
   .edgeever-editor-content table col {
     width: var(--mobile-table-column-width) !important;

apps/mobile/src/lib/mobile-table-layout.test.ts

@@ -0,0 +1,36 @@
+import { readFileSync } from "node:fs";
+import { describe, expect, test } from "bun:test";
+
+const editorSource = readFileSync(
+  new URL("../components/LocalTiptapEditor.tsx", import.meta.url),
+  "utf8",
+);
+
+describe("mobile TipTap table layout contract", () => {
+  test.each([
+    ["col:first-child:last-child", "100cqi"],
+    ["col:first-child:nth-last-child(2)", "50cqi"],
+    ["col:first-child:nth-last-child(3)", "calc(100cqi / 3)"],
+    ["col:first-child:nth-last-child(4)", "25cqi"],
+  ])("fills the content width for a table matched by %s", (columnSelector, expectedWidth) => {
+    const selector = `.edgeever-editor-content table:has(> colgroup > ${columnSelector})`;
+    const selectorStart = editorSource.indexOf(selector);
+
+    expect(selectorStart).toBeGreaterThanOrEqual(0);
+    expect(editorSource.slice(selectorStart, selectorStart + selector.length + 100)).toContain(
+      `--mobile-table-column-width: ${expectedWidth};`,
+    );
+  });
+
+  test("keeps wide tables readable and scrolls them inside the wrapper", () => {
+    expect(editorSource).toContain(
+      "--mobile-table-column-width: clamp(4.25rem, 24cqi, 10rem);",
+    );
+    expect(editorSource).toMatch(
+      /\.edgeever-editor-content \.tableWrapper \{[\s\S]*?overflow-x: auto;/,
+    );
+    expect(editorSource).toMatch(
+      /\.edgeever-editor-content table \{[\s\S]*?min-width: 100%;/,
+    );
+  });
+});