fix(website): remove layout shift (#9062)

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

apps/website/src/components/documentation/section/ConstructorSection.tsx

@@ -2,7 +2,7 @@ import type { ApiConstructor } from '@microsoft/api-extractor-model';
 import { VscSymbolMethod } from '@react-icons/all-files/vsc/VscSymbolMethod';
 import { useCallback } from 'react';
 import { TSDoc } from '../tsdoc/TSDoc';
-import { ResponsiveSection } from './ResponsiveSection';
+import { DocumentationSection } from './DocumentationSection';
 import { ParameterTable } from '~/components/ParameterTable';
 
 export function ConstructorSection({ item }: { item: ApiConstructor }) {
@@ -19,12 +19,12 @@ export function ConstructorSection({ item }: { item: ApiConstructor }) {
 	);
 
 	return (
-		<ResponsiveSection icon={<VscSymbolMethod size={20} />} padded title="Constructor">
+		<DocumentationSection icon={<VscSymbolMethod size={20} />} padded title="Constructor">
 			<div className="flex flex-col gap-2">
 				<h4 className="break-all font-mono text-lg font-bold">{getShorthandName(item)}</h4>
 				{item.tsdocComment ? <TSDoc item={item} tsdoc={item.tsdocComment} /> : null}
 				<ParameterTable item={item} />
 			</div>
-		</ResponsiveSection>
+		</DocumentationSection>
 	);
 }

apps/website/src/components/documentation/section/DocumentationSection.tsx

@@ -0,0 +1,14 @@
+import type { SectionOptions } from '@discordjs/ui';
+import type { PropsWithChildren } from 'react';
+import { Section } from '../../Section';
+
+export function DocumentationSection(opts: PropsWithChildren<SectionOptions & { separator?: boolean }>) {
+	const { children, separator, ...props } = opts;
+
+	return (
+		<Section {...props}>
+			{children}
+			{separator ? <div className="border-light-900 dark:border-dark-100 -mx-8 mt-6 border-t-2" /> : null}
+		</Section>
+	);
+}

apps/website/src/components/documentation/section/MethodsSection.tsx

@@ -8,7 +8,7 @@ import type {
 import { ApiItemKind } from '@microsoft/api-extractor-model';
 import { VscSymbolMethod } from '@react-icons/all-files/vsc/VscSymbolMethod';
 import { useMemo, Fragment } from 'react';
-import { ResponsiveSection } from './ResponsiveSection';
+import { DocumentationSection } from './DocumentationSection';
 import { Method } from '~/components/model/method/Method';
 import { resolveMembers } from '~/util/members';
 
@@ -38,8 +38,8 @@ export function MethodsSection({ item }: { item: ApiItemContainerMixin }) {
 	);
 
 	return (
-		<ResponsiveSection icon={<VscSymbolMethod size={20} />} padded title="Methods">
+		<DocumentationSection icon={<VscSymbolMethod size={20} />} padded title="Methods">
 			<div className="flex flex-col gap-4">{methodItems}</div>
-		</ResponsiveSection>
+		</DocumentationSection>
 	);
 }

apps/website/src/components/documentation/section/ParametersSection.tsx

@@ -1,12 +1,12 @@
 import type { ApiParameterListMixin } from '@microsoft/api-extractor-model';
 import { VscSymbolParameter } from '@react-icons/all-files/vsc/VscSymbolParameter';
-import { ResponsiveSection } from './ResponsiveSection';
+import { DocumentationSection } from './DocumentationSection';
 import { ParameterTable } from '~/components/ParameterTable';
 
 export function ParameterSection({ item }: { item: ApiParameterListMixin }) {
 	return (
-		<ResponsiveSection icon={<VscSymbolParameter size={20} />} padded title="Parameters">
+		<DocumentationSection icon={<VscSymbolParameter size={20} />} padded title="Parameters">
 			<ParameterTable item={item} />
-		</ResponsiveSection>
+		</DocumentationSection>
 	);
 }

apps/website/src/components/documentation/section/PropertiesSection.tsx

@@ -1,12 +1,12 @@
 import type { ApiItemContainerMixin } from '@microsoft/api-extractor-model';
 import { VscSymbolProperty } from '@react-icons/all-files/vsc/VscSymbolProperty';
-import { ResponsiveSection } from './ResponsiveSection';
+import { DocumentationSection } from './DocumentationSection';
 import { PropertyList } from '~/components/PropertyList';
 
 export function PropertiesSection({ item }: { item: ApiItemContainerMixin }) {
 	return (
-		<ResponsiveSection icon={<VscSymbolProperty size={20} />} padded title="Properties">
+		<DocumentationSection icon={<VscSymbolProperty size={20} />} padded title="Properties">
 			<PropertyList item={item} />
-		</ResponsiveSection>
+		</DocumentationSection>
 	);
 }

apps/website/src/components/documentation/section/ResponsiveSection.tsx

@@ -1,24 +0,0 @@
-'use client';
-
-import type { SectionOptions } from '@discordjs/ui';
-import { Section } from '@discordjs/ui';
-import type { PropsWithChildren } from 'react';
-import { useMedia } from 'react-use';
-
-export function ResponsiveSection(opts: PropsWithChildren<SectionOptions & { separator?: boolean }>) {
-	const matches = useMedia('(max-width: 768px)', true);
-
-	const { children, separator, ...rest } = opts;
-
-	const props = {
-		...rest,
-		dense: matches,
-	};
-
-	return (
-		<Section {...props}>
-			{children}
-			{separator ? <div className="border-light-900 dark:border-dark-100 -mx-8 mt-6 border-t-2" /> : null}
-		</Section>
-	);
-}

apps/website/src/components/documentation/section/SummarySection.tsx

@@ -1,16 +1,16 @@
 import type { ApiDeclaredItem } from '@microsoft/api-extractor-model';
 import { VscListSelection } from '@react-icons/all-files/vsc/VscListSelection';
 import { TSDoc } from '../tsdoc/TSDoc';
-import { ResponsiveSection } from './ResponsiveSection';
+import { DocumentationSection } from './DocumentationSection';
 
 export function SummarySection({ item }: { item: ApiDeclaredItem }) {
 	return (
-		<ResponsiveSection icon={<VscListSelection size={20} />} padded separator title="Summary">
+		<DocumentationSection icon={<VscListSelection size={20} />} padded separator title="Summary">
 			{item.tsdocComment?.summarySection ? (
 				<TSDoc item={item} tsdoc={item.tsdocComment} />
 			) : (
 				<p>No summary provided.</p>
 			)}
-		</ResponsiveSection>
+		</DocumentationSection>
 	);
 }

apps/website/src/components/documentation/section/TypeParametersSection.tsx

@@ -1,12 +1,12 @@
 import type { ApiTypeParameterListMixin } from '@microsoft/api-extractor-model';
 import { VscSymbolParameter } from '@react-icons/all-files/vsc/VscSymbolParameter';
-import { ResponsiveSection } from './ResponsiveSection';
+import { DocumentationSection } from './DocumentationSection';
 import { TypeParamTable } from '~/components/TypeParamTable';
 
 export function TypeParameterSection({ item }: { item: ApiTypeParameterListMixin }) {
 	return (
-		<ResponsiveSection icon={<VscSymbolParameter size={20} />} padded title="Type Parameters">
+		<DocumentationSection icon={<VscSymbolParameter size={20} />} padded title="Type Parameters">
 			<TypeParamTable item={item} />
-		</ResponsiveSection>
+		</DocumentationSection>
 	);
 }

apps/website/src/components/model/enum/Enum.tsx

@@ -4,7 +4,7 @@ import { Documentation } from '../../documentation/Documentation';
 import { EnumMember } from './EnumMember';
 import { Panel } from '~/components/Panel';
 import { ObjectHeader } from '~/components/documentation/ObjectHeader';
-import { ResponsiveSection } from '~/components/documentation/section/ResponsiveSection';
+import { DocumentationSection } from '~/components/documentation/section/DocumentationSection';
 import { SummarySection } from '~/components/documentation/section/SummarySection';
 
 export function Enum({ item }: { item: ApiEnum }) {
@@ -12,7 +12,7 @@ export function Enum({ item }: { item: ApiEnum }) {
 		<Documentation>
 			<ObjectHeader item={item} />
 			<SummarySection item={item} />
-			<ResponsiveSection icon={<VscSymbolEnum size={20} />} padded title="Members">
+			<DocumentationSection icon={<VscSymbolEnum size={20} />} padded title="Members">
 				<div className="flex flex-col gap-4">
 					{item.members.map((member) => (
 						<Panel key={member.containerKey}>
@@ -20,7 +20,7 @@ export function Enum({ item }: { item: ApiEnum }) {
 						</Panel>
 					))}
 				</div>
-			</ResponsiveSection>
+			</DocumentationSection>
 		</Documentation>
 	);
 }