fix(vendor): change website input type from url to text so normalizeWebsite runs

[dccakes]

Daily Product Improvement

📝 TLDR

Fix dead normalization path in vendor form website field — type='url' blocked the normalizeWebsite helper from ever running.

📝 Description

During daily product review, the vendor add/edit form website input was identified as having a latent UX bug: the field used type='url', which triggers browser-native URL validation before handleSubmit is called. This meant a user entering example.com (without https://) would see a browser error ("Please enter a URL") and never reach the normalizeWebsite helper that was specifically written to prefix https:// in that case. The normalization code was effectively dead.

This Change

• Changed the website Input from type='url' to type='text' so browser-native URL validation no longer blocks submission.
• Added inputMode='url' to preserve the URL-optimized keyboard on mobile devices.
• Updated the placeholder from https://... to https://example.com for clarity.
• The existing normalizeWebsite helper now runs as intended, prefixing https:// when the user enters a bare domain.

🧪 Testing

• Manually tested functionality
• Ran biome lint — no issues
• Ran tsc --noEmit — no type errors

🧪 How to test as a user

1. Open the vendor list and click + Add Vendor.
2. In the Website field, enter a bare domain such as floristjane.com (no protocol).
3. Submit the form.
4. Open the vendor detail panel and confirm the stored URL is https://floristjane.com.
5. Previously this would fail with a browser validation error before the form could submit.

📚 Documentation

No documentation changes needed.

🎨 Style and code quality

• Ran biome lint on changed file — clean

📦 Dependencies

No new dependencies.

---

Recommendations Reviewed

Area	Issue	Recommendation	Type	Priority	Effort
vendor-form.tsx	type='url' blocks normalizeWebsite helper; bare domains like example.com fail browser validation before handleSubmit runs	Change to type='text' + inputMode='url' so normalization can execute	UX fix / Frontend cleanup	Medium	Small
vendor-card.tsx	priceDisplay() is called twice in JSX — once to guard and once to render	Extract to a const price = priceDisplay() variable	Frontend cleanup	Low	Small
vendor-card.tsx	Ratings breakdown panel uses hidden/block CSS toggle — no click-outside-to-close	Replace with a Popover component	UX	Medium	Medium
budget/category-form.tsx, expense-form.tsx	Submit button text does not change during isPending (unlike vendor form which shows "Saving…")	Add loading text to match vendor form pattern	UX polish	Low	Small
self-invite-link-manager.tsx	Expiry-before-event warning is plain small text — easy to miss	Elevate to a visually distinct warning row	UX polish	Low	Small

Selected Improvement

Vendor form website field: type='url' → type='text' with inputMode='url'.

Why This Was Selected

This is the only item that renders existing code unreachable. The normalizeWebsite helper was written with good intent but could never execute because browser-native URL validation on type='url' fires first. It is a single-line fix with clear, testable behavior, zero risk to unrelated surfaces, and no design input needed.

Files Changed

• src/components/vendor/vendor-form.tsx

Future Recommendations

Recommendation	Priority	Effort	Reason not included	GitHub issue
Replace ratings breakdown hidden/block toggle with a Popover so click-outside closes it	Medium	Medium	Requires refactoring to a Popover component — larger scope than today's targeted fix	No
Add "Saving…" loading text to budget category and expense form submit buttons	Low	Small	Minor polish; correct as-is (button is disabled during pending)	No
Deduplicate priceDisplay() call in vendor-card.tsx	Low	Small	Micro-cleanup; no user-facing impact	No
Elevate invite-link expiry warning to a visually distinct alert	Low	Small	Nice-to-have polish	No

GitHub Issues Created or Proposed

None. All unimplemented recommendations are minor polish or small cleanups that do not meet the threshold for separate issue tracking.

---

Generated by Claude Code

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
scv	Error		Aug 18, 2026 2:19pm

[github-actions]

Jest Test Coverage

Coverage Summary

Lines	Statements	Branches	Functions
	83.07% (36153/43518)	81.96% (3777/4608)	69.3% (1068/1541)