fix: cap search-switch width and use a centered modal for merge/rename confirmations

[jansaldo]

Summary

Two independent, surgical fixes for visual regressions found while integrating @aymurai/ui into desktop-app's Voz a Texto (VTT) screens:

1. Toolbar search-switch width — the search box was stretching edge-to-edge instead of the fixed 711.5px Figma specifies (node 40001478:54722), crowding the "Modo Edición" switch. Scoped to search-switch only; anonimizador/set-de-datos are untouched (verified byte-for-byte unchanged in review).
2. SidePanel confirm dialogs — the rename-collision and merge-previous/merge-next confirmations rendered as a small Radix Popover anchored to whichever pill/button triggered them. The component's own doc comment cites Figma node 40002384:38487 ("Conflicto Nombre etiqueta") as the reference — but that node is a centered modal with a full-screen overlay, not something anchored to a trigger. Swapped to this repo's existing Dialog primitive.

Mid-implementation Figma correction

The original plan's literal code for the confirm dialog didn't fully match Figma once pulled directly (get_design_context/get_metadata on node 40002384:38487). Corrected during implementation:

• Card width capped at 389px (341px content + 24px padding — Figma's actual measurement), not left to DialogContent's 700px default.
• Spacing: 4px between title/description, 16px from that block to the buttons, 12px between buttons.
• Description text color corrected to text.default (was text.lighter — Figma's description is the same dark color as the title, not muted grey).
• Rename-collision copy is now dynamic and names both identities, matching Figma exactly: title Ya existe "{target}"., description Al combinar, los turnos de "{source}" pasan a "{target}". (previously a generic, non-specific sentence).
• Added proper DialogTitle/DialogDescription (both asChild, wrapping the existing styled text) — Radix's Dialog (unlike the Popover it replaces) requires these for accessibility; without them it logs a dev warning and screen readers get a degraded experience.
• Dropped a custom boxShadow override that competed non-deterministically with DialogContent's own shadow token (same CSS-cascade-order class of bug as an unrelated ArchiveProgress fix earlier in this project's history) — verified by inspecting the compiled stylesheet directly that the final maxW:[389px] override does reliably win (same-layer, later source order), since this project's Panda setup doesn't always let a later css() call win the way JS call order implies.

Compatibility

• No exported prop/type changes on ToolbarProps or SidePanelProps — both fixes are internal-rendering-only.
• onRenamePerson/onMergePeople/onMergePrevious/onMergeNext keep identical call sites and semantics.
• Safe for desktop-app's next bump off its currently-pinned v0.4.1 tag.

Deliberately out of scope

Figma's "Combinar" button mockup renders solid #3F479D at rest, while this repo's Button variant="primary" (unchanged, pre-existing since v0.4.0) rests at a lighter #C5CAFF and only reaches #3F479D on :active — very likely the Figma mockup is just showing the button in its pressed state, not specifying a different resting color. Flagged during implementation and review, deliberately not changed here since it would affect every Button consumer in the library — a separate decision if the team wants to pursue it.

Verification

• pnpm typecheck / pnpm biome check / pnpm build — all pass.
• Implemented and reviewed task-by-task (subagent-driven development): each of the two tasks got an isolated implementer + independent task review (spec compliance + code quality), both approved with no Critical/Important findings.
• A final whole-branch review caught one Important gap (the 389px width cap missing after the Popover→Dialog swap) and 3 Minor accessibility/cascade items — all fixed and verified via fresh typecheck/lint plus direct inspection of the compiled CSS (cascade-order risk for the width override, confirmed resolved).
• Manual Storybook pass over Components/Toolbar (SearchSwitch, SearchSwitchWithResults, Anonimizador, SetDeDatos, Matrix) and Components/SidePanel (RenameAndCollision, MergeConfirmation, Default, InvalidTimestamp) during the task implementation/review passes.

Referencing the two original upstream reports this closes: the search-switch width regression, and the rename/merge confirmation not matching Figma node 40002384:38487.

Do not merge without review — this library is consumed by desktop-app pinned to v0.4.1.

Summary by Sourcery

Cap toolbar search width in the search-switch context to match Figma and change SidePanel merge/rename confirmations from anchored popovers to centered modals with improved copy and styling.

Bug Fixes:

• Limit the search input width in the Toolbar search-switch context so it no longer stretches edge-to-edge and overcrowds the mode switch.
• Render SidePanel rename and merge confirmation dialogs as centered modals with overlays instead of popovers anchored to pills or action buttons.

Enhancements:

• Unify SidePanel confirmation dialogs into a shared ConfirmDialog component using the existing Dialog primitive with Figma-aligned spacing, width, and typography.
• Improve rename-collision dialog copy to reference the specific source and target people involved and adjust text colors and spacing for better readability.
• Tighten Toolbar layout logic by distinguishing search-switch from other contexts to preserve existing anonimizador and set-de-datos behavior.

Documentation:

• Add an implementation plan document describing the search-switch width and conflict modal fixes and their verification steps.

[sourcery-ai]

Reviewer's Guide

This PR makes two targeted UI fixes: it constrains the Toolbar search input width only in the search-switch context to match Figma, and replaces SidePanel’s anchored Popover-based confirmations with a shared centered Dialog modal that follows the specified Figma node, with improved accessibility and text specificity. It also adds an implementation plan document under docs/superpowers/ for future agentic work.

Sequence diagram for SidePanel rename-collision confirmation modal

sequenceDiagram
  actor User
  participant SidePanel
  participant AvatarPill
  participant ConfirmDialog
  participant Dialog
  participant Consumer

  User->>AvatarPill: onEditCommit(value)
  AvatarPill->>SidePanel: handleRenameCommit(index, value)
  SidePanel->>SidePanel: [detects name conflict]
  SidePanel->>ConfirmDialog: ConfirmDialog(open=true, title, description)
  ConfirmDialog->>Dialog: Dialog(open=true, onOpenChange)

  User->>ConfirmDialog: click Combinar
  ConfirmDialog->>SidePanel: onConfirm()
  SidePanel->>SidePanel: confirmPeopleMerge()
  SidePanel->>Consumer: onMergePeople(sourceIndex, targetIndex)
  SidePanel->>ConfirmDialog: ConfirmDialog(open=false, title, description)

  User->>ConfirmDialog: click Cancelar
  ConfirmDialog->>SidePanel: onCancel()
  SidePanel->>SidePanel: finishEditing()
  SidePanel->>ConfirmDialog: ConfirmDialog(open=false, title, description)

Loading

Flow diagram for Toolbar search-switch width handling

flowchart LR
  C[Toolbar context]
  SZ[SearchZone wrapper]
  S[Search component]
  SW[ModoEdicion switch]

  C -->|context !== search-switch| SZ
  SZ --> S
  S --> SW

  C -->|context === search-switch| SZFixed[SearchZone with fixed layout]
  SZFixed --> SFixed[Search w 711.5px, flexShrink 0]
  SFixed --> SW

Loading

File-Level Changes

Change	Details	Files
Refine search area layout so the search input has a fixed width only in the search-switch Toolbar context, leaving other contexts unchanged.	Introduce an isSearchSwitch boolean derived from context alongside isSetDeDatos to drive conditional layout behavior. Update the search wrapper div flex properties so it no longer forcibly flexes in the search-switch context, and instead avoids shrinking while letting other contexts continue to flex-fill. Adjust the Search component’s className styles to set a fixed width of 711.5px when isSearchSwitch is true, and keep flex:1 behavior for anonimizador and set-de-datos contexts.	src/components/toolbar/Toolbar.tsx
Replace SidePanel’s per-trigger Popover confirmations with a shared centered Dialog modal for both rename collisions and merge actions, aligning layout, copy, and accessibility with the referenced Figma design.	Swap Popover imports for Dialog primitives (Dialog, DialogContent, DialogTitle, DialogDescription) and update doc comments to refer to a modal rather than a popover. Introduce a reusable ConfirmDialog subcomponent that renders the confirmation card inside a Dialog, with correct max width, spacing, and text styles, and uses DialogTitle/DialogDescription asChild for accessibility. Remove per-pill Popover wrappers around AvatarPill in the people list, keeping pills rendered inline and moving the rename-conflict confirmation to a single ConfirmDialog instance outside the loop, with dynamic title/description text naming both source and target people. Replace the Popover wrapper around the Acciones section’s merge buttons with a plain div and a single ConfirmDialog instance controlled by the existing confirm state, preserving callback semantics while changing the UI to a centered modal. Adjust supporting CSS snippets: add a confirmTextBlock stack for title/description spacing, change description color from text.lighter to text.default, tweak button gap from 16px to 12px, and set DialogContent’s maxW to 389px per the Figma measurement.	src/components/side-panel/SidePanel.tsx
Add a detailed implementation plan document describing the two fixes and the agentic, task-by-task workflow used to implement them.	Create a new markdown file under docs/superpowers outlining goals, constraints, architecture, and a step-by-step plan for capping the search-switch width and converting SidePanel confirmations to a centered Dialog modal. Document verification steps (typecheck, lint, build, Storybook passes) and branch/PR expectations for these changes, including Figma node references and desktop-app pinning considerations.	docs/superpowers/plans/2026-07-16-search-switch-width-and-conflict-modal.md

---

Tips and commands

Interacting with Sourcery

• Trigger a new review: Comment @sourcery-ai review on the pull request.
• Continue discussions: Reply directly to Sourcery's review comments.
• Generate a GitHub issue from a review comment: Ask Sourcery to create an
  issue from a review comment by replying to it. You can also reply to a
  review comment with @sourcery-ai issue to create an issue from it.
• Generate a pull request title: Write @sourcery-ai anywhere in the pull
  request title to generate a title at any time. You can also comment
  @sourcery-ai title on the pull request to (re-)generate the title at any time.
• Generate a pull request summary: Write @sourcery-ai summary anywhere in
  the pull request body to generate a PR summary at any time exactly where you
  want it. You can also comment @sourcery-ai summary on the pull request to
  (re-)generate the summary at any time.
• Generate reviewer's guide: Comment @sourcery-ai guide on the pull
  request to (re-)generate the reviewer's guide at any time.
• Resolve all Sourcery comments: Comment @sourcery-ai resolve on the
  pull request to resolve all Sourcery comments. Useful if you've already
  addressed all the comments and don't want to see them anymore.
• Dismiss all Sourcery reviews: Comment @sourcery-ai dismiss on the pull
  request to dismiss all existing Sourcery reviews. Especially useful if you
  want to start fresh with a new review - don't forget to comment
  @sourcery-ai review to trigger a new review!

Customizing Your Experience

Access your dashboard to:

• Enable or disable review features such as the Sourcery-generated pull request
  summary, the reviewer's guide, and others.
• Change the review language.
• Add, remove or edit custom review instructions.
• Adjust other review settings.

Getting Help

• Contact our support team for questions or feedback.
• Visit our documentation for detailed guides and information.
• Keep in touch with the Sourcery team by following us on X/Twitter, LinkedIn or GitHub.

[sourcery-ai]

Hey - I've reviewed your changes and they look great!

---

Sourcery is free for open source - if you like our reviews please consider sharing them ✨

• X
• Mastodon
• LinkedIn
• Facebook

_{Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.}

[jansaldo]

Follow-up fix (649c5d5): the confirm dialog's title/description were using the wrong text-style tokens — confirmTitle was subtitle.sm.strong (14px) instead of subtitle.md.strong (20px, Figma's real title style per node 40002384:38487's own annotations), and confirmDescription was label.sm.default (12px) instead of subtitle.sm.default (14px). Pre-existing since the merge-confirmation popover shipped in v0.4.0 — caught now while comparing the live modal against Figma side-by-side. Not a font-family issue (Archivo is global across all text styles); just wrong size/weight tokens, which at a ~43% size difference reads as "a completely different font." Verified in Storybook.