feat: improve form usability with auto-focus, character limits, and unsaved changes warnings for better user experience

This commit is contained in:
Usman Baig
2026-02-22 20:02:50 +01:00
parent 5d234b30d6
commit da0366603e
6 changed files with 96 additions and 2 deletions

View File

@@ -120,8 +120,13 @@ export default function CreateFunnelPage() {
value={name}
onChange={(e) => setName(e.target.value)}
placeholder="e.g. Signup Flow"
autoFocus
required
maxLength={255}
/>
{name.length > 200 && (
<span className={`text-xs tabular-nums mt-1 ${name.length > 240 ? 'text-amber-500' : 'text-neutral-400'}`}>{name.length}/255</span>
)}
</div>
<div>
<label className="block text-sm font-medium text-neutral-700 dark:text-neutral-300 mb-1">