Show the form's own name on the forms source card, tidy badges

docs/branch-review-records/eac503b9ddf311057c2d0b0c05ab3cc7cb240a5eb34fbed37920b32612534694.record.md

@@ -0,0 +1 @@
+| 2026-08-17 | claude/form-names-design-rjw40t | 4dfe2b229269ec55a6ebbfc9493317c2e05670fd | src/components/forms/form-detail-page.tsx | PR #2041 opened (BigSimmo/Database). User-requested UI relabel of the forms detail page's source-file card: dropped the synthetic 'Form {code}.pdf' heading (a made-up filename) in favour of the form's own title (form.title), moved the form code into a small kicker badge, and turned the 'Password protected'/'Check source' text into a proper tone-pill status badge on both breakpoints. Static MHA-2014 forms reference catalogue only; no form content, availability data, or source URLs changed. classifyPullRequestFiles: not clinicalRisk, not operationalRisk, not RAG-ranking, so no Clinical Governance Preflight or RAG impact line required. | Verification not run: session environment has Node 22 with no node_modules installed (repo requires Node >=24.15.0 <25, engine-strict); npm ci was not attempted (no install/network side effects requested). Reviewed diff by hand: balanced JSX tags/braces across the file (git diff + brace-count check), every Tailwind class/token used (text-3xs, text-2xs, tracking-label, toneWarning, toneNeutral) already defined/used elsewhere in the repo. Grepped tests/** for the changed copy ('Password protected', the .pdf-suffixed heading, formShortTitle) - no test pins it. PR body asks the merger to run npm run verify:pr-local and a quick Chromium/phone check of /forms/* before merge. |

src/components/forms/form-detail-page.tsx

@@ -1042,22 +1042,45 @@ export function FormDetailPage({ form }: { form: FormRecord }) {
                   <FileText className="size-icon-md sm:size-icon-lg" aria-hidden />
                 </span>
                 <div className="min-w-0">
-                  <h2 className="truncate text-sm font-semibold text-[color:var(--text-heading)]">
-                    {formShortTitle(form)}
-                    {details?.availability === "downloadable" ? ".pdf" : ""}
+                  <div className="flex items-center gap-1.5">
+                    <span className="inline-flex h-5 shrink-0 items-center rounded-md bg-[color:var(--clinical-accent-soft)] px-1.5 text-3xs font-bold uppercase leading-none tracking-label text-[color:var(--clinical-accent)]">
+                      {`Form ${formCode(form)}`}
+                    </span>
+                    {details?.availability === "downloadable" ? (
+                      <span className="text-2xs font-semibold uppercase leading-none text-[color:var(--text-muted)]">
+                        PDF
+                      </span>
+                    ) : null}
+                  </div>
+                  <h2 className="mt-1 truncate text-sm font-semibold text-[color:var(--text-heading)]">
+                    {displayText(form.title, `Form ${formCode(form)}`)}
                   </h2>
-                  <p className={cn("mt-0.5 text-xs", textMuted)}>{displayText(form.source?.label, "Official form")}</p>
+                  <p className={cn("mt-0.5 truncate text-xs", textMuted)}>
+                    {displayText(form.source?.label, "Official form")}
+                  </p>
                 </div>
               </div>
               <span className="hidden text-xs font-semibold text-[color:var(--text-muted)] sm:block">
                 {displayText(form.source?.status, "Source status pending")}
               </span>
-              <span className="hidden text-xs font-semibold text-[color:var(--text-muted)] sm:block">
+              <span
+                className={cn(
+                  "hidden min-h-7 items-center rounded-full border px-2 text-xs font-semibold shadow-[var(--shadow-inset)] sm:inline-flex",
+                  details?.officialPdfPasswordProtected ? toneWarning : toneNeutral,
+                )}
+              >
                 {details?.officialPdfPasswordProtected ? "Password protected" : "Check source"}
               </span>
-              <div className="flex items-center gap-2 text-xs font-semibold text-[color:var(--text-muted)] sm:hidden">
-                <span>{details?.officialPdfPasswordProtected ? "Password protected" : "Check source"}</span>
-                <ChevronRight className="h-4 w-4" aria-hidden />
+              <div className="flex items-center gap-2 sm:hidden">
+                <span
+                  className={cn(
+                    "inline-flex min-h-6 items-center rounded-full border px-2 text-2xs font-semibold shadow-[var(--shadow-inset)]",
+                    details?.officialPdfPasswordProtected ? toneWarning : toneNeutral,
+                  )}
+                >
+                  {details?.officialPdfPasswordProtected ? "Password protected" : "Check source"}
+                </span>
+                <ChevronRight className="h-4 w-4 text-[color:var(--text-muted)]" aria-hidden />
               </div>
               {form.source?.url || details?.localPdfPath ? (
                 <div className="hidden items-center gap-3 sm:flex">