Collection-mode frontend review fixes: customs actually post, server-truth gating

pr-review findings:
- The full form rendered custom questions but the submit allowlist
  stripped their answers before POST: optional customs were silent data
  loss, and a REQUIRED custom made the form unsubmittable (422 naming a
  field the user visibly filled). Custom keys join the allowlist.
- The modal re-checks the fetched config's collection_mode (server
  truth) and self-heals stale draft records: a portal flipped to an
  auto mode mid-draft had already auto-finalized the submission, so
  prompting asked consent for something published and 409'd after
  burning the captcha.
- Custom inputs in the modal use Radix TextField (visual/blur parity),
  carry ids for their labels, and cap at the backend lengths; the
  required-only scope of the abbreviated form is documented as a
  decision.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

Author: nofurtherinformation

app/src/app/components/Forms/SubmissionForm.tsx

@@ -185,7 +185,10 @@ export const SubmissionForm: React.FC<SubmissionFormProps> = ({
           const emailConfirmed =
             !requireEmailConfirm || (shown.includes('email') && emailConfirm === emailValue);
           if (captchaToken && formIsValid && emailConfirmed) {
-            submitForm(portalId, shown);
+            // Custom keys must be in the allowlist too, or the store filter
+            // strips their answers before POST (silent loss for optional
+            // customs; an unrecoverable 422 for required ones).
+            submitForm(portalId, [...shown, ...(customFields ?? []).map(c => c.key)]);
           }
         }}
         ref={formRef}

app/src/app/components/MapPage/SubmitToPortalModal.tsx

@@ -1,6 +1,15 @@
 'use client';
 import {useEffect, useMemo, useState} from 'react';
-import {Blockquote, Button, Checkbox, Dialog, Flex, Text, TextArea} from '@radix-ui/themes';
+import {
+  Blockquote,
+  Button,
+  Checkbox,
+  Dialog,
+  Flex,
+  Text,
+  TextArea,
+  TextField,
+} from '@radix-ui/themes';
 import {useMapStore} from '@/app/store/mapStore';
 import {useFormState} from '@/app/store/formState';
 import {useDraftSubmissionStore} from '@/app/store/draftSubmissionStore';
@@ -48,8 +57,16 @@ export const SubmitToPortalModal: React.FC = () => {
     setError('');
     if (!draft) return;
     getFormConfig(draft.portalId).then(response => {
-      if (response.ok) setConfig(response.response);
-      else setError('Could not load the portal form. Please try again later.');
+      if (response.ok) {
+        setConfig(response.response);
+        // Self-heal stale/legacy records: the stored mode is a snapshot
+        // from draft creation; the config is the server truth.
+        if (draft.collectionMode !== response.response.collection_mode) {
+          updateDraftSubmission(promptDocumentId!, {
+            collectionMode: response.response.collection_mode,
+          });
+        }
+      } else setError('Could not load the portal form. Please try again later.');
     });
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [draft?.portalId, promptDocumentId]);
@@ -60,6 +77,12 @@ export const SubmitToPortalModal: React.FC = () => {
   if (!promptDocumentId || promptDocumentId !== currentDocumentId || !draft || draft.submitted) {
     return null;
   }
+  // The config is server truth: a portal flipped to an auto mode after this
+  // draft was created has ALREADY auto-finalized the submission — prompting
+  // would ask consent for something published and 409 (burning a captcha).
+  if (config && config.collection_mode !== 'prompt') {
+    return null;
+  }
 
   const requiredFields = FIELD_ORDER.filter(name => config?.required_fields?.includes(name));
   const needsEmailConfirm = !!config?.require_email_confirm && requiredFields.includes('email');
@@ -160,23 +183,28 @@ export const SubmitToPortalModal: React.FC = () => {
               </Flex>
             );
           })}
+          {/* Abbreviated by design: like the registry fields above, only
+              REQUIRED custom questions are asked here — optional ones are
+              full-form-only (SubmissionForm). */}
           {requiredCustoms.map(custom => (
             <Flex key={custom.key} direction="column" gap="1">
-              <Text as="label" size="2" weight="medium">
+              <Text as="label" size="2" weight="medium" htmlFor={custom.key}>
                 {custom.label} *
               </Text>
               {custom.field_type === 'textarea' ? (
                 <TextArea
+                  id={custom.key}
                   value={values[custom.key] ?? ''}
                   placeholder={custom.label}
+                  maxLength={5000}
                   onChange={e => setValues(v => ({...v, [custom.key]: e.target.value}))}
                 />
               ) : (
-                <input
-                  className="rt-TextFieldInput rt-r-size-2 border border-slate-300 rounded p-2"
-                  type="text"
+                <TextField.Root
+                  id={custom.key}
                   value={values[custom.key] ?? ''}
                   placeholder={custom.label}
+                  maxLength={255}
                   onChange={e => setValues(v => ({...v, [custom.key]: e.target.value}))}
                 />
               )}