kandev/docs/plans/markdown-table-resize-surface-parity/task-02-enable-plan-resizing.md

id, title, status, wave, depends_on, plan, requirements, acceptance_criteria, system_design

id	title	status	wave	depends_on	plan	requirements	acceptance_criteria	system_design
02-enable-plan-resizing	Enable resizing in editable Plan view	done	2	01-extend-markdown-previews	plan.md	REQ-UI-RESIZABLE-MARKDOWN-TABLES-001	AC-UI-RESIZABLE-MARKDOWN-TABLES-001.10 AC-UI-RESIZABLE-MARKDOWN-TABLES-001.11 AC-UI-RESIZABLE-MARKDOWN-TABLES-001.12 AC-UI-RESIZABLE-MARKDOWN-TABLES-001.13	../../specs/ui/system-design/resizable-markdown-tables.md

Task 02: Enable Resizing in Editable Plan View

Summary

Enable TipTap's native table-column drag behavior in the live Plan panel on desktop fine-pointer layouts. Keep widths ephemeral and source-preserving, and remove the resize plugin when the viewport or pointer capability becomes ineligible.

In scope

• Configure live Plan Table extensions with responsive resizing, a 64-pixel minimum, and internal boundaries only.
• Recreate the editor from parent draft Markdown when resize capability changes.
• Add Plan-scoped wrapper, handle, cursor, and overflow CSS.
• Add focused desktop and Mobile Chrome Plan table E2E coverage.

Out of scope

• Changing read-only revision previews or comparison dialogs.
• Persisting ProseMirror colwidth attributes.
• Replacing TipTap's table plugin with a custom resize engine.
• Adding Plan table authoring, row, or column management commands.

Acceptance

• A desktop Plan table supports internal-boundary drag, enforces the 64-pixel minimum, and remains contained by its local table wrapper.
• Width-only editor state never changes persisted plan Markdown and clears after reload or capability loss without losing current draft text.
• Mobile and coarse-pointer Plan layouts expose no resize affordance, keep table content readable, and cause no document horizontal overflow.

Verification

(cd apps && pnpm install --frozen-lockfile)
(cd apps && pnpm --filter @kandev/web exec vitest run \
  lib/markdown/table-resize.test.ts \
  components/editors/tiptap/tiptap-plan-editor.test.tsx)
(cd apps/web && pnpm run typecheck)
(cd apps && pnpm --filter @kandev/web exec eslint \
  components/editors/tiptap/tiptap-plan-editor.tsx \
  e2e/tests/task/plan-table-resize.spec.ts \
  e2e/tests/task/mobile-plan-table-resize.spec.ts)
(cd apps/web && pnpm e2e:run tests/task/plan-table-resize.spec.ts)
(cd apps/web && pnpm e2e:run --project mobile-chrome tests/task/mobile-plan-table-resize.spec.ts)
git diff --check

Files likely touched

• apps/web/components/editors/tiptap/tiptap-plan-editor.tsx
• apps/web/components/editors/tiptap/tiptap-plan-editor.test.tsx
• apps/web/app/globals.css
• apps/web/e2e/tests/task/plan-table-resize.spec.ts
• apps/web/e2e/tests/task/mobile-plan-table-resize.spec.ts

Dependencies

• Task 01 establishes the target cross-surface responsive contract and completes shared rendered-preview integration before the editor-specific variant.

Risks

• useEditor recreation must use current parent draft content or it can discard unsaved text on a responsive capability transition.
• TipTap's mounted colwidth attributes must stay absent from serialized and persisted Markdown.
• ProseMirror handle classes are generated by the pinned table dependency, so styles and selectors must remain Plan-scoped.

Parallelism

sequential

Inputs

• docs/specs/ui/requirements/resizable-markdown-tables.md
• docs/specs/ui/system-design/resizable-markdown-tables.md
• TipTap 3.19 Table and ProseMirror tables 1.8.5 resize contracts installed by the workspace lockfile
• Existing mobile Plan entry in apps/web/components/task/mobile/session-mobile-layout.tsx

Results

Enabled TipTap's table resize plugin only on desktop fine-pointer layouts, with the shared 64-pixel minimum, internal-boundary behavior, Plan-scoped overflow and handle styles, and editor recreation when resize capability changes. Draft Markdown survives that recreation, while transient colwidth state remains absent from serialized and persisted Markdown.

Validation completed 2026-08-24:

• Focused Vitest suite: 10 tests passed.
• Web typecheck and scoped ESLint: passed.
• Desktop Plan table Playwright suite: 1 test passed, including the autosave window.
• Mobile Chrome Plan table Playwright suite: 1 test passed.
• git diff --check: passed.