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>
  )
}