From d28814d869b7eac1c7ee81ad7734ca983a6fff0a Mon Sep 17 00:00:00 2001
From: Almeida <almeidx@pm.me>
Date: Fri, 10 Nov 2023 22:01:30 +0000
Subject: [PATCH] fix: properly support multiple extends/implements (#9934)

* fix: properly support multiple extends/implements

* refactor: use flexbox instead of space util

Co-authored-by: Noel <buechler.noel@outlook.com>

---------

Co-authored-by: Noel <buechler.noel@outlook.com>
Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
---
 .../components/documentation/HierarchyText.tsx   | 16 +++++++++-------
 1 file changed, 9 insertions(+), 7 deletions(-)

diff --git a/apps/website/src/components/documentation/HierarchyText.tsx b/apps/website/src/components/documentation/HierarchyText.tsx
index b68bf4b3962e..646b6e00f8a1 100644
--- a/apps/website/src/components/documentation/HierarchyText.tsx
+++ b/apps/website/src/components/documentation/HierarchyText.tsx
@@ -45,13 +45,15 @@ export function HierarchyText({
 	}
 
 	return (
-		<div className="flex flex-row place-items-center gap-4">
-			<h3 className="text-xl font-bold">{type}</h3>
-			<span className="break-all font-mono space-y-2">
-				{excerpts.map((excerpt, idx) => (
-					<ExcerptText excerpt={excerpt} key={idx} model={model} />
-				))}
-			</span>
+		<div className="flex flex-col gap-4">
+			{excerpts.map((excerpt, idx) => (
+				<div className="flex flex-row place-items-center gap-4" key={`${type}-${idx}`}>
+					<h3 className="text-xl font-bold">{type}</h3>
+					<span className="break-all font-mono space-y-2">
+						<ExcerptText excerpt={excerpt} model={model} />
+					</span>
+				</div>
+			))}
 		</div>
 	);
 }