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, Tests

---

Description

• Reserve Windows host space for shadow

• Center pill content inside host

• Use explicit border-box capsule sizing

• Tighten layout and UI regression tests

---

Diagram Walkthrough

flowchart LR
  A["Windows capsule bounds"] -- "adds side inset room" --> B["Shared capsule layout metrics"]
  B -- "centers pill and content" --> C["Capsule component styles"]
  C -- "prevents clipping and distortion" --> D["Windows visual result"]
  B -- "validated by assertions" --> E["Layout and UI tests"]

Loading

File Walkthrough

	Relevant files
Enhancement	lib.rs Derive Windows capsule bounds from insets                                openless-all/app/src-tauri/src/lib.rs Replaces hard-coded Windows width with pill width plus symmetric side insets Keeps the existing outer hitbox while reserving room for shadow spread Preserves translation-active height behavior and bottom inset values +5/-1      capsuleLayout.ts Model capsule geometry with explicit insets                            openless-all/app/src/lib/capsuleLayout.ts Adds boxSizing to pill and host metric contracts Introduces explicit Windows horizontalInset host metric Derives Windows host width from pill width plus side insets Keeps non-Windows metrics stable while making sizing explicit +24/-4
Bug fix	Capsule.tsx Center capsule content within reserved inset space              openless-all/app/src/components/Capsule.tsx Centers the host container instead of right-aligning Windows capsules Adds horizontal padding from shared host metrics to preserve shadow space Switches pill and text wrappers to full-width, bounded layouts Applies shared boxSizing so sizing matches the layout contract +13/-4
Tests	capsuleLayout.test.ts Expand capsule layout metric coverage                                        openless-all/app/src/lib/capsuleLayout.test.ts Adds assertions for Windows host metrics and inset-derived width Verifies pill and host boxSizing values stay consistent Expands coverage for translation-active host dimensions +28/-0    windows-ui-config.test.mjs Refresh Windows UI regression checks                                          openless-all/app/scripts/windows-ui-config.test.mjs Updates regex checks for the new Windows capsule layout model Verifies host centering and horizontal inset reservation Adjusts the macOS titlebar spacer expectation to the new value Confirms runtime bounds now use pill width plus side insets +10/-6

---

[github-actions]

PR Reviewer Guide 🔍

(Review updated until commit 62005a6)

Here are some key observations to aid the review process:

🎫 Ticket compliance analysis ✅ 244 - PR Code Verified Compliant requirements: Windows capsule host now reserves symmetric horizontal inset space for the shadow. Windows capsule content is now horizontally centered inside the host. Layout assertions and regression tests were added for the capsule geometry contract. Requires further human verification: Validate on a real Windows build that the shadow no longer clips and the buttons render correctly. Confirm the overall visual result matches the intended macOS-like appearance.

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

🧪 PR contains tests

🔒 No security concerns identified

⚡ No major issues detected

[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的严重问题

[github-actions]

Persistent review updated to latest commit 94e9686

[chatgpt-codex-connector]

💡 Codex Review

https://github.com/appergb/openless/blob/94e9686a45f94283ab350350e654595c3fee3e90/openless-all/app/scripts/windows-ui-config.test.mjs#L119-L120
Tighten host-centering regex to target capsule container

This assertion is now too broad: /justifyContent:\s*'center'/ matches several unrelated style blocks in Capsule.tsx (e.g., audio bars and button internals), so the test can still pass even if the outer capsule host is changed away from centered alignment. That weakens the intended regression guard for the Windows host geometry and can let the original misalignment bug slip back in unnoticed.

ℹ️ 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]

Codex usage limits have been reached for code reviews. Please check with the admins of this repo to increase the limits by adding credits.
Credits must be used to enable repository wide code reviews.

[github-actions]

Persistent review updated to latest commit 62005a6