feat: use 2 columns in help dialog

[PlkMarudny]

What does this PR do?

Help dialog was too tall, switched to two column layout.

Type of change

• Bug fix
• New feature (transition / preset / text anim / effect / API)
• Docs
• Refactor / internal

How was it verified?

• node --check server.js && node --check app.js && node --check mcp-server.js passes
• Opened the editor and confirmed the change in preview
• Confirmed the change in an export (fast or realtime), if it affects rendering
• Updated CLAUDE.md / README.md if the schema, props, or API changed

Checklist

• No new runtime dependencies added
• Preview and export render identically (single compositor)
• Commits are focused and messages are descriptive

Summary by CodeRabbit

• UI Improvements
  • Reorganized the Help overlay’s keyboard shortcuts into a clearer two-column layout.
  • Updated shortcut descriptions and ordering for improved clarity.
  • Added responsive behavior so shortcuts display in a single column on smaller screens.
  • Improved Help overlay sizing, scrolling, spacing, and text alignment.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 0225c4f9-7914-497b-90b5-6b4fd8f5a619

📥 Commits

Reviewing files that changed from the base of the PR and between b70f469 and 62853b1.

📒 Files selected for processing (2)

• index.html
• style.css

---

📝 Walkthrough

Walkthrough

The Help overlay shortcut list was split into responsive columns, several shortcut descriptions were revised, and dialog/table styling was updated for scrolling, alignment, and narrow screens.

Changes

Help Overlay Updates

Layer / File(s)	Summary
Shortcut content and column structure index.html	The keyboard-shortcuts section now renders two tables within a keys-cols wrapper, with revised descriptions and ordering.
Responsive shortcut presentation style.css	The help dialog gains constrained scrolling, two-column shortcut layout, adjusted table alignment and widths, and a single-column layout below 700px.

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

Possibly related PRs

• ronak-create/FableCut#13: Updates overlapping Help overlay shortcut content, including the zoom-to-selection shortcut.
• ronak-create/FableCut#21: Modifies the same Help overlay shortcut table with additional work-area shortcuts.
• ronak-create/FableCut#23: Overlaps with shortcut documentation for transition and delete behavior.

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly summarizes the main change: switching the help dialog to a two-column layout.
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.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

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