404 no matches spacing (#695)

Co-authored-by: Kent C. Dodds <me+github@kentcdodds.com>
Co-authored-by: Cursor Agent <cursoragent@cursor.com>

Author: kentcdodds

app/components/errors.tsx

@@ -112,13 +112,15 @@ function ErrorPage({
 				) : null}
 				<HeroSection {...resolvedHeroProps} />
 
-				{possibleMatches ? (
+				{possibleMatches?.length ? (
 					<PossibleMatchesSection
 						matches={possibleMatches}
 						query={possibleMatchesQuery}
 					/>
 				) : null}
 
+				{possibleMatches?.length === 0 ? <Spacer size="lg" /> : null}
+
 				{articles?.length ? (
 					<>
 						<div id="articles" />
@@ -142,9 +144,7 @@ function PossibleMatchesSection({
 	query?: string
 }) {
 	const q = typeof query === 'string' ? query.trim() : ''
-	const searchUrl = q ? `/search?q=${encodeURIComponent(q)}` : '/search'
 	const sorted = sortNotFoundMatches(matches)
-	const hasMatches = sorted.length > 0
 
 	return (
 		<>
@@ -195,13 +195,6 @@ function PossibleMatchesSection({
 							</li>
 						))}
 					</ul>
-					<p className="mt-4 text-sm text-slate-500">
-						{hasMatches ? 'None of these match? ' : 'No close matches found. '}
-						<a href={searchUrl} className="underlined">
-							Try semantic search
-						</a>
-						.
-					</p>
 				</div>
 			</Grid>
 		</>
@@ -233,10 +226,20 @@ function FourOhFour({
 	const searchUrl = q ? `/search?q=${encodeURIComponent(q)}` : '/search'
 	const hasPossibleMatches =
 		Array.isArray(possibleMatchesProp) && possibleMatchesProp.length > 0
-	const heroActionTo = hasPossibleMatches ? '#possible-matches' : searchUrl
-	const heroActionLabel = hasPossibleMatches
-		? 'Possible matches'
-		: 'Search the site'
+	const heroAction = hasPossibleMatches ? (
+		<ArrowLink to="#possible-matches" className="whitespace-nowrap">
+			Possible matches
+		</ArrowLink>
+	) : (
+		<div className="space-y-2">
+			<ArrowLink to={searchUrl} className="whitespace-nowrap">
+				Search the site
+			</ArrowLink>
+			<p className="text-sm text-slate-500 dark:text-slate-400">
+				Uses semantic search to find related content.
+			</p>
+		</div>
+	)
 
 	// Most pages intentionally use the global `mx-10vw` gutter (it’s part of the
 	// overall site layout). The 404 view reads better on mobile when it’s a bit
@@ -255,11 +258,7 @@ function FourOhFour({
 					title: "404 - Oh no, you found a page that's missing stuff.",
 					subtitle: `"${pathname}" is not a page on kentcdodds.com. So sorry.`,
 					image: <MissingSomething className="rounded-lg" aspectRatio="3:4" />,
-					action: (
-						<ArrowLink to={heroActionTo} className="whitespace-nowrap">
-							{heroActionLabel}
-						</ArrowLink>
-					),
+					action: heroAction,
 				}}
 			/>
 		</div>

app/components/sections/header-section.tsx

@@ -8,7 +8,7 @@ interface HeaderSectionProps {
 	cta?: string
 	as?: React.ElementType
 	title: string
-	subTitle: string
+	subTitle?: string
 	className?: string
 }
 
@@ -30,9 +30,11 @@ function HeaderSection({
 			>
 				<div className="space-y-2 lg:space-y-0">
 					<H2>{title}</H2>
-					<H2 variant="secondary" as="p">
-						{subTitle}
-					</H2>
+					{subTitle ? (
+						<H2 variant="secondary" as="p">
+							{subTitle}
+						</H2>
+					) : null}
 				</div>
 
 				{cta && ctaUrl ? (