fix(guest-list): render invite link panel below button instead of beside it

[dccakes]

Daily Product Improvement

📝 TLDR

Fix InviteLinkPanel Fragment root causing the panel to render beside (not below) the "Invite Link" button.

📝 Description

InviteLinkPanel returned a React Fragment, so its two children — the toggle button and the conditional panel <div> — were both direct flex items inside the parent flex justify-end container in the guest list. With flex-direction: row (the default), both items were placed side by side in the same row. The panel appeared to the right of the button instead of below it, and could overflow the container on narrower viewports.

This Change

• Replaces the Fragment root with a flex flex-col items-end gap-3 wrapper so the button and panel stack vertically, with the button right-aligned
• Removes flex justify-end from the parent container in index.tsx (now handled inside the component)
• Adds w-full to the panel so it fills the available column width when open
• Drops the now-redundant mb-6 from the panel (parent's mb-4 provides bottom clearance; gap-3 handles spacing between button and panel)
• Connects button to panel via aria-controls / id for screen reader support

🧪 Testing

• Manually tested functionality
• Ran lint — no new errors
• TypeScript check — only pre-existing deprecation warning unrelated to this change

🧪 How to test as a user

1. Navigate to Guest List
2. Click Invite Link — the panel should open directly below the button, full-width of the content column
3. Click Invite Link again — the panel should collapse
4. Confirm the button remains right-aligned when the panel is closed

---

Recommendations Reviewed

Area: guest-list/invite-link-panel.tsx + guest-list/index.tsx
Issue: Fragment root renders button and panel as sibling flex items in the same row, placing the panel beside the button instead of below it
Recommendation: Wrap in a flex flex-col container so the panel stacks below
Type: UX/UI, Frontend cleanup
Priority: High
Effort: Small

---

Area: guest-list/guest-search-filter.tsx
Issue: Uses react-icons (FaMagnifyingGlass, IoIosArrowDown, IoMdCheckmark) while the rest of the app uses lucide-react
Recommendation: Replace with lucide-react equivalents (Search, ChevronDown, Check)
Type: Frontend cleanup
Priority: Low
Effort: Small

---

Area: budget/category-card.tsx
Issue: Expense delete dialog says "Delete this expense?" without naming the expense — category delete shows the name but expense delete does not
Recommendation: Look up expense by deleteExpenseId and show its description in the dialog title
Type: UX/UI
Priority: Medium
Effort: Small
(Skipped today — overlaps with draft PR #252)

---

Area: vendor/vendor-category-section.tsx
Issue: "Customize Category" button label is generic and inconsistent with action patterns elsewhere
Recommendation: Rename to "Settings" or use an icon-only button
Type: UX/UI
Priority: Low
Effort: Small

---

Selected Improvement

Fix InviteLinkPanel so the panel renders below the toggle button, not beside it.

Why This Was Selected

This is a real layout bug visible to every user who opens the Invite Link panel on the Guest List page. It's self-contained, zero-risk, and verifiable in seconds. The Fragment-root issue is a common React pitfall in flex containers and is worth catching early.

Changes Made

• src/components/guest-list/invite-link-panel.tsx: Replace Fragment with flex flex-col items-end gap-3 wrapper; add aria-controls/id; remove mb-6; add w-full to panel
• src/components/guest-list/index.tsx: Remove flex justify-end from parent container (now unnecessary)

Files Changed

• src/components/guest-list/invite-link-panel.tsx
• src/components/guest-list/index.tsx

Verification

• Lint: clean
• TypeScript: no new errors
• Reviewed diff — no unrelated files changed

Future Recommendations

Recommendation: Replace react-icons with lucide-react in GuestSearchFilter
Priority: Low
Effort: Small
Reason not included: Purely a consistency cleanup with no user-visible UX impact today
Should become GitHub issue: No

Recommendation: Show expense name in budget expense delete confirmation dialog
Priority: Medium
Effort: Small
Reason not included: Draft PR #252 appears to address this
Should become GitHub issue: No

Recommendation: Rename "Customize Category" button in vendor category section
Priority: Low
Effort: Small
Reason not included: Low priority polish; no urgent user impact
Should become GitHub issue: No

GitHub Issues Created or Proposed

None created. All unimplemented recommendations are low priority, already tracked in open PRs, or too small to warrant separate issue tracking.

---

Generated by Claude Code

[github-actions]

Jest Test Coverage

Coverage Summary

Lines	Statements	Branches	Functions
	83.1% (36217/43582)	82.09% (3797/4625)	69.43% (1070/1541)

[dccakes]

CI status note: the two remaining failures are pre-existing infrastructure issues, not caused by this PR's changes.

Build (@vercel/turbopack-next/internal/font/google/font not found in src/templates/voyage/theme.ts): This is a known intermittent Turbopack + Google Fonts resolution flakiness. The Build job passed on the first CI run of this branch (run 32038868019) and failed on the second run with identical code — the only change between runs was a whitespace-only Biome format fix in invite-link-panel.tsx, which has no connection to the voyage template or font loading.

Unit Tests: All 234 test suites and 2032 tests pass. The job is marked failed only because the jest-coverage-comment action step hits a GitHub API "Not Found" error when trying to compare commits — actual test coverage is 83% as shown in the updated coverage badge comment.

The substantive fix (Lint & Format ✅, Type Check ✅) is clean.

---

Generated by Claude Code

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
scv	Building	Preview	Aug 23, 2026 9:09pm