fix(capsule): center Windows pill within shadow inset

[weikeyi]

User description

摘要

Part of #244.

这个 PR 收敛 Windows 录音胶囊的 host / pill 几何关系：让 pill 在 host 内水平居中，并把左右阴影 inset 从隐含布局改成显式模型，降低 Windows 端阴影裁切和偏位风险。

修复 / 新增 / 改进

• Windows capsule 不再用 flex-end 偏右摆放，改为在 host 内水平居中
• 在 capsuleLayout 中显式建模 horizontalInset
• Windows host 宽度由 pill.width + horizontalInset * 2 推导，保留当前 220px 外层范围
• 增加 layout 断言，避免后续把 Windows capsule 几何关系改回魔法数字

兼容

• 不包含：缩小 Windows capsule 外层 native window / hitbox
• 不包含：badge、按钮、阴影参数的大范围视觉重做
• 对现有用户 / 本地环境 / 构建流程的影响：仅调整 Windows capsule 的内部水平布局和布局模型，不扩大外层窗口范围

---

PR Type

Bug fix, Enhancement, Tests

---

Description

• Center Windows pill using justify-content: center instead of flex-end to fix shadow clipping and button offset

• Introduce explicit horizontalInset in host metrics for Windows (12px) and derive host width from pill width + insets

• Add boxSizing: 'border-box' to pill and host to ensure proper width calculation for shadow room

• Improve text and center content width handling with width: '100%', maxWidth, and minWidth: 0

• Add unit tests for new metrics to prevent future regressions

---

Diagram Walkthrough

flowchart LR
  A["Capsule host container"] -- "justify-content: center" --> B["Pill horizontally centered"]
  A -- "paddingLeft / paddingRight = horizontalInset (12px)" --> C["Reserve space for shadow"]
  D["capsuleLayout.ts"] -- "Introduces horizontalInset & boxSizing" --> C
  E["Capsule.tsx"] -- "Use relative widths (100%, maxWidth)" --> F["Prevent text overflow and button misalignment"]
  G["capsuleLayout.test.ts"] -- "Adds tests for host metrics" --> H["Ensure layout model consistency"]

Loading

File Walkthrough

	Relevant files
Enhancement	lib.rs Derive Windows capsule host width from pill width and insets openless-all/app/src-tauri/src/lib.rs Express Windows capsule host width as pill width (196px) + 2 * horizontal inset (12px) for clarity and shadow room Keep existing outer width (220px) but now derived from constants +5/-1      capsuleLayout.ts Model horizontal shadow insets and box-sizing in capsule layout openless-all/app/src/lib/capsuleLayout.ts Extend CapsulePillMetrics and CapsuleHostMetrics interfaces with boxSizing and horizontalInset Update Windows pill metrics to include boxSizing: 'border-box' Update host metrics function to compute width from pill width + insets, and return horizontalInset and boxSizing Keep macOS as content-box with zero horizontal inset +24/-4
Bug fix	Capsule.tsx Center pill and fix width handling for Windows shadow inset openless-all/app/src/components/Capsule.tsx Change Windows capsule alignment from flex-end to center to center pill Add paddingLeft and paddingRight using host horizontal inset Set boxSizing on pill and host containers Adjust text and center content widths: use width: '100%', maxWidth, minWidth: 0 to prevent overflow and misalignment Update comment to reflect new layout model +13/-4
Tests	capsuleLayout.test.ts Add unit tests for capsule host metrics and box-sizing      openless-all/app/src/lib/capsuleLayout.test.ts Add tests for getCapsuleHostMetrics for Windows (regular and translation) and macOS Assert host width, height, horizontalInset, boxSizing, and derivation from pill width Add assertion for macOS pill boxSizing as 'content-box' +25/-0

---

[github-actions]

PR Reviewer Guide 🔍

(Review updated until commit 351f956)

Here are some key observations to aid the review process:

🎫 Ticket compliance analysis 🔶 244 - Partially compliant Compliant requirements: Center the Windows pill within the host instead of right-aligning it. Make the Windows host/pill geometry explicit with a horizontal inset model. Add layout tests for Windows capsule metrics. Non-compliant requirements: Reserve enough horizontal room to fully guarantee the shadow is never clipped on Windows. Requires further human verification: Verify on a real Windows machine that the shadow no longer clips at the edges. Verify the confirm/cancel buttons remain visually centered and undistorted under the target DPI/theme settings. Verify the final Windows capsule visuals match the intended macOS-like appearance.

⏱️ Estimated effort to review: 3 🔵🔵🔵⚪⚪

🧪 PR contains tests

🔒 No security concerns identified

⚡ Recommended focus areas for review Shadow room The Windows host still uses a fixed 12px inset on each side, which may be too small for the current shadow blur/spread. If the shadow extends beyond 12px, the capsule can still be clipped even though the pill is now centered. const horizontalInset = 12; const pill = getCapsulePillMetrics(os); return { width: pill.width + horizontalInset * 2, height: translationActive ? 118 : 84, horizontalInset, bottomInset: 12, badgeGap: 8, boxSizing: 'border-box',

[github-actions]

Persistent review updated to latest commit 9660db6

[chatgpt-codex-connector]

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 351f956b1e

ℹ️ 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".

[chatgpt-codex-connector]

Keep macOS/Linux capsule in border-box sizing

Returning boxSizing: 'content-box' for non-Windows capsules changes the rendered pill width on macOS/Linux because Capsule.tsx applies width, padding: '0 8px', and a border while the app’s global CSS currently enforces * { box-sizing: border-box; } (in src/styles/tokens.css). This regression makes the pill visibly wider than the 176px metric and can misalign spacing/badge positioning compared with the pre-change geometry. Use border-box here (or adjust width constants) to preserve existing layout.

Useful? React with 👍 / 👎.

[github-actions]

Persistent review updated to latest commit 351f956

[appergb]

请修复这些P2的严重问题