feat(board): improve board editor UI with tables, callouts, and drag-drop#32
Conversation
Reduce toolbar padding (pl-6 → pl-4 pr-2) and editor content padding (px-8 → px-6) for tighter board layout alignment. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Override --tw-prose-body with the project's --foreground color so body text appears darker without affecting headings, links, or code styles. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Replace pageY with clientY and event.x/y with clientX/clientY to unify the coordinate system with getBoundingClientRect (viewport-relative). Extract shouldInsertAfterBlock for midpoint-based insertion and add resolveEventTargetElement to handle non-HTMLElement drag targets. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
The target line element lacked an explicit top:0, causing CSS to place it at its static position (after ContentEditable) instead of the anchor origin. This offset grew with content height, pushing the line 4-5 lines below with little content and completely off-screen with many blocks. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Add explicit mt-0 to paragraph to prevent prose plugin from injecting inconsistent top margins (0px after headings vs 20px elsewhere) - Increase paragraph bottom margin from 8px to 12px (mb-2 → mb-3) - Change list left margin from 16px to 0px (ml-4 → ml-0) - Add explicit list left padding of 20px (pl-5) to override prose default 26px Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Remove max-width constraint and center margin from editor container, reduce top padding from 64px to 20px, bottom padding from 32px to 24px, apply 22px left padding for optical alignment, reduce date margin-bottom from 16px to 12px, and fix placeholder left offset to match content area. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 2da6ff52dc
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
| saveTimeoutRef.current = setTimeout(async () => { | ||
| isSavingRef.current = true; | ||
| const saveSequence = ++saveSequenceRef.current; | ||
| try { | ||
| await updateBoard(activeBoard.id, { | ||
| const updated = await updateBoard(activeBoard.id, { | ||
| settings: { |
There was a problem hiding this comment.
saveTabs schedules updateBoard calls without any in-flight guard, so fast tab/content edits can issue overlapping PATCH requests; on slow or reordered networks, an older request can arrive last and overwrite newer state. This is especially risky because backend BoardsRepository.update_board replaces the entire settings payload (backend/pluto_duck_backend/app/services/boards/repository.py, settings = ?), so saveSequence only protecting onBoardUpdate does not prevent persisted data rollback.
Useful? React with 👍 / 👎.
| <Script | ||
| src="https://mcp.figma.com/mcp/html-to-design/capture.js" | ||
| strategy="afterInteractive" |
There was a problem hiding this comment.
Loading https://mcp.figma.com/mcp/html-to-design/capture.js in RootLayout executes remote third-party code for every page load in all environments, which introduces unnecessary security/privacy risk and an external runtime dependency (and can fail under strict CSP or restricted egress). Since this is marked temporary, it should be removed or explicitly gated to local/dev-only tooling.
Useful? React with 👍 / 👎.
1 participant
Summary
Test plan
npm test통과 확인🤖 Generated with Claude Code