fix(guest-list): remove duplicate padding from GuestListSkeleton

[dccakes]

Daily Product Improvement

📝 TLDR

Remove duplicate padding from GuestListSkeleton — the skeleton was adding the same padding as its parent <main> element, causing a visible layout shift when the guest list loaded.

📝 Description

GuestListSkeleton is used as a Suspense fallback inside <main className='...px-4 py-5 lg:px-6 lg:py-6'> in guest-list/page.tsx. The skeleton was independently adding the same px-4 py-5 lg:px-6 lg:py-6 on its own container div, doubling the padding during the loading state.

This Change

• Removes px-4 py-5 lg:px-6 lg:py-6 from the GuestListSkeleton wrapper <div>, since that padding is already provided by the parent <main> element
• The skeleton content now lines up with the actual guest list content that replaces it, eliminating a layout shift on load

Recommendations Reviewed

Area: src/components/guest-list/guest-list-skeleton.tsx
Issue: GuestListSkeleton adds px-4 py-5 lg:px-6 lg:py-6 but is rendered inside a <main> with the same classes — skeleton content is double-padded vs actual content
Recommendation: Remove duplicate padding from skeleton container
Type: UX/UI
Priority: Medium
Effort: Small

---

Area: All authenticated page routes (budget/page.tsx, checklist/page.tsx, events/page.tsx, guest-list/page.tsx, vendors/page.tsx, website/page.tsx)
Issue: All pages override metadata title as 'Budget | Your Wedding Website' instead of composing with the root template ('%s | OSWP'); also redundantly declare icons already set at root
Recommendation: Use short-form titles so Next.js composes them with the root '%s | OSWP' template; remove redundant icons
Type: Frontend cleanup / SEO
Priority: Medium
Effort: Small

---

Area: src/app/(authenicated)/settings/page.tsx
Issue: No metadata export — browser tab shows the root default title instead of "Settings"
Recommendation: Add export const metadata: Metadata with title: 'Settings'
Type: Frontend cleanup
Priority: Medium
Effort: Small

---

Area: src/components/vendor/ (vendor-form.tsx, vendor-category-section.tsx, index.tsx)
Issue: VENDOR_CATEGORIES and CATEGORY_LABELS constants are defined independently in multiple files
Recommendation: Extract to a shared vendor-constants.ts file imported by all three
Type: Frontend cleanup
Priority: Medium
Effort: Small

---

Area: src/components/dashboard/planning-overview.tsx — VendorsCard
Issue: VendorsCard fetches vendor data with no loading state; while loading, vendorCount is 0 so the card flashes the empty state ("No vendors added yet") for users who have vendors
Recommendation: Destructure isLoading and render a skeleton while the query resolves (same pattern as BudgetCard)
Type: UX/UI
Priority: Medium
Effort: Small

Selected Improvement

Removed duplicate padding from GuestListSkeleton. One-line change in src/components/guest-list/guest-list-skeleton.tsx.

Why This Was Selected

• Not covered by any open PR
• Targeted single-file, single-line change
• Clear user benefit: eliminates visible layout shift during page load on the guest list page
• Zero risk — only removes a CSS class that was incorrectly duplicated

Changes Made

• Removed px-4 py-5 lg:px-6 lg:py-6 from the root <div> of GuestListSkeleton

Files Changed

• src/components/guest-list/guest-list-skeleton.tsx

Verification

• TypeScript check (npx tsc --noEmit) passes with no new errors
• Biome lint passes on the changed file
• Visually confirmed: the skeleton is always rendered inside <main className='min-h-0 flex-1 overflow-y-auto px-4 py-5 lg:px-6 lg:py-6'> — no other usage sites exist

Future Recommendations

Recommendation: Use short-form metadata titles across all authenticated pages so they compose with the root '%s | OSWP' template; also add missing metadata to settings/page.tsx
Priority: Medium
Effort: Small
Reason not included: PR #251 is already open addressing this
Should become GitHub issue: No

---

Recommendation: Extract shared vendor category constants to a single file
Priority: Medium
Effort: Small
Reason not included: PR #280 is already open addressing this
Should become GitHub issue: No

---

Recommendation: Add loading skeleton to VendorsCard in the dashboard planning overview to prevent empty-state flash
Priority: Medium
Effort: Small
Reason not included: PR #256 is already open addressing this
Should become GitHub issue: No

GitHub Issues Created or Proposed

None. All larger follow-up items are already tracked by open PRs (#251, #256, #280).

---

🤖 Generated with Claude Code

https://claude.ai/code/session_01UaXfTGQoWpy1UaLLVVG1iZ

---

Generated by Claude Code

[vercel]

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

Project	Deployment	Actions	Updated
scv	Error		Sep 3, 2026 10:17am UTC

[github-actions]

Jest Test Coverage

Coverage Summary

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