Missing optional fields show "Not provided" or "Suggest an edit", not broken UI

Rendering a literal undefined or an empty <p> tag in place of a missing field makes the listing look broken and signals to users that the directory does not maintain its data. Empty gaps collapse layout, CLS scores rise, and users lose confidence that any field on the page is reliable. An explicit Not provided with a Suggest an edit call-to-action converts the absence into a contribution opportunity, which is how crowd-sourced directories keep fields populated over time.

Guard every optional field render with a truthiness check and decide between hiding the row or showing a suggest-an-edit prompt. Standardize the fallback in a small FieldOrSuggest component so the copy and link stay consistent across the detail page at src/components/listings/field-or-suggest.tsx.

export function FieldOrSuggest({ value, label, slug }: Props) {
  if (value) return <p><strong>{label}:</strong> {value}</p>
  return (
    <p className="text-gray-500">
      {label} not provided · <a href={`/listings/${slug}/suggest-edit`}>Suggest one</a>
    </p>
  )
}

• ID: directory-listing-schema.content-completeness.missing-field-handling

• Severity: high

• What to look for: Count all optional fields in the listing schema. For each optional field, on a test listing page, inspect the rendering of optional fields (like website URL, secondary phone, social links). If a field is missing, check how it's displayed — is it shown as empty text, removed from DOM, showing placeholder text, or breaking layout?

• Pass criteria: Missing optional fields either don't render at all (no empty <p> tags) or show helpful text like "Not provided" or a CTA like "Suggest an edit". No broken UI — 100% of missing or null optional fields must be handled without rendering errors or empty sections. Report: "X optional fields found, all Y handled gracefully when null."

• Fail criteria: Missing optional fields create empty paragraphs, render as "undefined" text, or create visual gaps/broken layout.

• Skip (N/A) when: All fields are required.

• Detail on fail: Example: "Optional field 'website' renders as empty <p> tag" or "Missing phone shows 'Phone: undefined'"

• Remediation: Conditionally render optional fields:

  {listing.website ? (
    <p><a href={listing.website}>{listing.website}</a></p>
  ) : (
    <p class="text-gray-500">Website not provided • <a href="/suggest-edit">Suggest one</a></p>
  )}