[LJAYi]

Summary

• move the export settings panel below the Mermaid source and live preview workspace
• preserve all existing settings and behavior
• keep consistent spacing between the workspace, settings, and export readiness sections
• add an end-to-end assertion for the intended page order

Why

The source editor and live preview are the primary workspace. Showing them before file and export settings gives the page a clearer editing-first flow.

Validation

• web TypeScript checks
• production web build
• 8 Playwright end-to-end tests
• desktop visual inspection

Summary by CodeRabbit

• Improvements
  • Repositioned the Export Settings panel to render after the live preview workspace for a more intuitive workflow.
  • Updated spacing for the controls card to improve visual separation and layout consistency.
• Tests
  • Added an end-to-end check to verify the workspace section appears before the Export Settings panel.

[coderabbitai]

📝 Walkthrough

Walkthrough

The export settings card now appears below the workspace and preview. Its spacing includes top and bottom margins, and an E2E test verifies the section order.

Changes

Workbench layout

Layer / File(s)	Summary
Export settings placement and validation apps/web/src/main.ts, apps/web/src/styles.css, apps/web/tests/e2e/workbench.spec.ts	The export settings card is moved after the workspace, retains its existing fields and identifiers, receives symmetric vertical margins, and is covered by a section-order assertion.

Estimated code review effort: 2 (Simple) | ~10 minutes

Possibly related PRs

• LJAYi/mmd2pptx#7: Both changes update the workbench UI structure around preview and export-flow layout.

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly matches the main change: moving the export settings panel below the workspace.

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch agent/move-export-settings-below-preview

---

_{Comment @coderabbitai help to get the list of available commands.}

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@apps/web/tests/e2e/workbench.spec.ts`:
- Around line 34-41: Update the test’s section-order assertions around
sectionClasses to first verify that both “workspace” and “controls-card” are
present, then compare their indices only after those existence checks pass.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro Plus

Run ID: 8b324c8c-5b3c-4642-a658-97b0c539569d

📥 Commits

Reviewing files that changed from the base of the PR and between d87d3f7 and 57c56c9.

📒 Files selected for processing (3)

• apps/web/src/main.ts
• apps/web/src/styles.css
• apps/web/tests/e2e/workbench.spec.ts