refactor: properly handling spacing

packages/website/src/components/Comment.tsx

@@ -16,7 +16,7 @@ export function CommentSection({ node, textClassName }: RemarksBlockProps): JSX.
 	const createNode = (node: ReturnType<CommentNode['toJSON']>, idx?: number): ReactNode => {
 		switch (node.kind) {
 			case 'PlainText':
-				return <span>{(node as ReturnType<PlainTextCommentNode['toJSON']>).text}</span>;
+				return <span key={idx}>{(node as ReturnType<PlainTextCommentNode['toJSON']>).text}</span>;
 			case 'Paragraph':
 				return (
 					<p key={idx} className={textClassName}>
@@ -24,7 +24,7 @@ export function CommentSection({ node, textClassName }: RemarksBlockProps): JSX.
 					</p>
 				);
 			case 'SoftBreak':
-				return <br />;
+				return <br key={idx} />;
 			case 'LinkTag': {
 				const { codeDestination, urlDestination, text } = node as ReturnType<LinkTagCommentNode['toJSON']>;
 

packages/website/src/components/DocContainer.tsx

@@ -42,24 +42,28 @@ export function DocContainer({
 			</div>
 
 			<div className="min-h-full overflow-y-auto overflow-x-clip px-10 pt-5 pb-10">
-				<Section iconElement={<VscListSelection />} title="Summary" className="dark:text-white">
+				<Section iconElement={<VscListSelection />} title="Summary" className="dark:text-white mb-5">
 					{summary ? (
 						<CommentSection textClassName="text-dark-100 dark:text-gray-300" node={summary} />
 					) : (
 						<p className="text-dark-100 dark:text-gray-300">No summary provided.</p>
 					)}
 				</Section>
-				<SyntaxHighlighter
+				<div className={extendsTokens?.length ? 'mb-2' : 'mb-10'}>
-					wrapLines
+					<SyntaxHighlighter
-					wrapLongLines
+						wrapLines
-					language="typescript"
+						wrapLongLines
-					style={vscDarkPlus}
+						language="typescript"
-					codeTagProps={{ style: { fontFamily: 'JetBrains Mono' } }}
+						style={vscDarkPlus}
-				>
+						codeTagProps={{ style: { fontFamily: 'JetBrains Mono' } }}
-					{excerpt}
+					>
-				</SyntaxHighlighter>
+						{excerpt}
+					</SyntaxHighlighter>
+				</div>
 				{extendsTokens?.length ? (
-					<div className="flex flex-row items-center dark:text-white gap-3">
+					<div
+						className={`flex flex-row items-center dark:text-white gap-3 ${implementsTokens?.length ? '' : 'mb-10'}`}
+					>
 						<h3 className="m-0">Extends</h3>
 						<h3 className="m-0">{CodeListingSeparatorType.Type}</h3>
 						<p className="font-mono break-all">
@@ -68,7 +72,7 @@ export function DocContainer({
 					</div>
 				) : null}
 				{implementsTokens?.length ? (
-					<div className="flex flex-row items-center dark:text-white gap-3">
+					<div className={`flex flex-row items-center dark:text-white gap-3 mb-10`}>
 						<h3 className="m-0">Implements</h3>
 						<h3 className="m-0">{CodeListingSeparatorType.Type}</h3>
 						<p className="font-mono break-all">

packages/website/src/components/Section.tsx

@@ -10,6 +10,7 @@ export interface SectionProps {
 	defaultClosed?: boolean;
 	iconElement?: JSX.Element;
 	showSeparator?: boolean;
+	margin?: boolean;
 }
 
 export function Section({
@@ -19,6 +20,7 @@ export function Section({
 	defaultClosed,
 	iconElement,
 	showSeparator = true,
+	margin = true,
 }: SectionProps) {
 	const [collapsed, setCollapsed] = useState(defaultClosed ?? false);
 
@@ -47,8 +49,16 @@ export function Section({
 									height: 'auto',
 									paddingLeft: '1.75rem',
 									paddingRight: '1.75rem',
+									marginBottom: margin ? '1.25rem' : 0,
+								},
+								collapsed: {
+									opacity: 0,
+									height: 0,
+									paddingLeft: '1.75rem',
+									paddingRight: '1.75rem',
+									paddingBottom: 0,
+									marginBottom: 0,
 								},
-								collapsed: { opacity: 0, height: 0, paddingLeft: '1.75rem', paddingRight: '1.75rem', paddingBottom: 0 },
 							}}
 						>
 							{children}