Add descriptions to active examples (#2407)

Adds example descriptions to active examples. Some examples only have
descriptions and no details, so we should show both on the example
details

### Change Type

- [x] `documentation` — Changes to the documentation only[^2]

apps/examples/src/HomePage.tsx

@@ -18,7 +18,7 @@ export function HomePage() {
 					.filter((example) => !example.hide)
 					.filter((example) => example.order !== null)
 					.map((example) => (
-						<ListLink key={example.path} example={example} showDescription />
+						<ListLink key={example.path} example={example} showDescriptionWhenInactive />
 					))}
 			</ul>
 			<hr />
@@ -27,7 +27,7 @@ export function HomePage() {
 					.filter((example) => !example.hide)
 					.filter((example) => example.order === null)
 					.map((example) => (
-						<ListLink key={example.path} example={example} showDescription />
+						<ListLink key={example.path} example={example} showDescriptionWhenInactive />
 					))}
 			</ul>
 		</div>

apps/examples/src/components/ListLink.tsx

@@ -10,8 +10,8 @@ export const ListLink = forwardRef(function ListLink(
 	{
 		example,
 		isActive,
-		showDescription,
-	}: { example: Example; isActive?: boolean; showDescription?: boolean },
+		showDescriptionWhenInactive,
+	}: { example: Example; isActive?: boolean; showDescriptionWhenInactive?: boolean },
 	ref: ForwardedRef<HTMLLIElement>
 ) {
 	const id = useId()
@@ -53,7 +53,7 @@ export const ListLink = forwardRef(function ListLink(
 					</Link>
 				)}
 			</h3>
-			{showDescription && <Markdown sanitizedHtml={example.description} />}
+			{showDescriptionWhenInactive && <Markdown sanitizedHtml={example.description} />}
 		</>
 	)
 
@@ -63,6 +63,7 @@ export const ListLink = forwardRef(function ListLink(
 	// )
 	const extraDetails = (
 		<div className="examples__list__item__details" aria-hidden={!isActive}>
+			{!showDescriptionWhenInactive && <Markdown sanitizedHtml={example.description} />}
 			<Markdown sanitizedHtml={example.details} />
 			<div className="examples__list__item__code">
 				<a href={example.codeUrl} target="_blank" rel="noreferrer">

apps/examples/src/styles.css

@@ -92,6 +92,7 @@ html,
 	overflow: hidden;
 	position: relative;
 	padding: 1.5rem;
+	display: block;
 }
 .examples__list__item__link {
 	position: absolute;
@@ -101,7 +102,6 @@ html,
 }
 
 .examples__list__item__active {
-	display: block;
 	padding: 1.5rem;
 	text-decoration: none;
 	color: inherit;
@@ -128,18 +128,21 @@ html,
 	all: unset;
 	font-weight: 700;
 	font-size: 1rem;
-	margin: 0.25rem 0rem;
+	margin-top: 0.25rem;
 	display: flex;
 	align-items: center;
 	justify-content: space-between;
 }
 .examples__list__item__details {
-	margin-top: 1rem;
 	position: absolute;
 	left: 1rem;
 	right: 1rem;
 	opacity: 0;
 	transition: opacity 0.12s ease-in-out;
+	margin-top: 0.5rem;
+	display: flex;
+	flex-direction: column;
+	gap: 0.5rem;
 }
 .examples__list__item__active .examples__list__item__details {
 	position: static;
@@ -164,7 +167,6 @@ html,
 	gap: 0.5rem;
 }
 .examples__list__item__code a {
-	margin-top: 0.5rem;
 	padding: 0.5rem 0.5rem;
 	border-radius: 6px;
 	background-color: white;