wrap inputs in real forms, so enter submits instead of doing nothing

24 panel and screen files had their fields sitting in a <div> instead of a
<form> — typing a value and pressing Enter did nothing, and the button was
the only way in. Fixed the sites that are a real form, a single field with
an obvious action, or a multi-field editor; left search/filter boxes and a
few genuinely ambiguous sites alone (see TODO.md for the full breakdown).

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

src/apps/officer-web/Screens/Dashboard/CapabilityPage.tsx

@@ -1,3 +1,4 @@
+import type { FormEvent } from 'react';
 import { useState, useEffect, useRef } from 'react';
 import { Link, useNavigate, useParams, useSearchParams } from 'react-router';
 import { useQuery, useQueryClient } from '@tanstack/react-query';
@@ -344,7 +345,8 @@ export const CapabilityList = ({
     queryFn: () => client.get<CapabilitySummary[]>(endpoint),
   });
 
-  const handleCreate = async () => {
+  const handleCreate = async (ev?: FormEvent) => {
+    ev?.preventDefault();
     const name = newName.trim();
     if (!name) return;
     try {
@@ -382,16 +384,15 @@ export const CapabilityList = ({
         )}
       </div>
       {creating && (
-        <div className="shrink-0 px-3 py-2 border-b border-duck-dark/10 bg-duck-teal/5 flex items-center gap-1.5">
+        <form
+          onSubmit={handleCreate}
+          className="shrink-0 px-3 py-2 border-b border-duck-dark/10 bg-duck-teal/5 flex items-center gap-1.5"
+        >
           <input
             ref={newNameRef}
             value={newName}
             onChange={(ev) => setNewName(ev.target.value)}
             onKeyDown={(ev) => {
-              if (ev.key === 'Enter') {
-                ev.preventDefault();
-                handleCreate();
-              }
               if (ev.key === 'Escape') {
                 setCreating(false);
                 setNewName('');
@@ -401,13 +402,14 @@ export const CapabilityList = ({
             className="flex-1 min-w-0 rounded border border-duck-dark/20 bg-background px-2 py-1 text-base md:text-sm text-duck-dark placeholder:text-duck-dark/30 focus:outline-none focus:ring-1 focus:ring-duck-teal/30"
           />
           <button
-            onClick={handleCreate}
+            type="submit"
             disabled={!newName.trim()}
             className="p-1 rounded hover:bg-duck-dark/10 cursor-pointer transition-colors disabled:opacity-30"
           >
             <Check className="h-3.5 w-3.5 text-duck-teal" />
           </button>
           <button
+            type="button"
             onClick={() => {
               setCreating(false);
               setNewName('');
@@ -416,7 +418,7 @@ export const CapabilityList = ({
           >
             <X className="h-3.5 w-3.5 text-duck-dark/50" />
           </button>
-        </div>
+        </form>
       )}
       {externalSearch === undefined && (
         <div className="shrink-0 px-3 py-2 border-b border-duck-dark/10">