fix: improve margin calculation and image alignment logic in canvas

[amemya]

余白の計算ロジックを修正し，縦構図における余白が広い/狭い問題を解消
付随して横構図での振る舞いも修正

fixed #69

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: ASSERTIVE

Plan: Pro Plus

Run ID: 9ade6079-4c27-4099-ba82-37f08e6b379b

📥 Commits

Reviewing files that changed from the base of the PR and between 39e7634 and 4757d94.

⛔ Files ignored due to path filters (1)

• frontend/package-lock.json is excluded by !**/package-lock.json

📒 Files selected for processing (1)

• frontend/src/canvas.ts

---

📝 Walkthrough

Summary by CodeRabbit

• 改善
  • 画像の配置とキャンバスの高さ計算を見直し、余白や下部テキスト領域を考慮した、より整ったレイアウトになりました。
  • 画像の縦位置が配置設定に応じて一貫して調整されるようになりました。
  • フォント名の引用符や特殊文字の処理を改善し、フォント指定が正しく反映されやすくなりました。

Walkthrough

画像の長辺と下部テキスト領域を基準にキャンバス余白・画像Y座標の計算を更新し、フォント名のサニタイズとCSSフォント文字列の生成規則を変更しました。

Changes

キャンバス描画更新

Layer / File(s)	Summary
画像配置とキャンバス高さの計算 frontend/src/canvas.ts	画像の長辺を基準に最小余白を算出し、下部テキスト領域を含む最小キャンバス高さと共通化した画像Y座標を計算します。
フォント文字列の整形 frontend/src/canvas.ts	フォント名の外側引用符、バックスラッシュ、ダブルクォート、ジェネリックフォントの処理を更新し、関連コメントを変更します。

Estimated code review effort: 3 (Moderate) | ~20 minutes

Suggested reviewers: copilot

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	変更内容の主軸であるキャンバスの余白計算と画像配置の改善を的確に表しています。
Description check	✅ Passed	余白計算と縦構図/横構図の挙動修正という変更内容に一致しています。
Linked Issues check	✅ Passed	Issue #69 の縦構図の余白と配置の見直しに対応する変更が入っています。
Out of Scope Changes check	✅ Passed	要件外の明確な変更は見当たらず、変更はキャンバス描画周りに収まっています。
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ 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 fix/canvas-margin-alignment

---

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.}

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.

📢 Thoughts on this report? Let us know!

[Copilot]

Pull request overview

This PR adjusts the canvas rendering layout to improve margin calculation and image Y-positioning, targeting better visual balance for portrait compositions while also refining landscape behavior.

Changes:

• Reworked minimum margin sizing to be based on the image’s long edge, and recalculated minimum canvas height to stabilize layout across alignment modes.
• Introduced calculateDrawY to centralize image vertical alignment logic (top vs center) with constraints to preserve text space.
• Updated font-family sanitization/escaping for canvas text rendering, and refreshed package-lock.json metadata.

Reviewed changes

Copilot reviewed 1 out of 2 changed files in this pull request and generated 1 comment.

File	Description
frontend/src/canvas.ts	Updates margin/canvas sizing and vertical alignment logic; refines font-family handling for text rendering.
frontend/package-lock.json	Lockfile metadata adjustments (removes libc fields for certain optional deps).

Files not reviewed (1)

• frontend/package-lock.json: Generated file

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.