fix(guest-list): align guest form heading and section labels with design language

[dccakes]

📝 TLDR

Replace legacy font-bold text-2xl heading and font-semibold text-lg accordion triggers in the guest form with the app's design-system typography (font-serif italic and font-mono uppercase).

📝 Description

The guest-form side pane is the most frequently used form in the app — it opens every time a user adds or edits a household. Its heading and section-label accordion triggers were using legacy font-bold/font-semibold styles left over from an earlier pass, visually out of place next to every other dialog and panel in the product which use font-serif italic titles and font-mono uppercase section labels.

This is a daily product improvement run. Full recommendation list in the Future Recommendations section below.

This Change

• Updates the panel <h1> from font-bold text-2xl → font-serif text-2xl italic to match dialog/panel titles used in Budget, Vendor, Checklist, and Guest Detail components.
• Updates all four AccordionTrigger section labels ("Guest Party", "Mailing Address", "Notes", "Gifts") from font-semibold text-lg → font-mono text-xs text-foreground/70 uppercase tracking-widest to match the card-header and section-label style used across the product.

🧪 Testing

• Manually tested functionality
• Added/updated tests (typography-only change; no logic changed)

🧪 How to test as a user

1. Open the Guest List page.
2. Click Add Guest or click any existing household row to open the side pane.
3. Verify the panel title (e.g. "Add Household" / "The Smith Family") renders in serif italic instead of bold sans.
4. Verify the section labels ("Guest Party (N)", "Mailing Address", "Notes", "Gifts") render in small mono uppercase instead of large semibold.
5. Confirm all accordion expand/collapse interactions still work correctly.

📚 Documentation

No documentation changes needed.

🎨 Style and code quality

• Ran biome check — no errors; 21 pre-existing warnings unchanged.
• Ran tsc --noEmit — no errors in changed file.

📦 Dependencies

No dependency changes.

---

Daily Product Improvement

Summary

Updated the guest-form side pane heading and accordion section labels to use the app's established design language, removing the last visible font-bold text-2xl heading in the most-used form in the product.

Recommendations Reviewed

• Area: src/components/forms/guest-form.tsx
  Issue: Panel heading uses font-bold text-2xl; accordion triggers use font-semibold text-lg. Both are visually inconsistent with every other dialog/panel title in the app.
  Recommendation: Replace with font-serif italic title and font-mono uppercase section labels.
  Type: UX/UI
  Priority: Medium
  Effort: Small

• Area: src/components/forms/dashboard-settings-form.tsx
  Issue: The website-builder settings panel has 4 headings using font-bold text-2xl, same inconsistency as above.
  Recommendation: Update to font-serif italic or font-display italic to match design language.
  Type: UX/UI
  Priority: Medium
  Effort: Small

• Area: src/app/(authenicated)/settings/
  Issue: Settings page has no loading.tsx. If the page fetch is slow, there is a blank content flash rather than a graceful skeleton.
  Recommendation: Add a loading.tsx with a DashboardTopbar skeleton, matching the pattern used by budget, events, vendors, and checklist pages.
  Type: UX/UI
  Priority: Medium
  Effort: Small

• Area: src/components/forms/rsvp-form-settings.tsx
  Issue: Hardcoded bg-white and bg-blue-50 colors break in dark mode. Fixed w-[800px] width is not responsive on smaller screens.
  Recommendation: Replace with theme-aware tokens (bg-background, bg-primary/10) and add max-w-3xl responsive container.
  Type: UX/UI
  Priority: Medium
  Effort: Medium

• Area: src/components/guest-list/guests-view.tsx (line ~815)
  Issue: Delete dialog title is computed inside an IIFE in JSX, re-running on every render.
  Recommendation: Move to a useMemo or derived variable above the return statement.
  Type: Frontend cleanup
  Priority: Low
  Effort: Small

• Area: src/components/guest-list/guests-view.tsx — saveMembersChanges
  Issue: Mutation result is exposed via a manually-constructed new Promise<boolean> wrapping mutation callbacks. This pattern is error-prone and fragile.
  Recommendation: Refactor to use mutateAsync and standard async/await.
  Type: Frontend cleanup
  Priority: Low
  Effort: Medium

Selected Improvement

Fix the guest-form side pane heading and accordion section labels — src/components/forms/guest-form.tsx.

Why This Was Selected

The guest form is opened by users every single time they add or edit a household. The heading was the last remaining font-bold text-2xl title in a primary interactive panel — all newer dialogs (Budget, Vendor, Checklist, Guest Detail) already use font-serif italic. The fix is contained to one file, zero-risk, and immediately visible to users in the most-used flow in the product.

Changes Made

• h1 at line 248: font-bold text-2xl → font-serif text-2xl italic
• Four AccordionTrigger labels (lines 284, 314, 323, 344): font-semibold text-lg hover:no-underline → font-mono text-xs text-foreground/70 uppercase tracking-widest hover:no-underline

Files Changed

• src/components/forms/guest-form.tsx

Verification

• biome check — no new errors
• tsc --noEmit — no TypeScript errors in changed file
• Diff reviewed manually — 5 lines changed, no logic touched

Future Recommendations

• Recommendation: Fix 4 headings in dashboard-settings-form.tsx (website builder settings panel) using same font-bold text-2xl pattern.
  Priority: Medium | Effort: Small | Reason not included: Same category as today's fix; keeping PRs focused. | GitHub issue: No

• Recommendation: Add loading.tsx to src/app/(authenicated)/settings/ to prevent content flash.
  Priority: Medium | Effort: Small | Reason not included: Different concern, worth its own focused PR. | GitHub issue: No

• Recommendation: Fix hardcoded bg-white/bg-blue-50 and w-[800px] in rsvp-form-settings.tsx for dark-mode compatibility and responsiveness.
  Priority: Medium | Effort: Medium | Reason not included: Requires broader audit of RSVP settings area. | GitHub issue: Yes — affects dark mode and mobile layouts across the RSVP management flow.

• Recommendation: Remove IIFE from delete dialog title in guests-view.tsx.
  Priority: Low | Effort: Small | Reason not included: Low impact. | GitHub issue: No

• Recommendation: Refactor saveMembersChanges in guests-view.tsx to use mutateAsync instead of manual Promise wrapping.
  Priority: Low | Effort: Medium | Reason not included: Requires careful testing of discard-changes and delete flows. | GitHub issue: No

GitHub Issues Created or Proposed

No issues created. The rsvp-form-settings.tsx dark-mode / responsiveness problem is worth tracking but was not created as an issue today because it needs design input on the correct responsive layout for the RSVP management view before implementation.

---

🤖 Generated with Claude Code

https://claude.ai/code/session_0174toNgb3jXcqaknWNmSHqE

---

Generated by Claude Code

[vercel]

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

Project	Deployment	Actions	Updated
scv	Error		Sep 4, 2026 2:19pm UTC

[github-actions]

Jest Test Coverage

Coverage Summary

Lines	Statements	Branches	Functions
	83.11% (36264/43629)	82.14% (3813/4642)	69.49% (1073/1544)