fix(web): space comment popover actions

[YUHAO-corn]

Fixes #2191

Why

I picked this up from the reported comment popover spacing issue. The action buttons at the bottom of the popover were visually cramped, especially around the two right-side actions.

What users will see

The comment popover action row has clearer spacing between actions while preserving the existing wrapping behavior in the compact popover.

Surface area

• UI — new page / dialog / panel / menu item / setting / empty state in apps/web or apps/desktop (including Electron menu bar)
• Keyboard shortcut — new or changed
• CLI / env var — new od subcommand or flag, new tools-dev / tools-pack / tools-pr flag, or new OD_* env var
• API / contract — new /api/* endpoint, new SSE event, or changed shape in packages/contracts
• Extension point — new entry under skills/, design-systems/, design-templates, or craft/, or change to the skills protocol
• i18n keys — added new translation keys (see TRANSLATIONS.md for the locale workflow)
• New top-level dependency — adding any new entry to the root package.json (dependencies or devDependencies); workspace-package package.json files are out of scope. Include a paragraph on what we get vs. what bytes we ship (see CONTRIBUTING.md → Code style)
• Default behavior change — changes what existing users experience without opting in (default model, default setting, file/SQLite schema, auto-network on startup, auto-install)
• None — internal refactor, docs, tests, or translation update only

Screenshots

Before: the issue screenshots show the comment popover action buttons sitting too close together.

After: I verified the changed CSS in headless Chrome with both a 320px popover and a narrower 220px popover. The measured .comment-popover, .comment-popover-actions, and .comment-popover-actions-end all had scrollWidth <= clientWidth, so the added gap did not introduce horizontal overflow and wrapping behavior was preserved.

Bug fix verification

• Test path that reproduces the bug: not added; this is a visual spacing polish fix and a focused red spec would be a synthetic layout fixture rather than the product behavior itself.
• Did the test go red on main and green on this branch? no; verified with targeted component tests, static review, and headless Chrome layout measurement instead.

Validation

• pnpm install
• pnpm guard
• pnpm --filter @open-design/web typecheck
• pnpm --dir apps/web exec vitest run tests/components/FileViewer.test.tsx
• git diff --check
• Subagent review: no blocker found; confirmed the CSS-only change is scoped to the BoardComposerPopover action row and preserves the 320px popover wrap behavior.
• Headless Chrome layout measurement: 320px and 220px popover action rows stayed within their containers with no horizontal overflow.

[PerishCode]

@YUHAO-corn nice tidy fix. Bumping .comment-popover-actions gap from 8px → 10px and adding the missing .comment-popover-actions-end rule completes the styling that BoardComposerPopover.tsx was already referencing — the right-side actions (Add note / Save comment / Send to chat) now sit on their own inline-flex track with matching gap, while flex-wrap: wrap and max-width: 100% on the outer row preserve the compact-popover wrap behavior the inline comment about #779 calls out. Scope is purely visual, headless-Chrome 320/220px measurements ruling out horizontal overflow is the right verification shape for this kind of change, and the PR stays under the size/XS lane with a clean Fixes #2191 link. Thanks for picking this off the queue.

_{🔁 Powered by Looper · runner=reviewer · agent=claude-code · An autonomous AI dev team for your GitHub repos.}