From aae66c9b060435e147537a53ad587dadf3f96ca0 Mon Sep 17 00:00:00 2001
From: almeidx <github@almeidx.dev>
Date: Wed, 7 May 2025 21:44:24 +0100
Subject: [PATCH 1/4] fix: codeblock background

---
 apps/website/src/components/DocItem.tsx | 2 +-
 apps/website/src/components/DocNode.tsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/website/src/components/DocItem.tsx b/apps/website/src/components/DocItem.tsx
index fcf39938a913..c9794c093e73 100644
--- a/apps/website/src/components/DocItem.tsx
+++ b/apps/website/src/components/DocItem.tsx
@@ -75,7 +75,7 @@ export async function DocItem({
 
 			<Scrollbars className="border-base-neutral-200 dark:border-base-neutral-600 bg-base-neutral-100 dark:bg-base-neutral-900 rounded-sm border">
 				<SyntaxHighlighter
-					className="w-min bg-[#f3f3f4] py-4 text-sm dark:bg-[#121214]"
+					className="min-w-max bg-[#f3f3f4] py-4 text-sm dark:bg-[#121214]"
 					code={node.sourceExcerpt}
 					lang="typescript"
 				/>
diff --git a/apps/website/src/components/DocNode.tsx b/apps/website/src/components/DocNode.tsx
index ef792785a1fa..a2bf13dd6359 100644
--- a/apps/website/src/components/DocNode.tsx
+++ b/apps/website/src/components/DocNode.tsx
@@ -72,7 +72,7 @@ export async function DocNode({ node, version }: { readonly node?: any; readonly
 						key={`${language}-${text}-${idx}`}
 					>
 						<SyntaxHighlighter
-							className="w-min bg-[#f3f3f4] py-4 text-sm dark:bg-[#121214]"
+							className="min-w-max bg-[#f3f3f4] py-4 text-sm dark:bg-[#121214]"
 							code={text}
 							lang={language}
 						/>

From 20998f5562c77bc30e603ba436499fafcd313589 Mon Sep 17 00:00:00 2001
From: almeidx <github@almeidx.dev>
Date: Wed, 7 May 2025 21:54:40 +0100
Subject: [PATCH 2/4] fix: horizontal scroll on properties

---
 apps/website/src/components/PropertyNode.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/website/src/components/PropertyNode.tsx b/apps/website/src/components/PropertyNode.tsx
index dd873b159100..02ce22b0bb47 100644
--- a/apps/website/src/components/PropertyNode.tsx
+++ b/apps/website/src/components/PropertyNode.tsx
@@ -38,7 +38,7 @@ export async function PropertyNode({
 							<div className="flex flex-col gap-4">
 								<div className="flex place-content-between place-items-center gap-1">
 									<h3
-										className={`${ENV.IS_LOCAL_DEV || ENV.IS_PREVIEW ? 'scroll-mt-16' : 'scroll-mt-8'} group flex flex-col gap-2 px-2 font-mono font-semibold break-words`}
+										className={`${ENV.IS_LOCAL_DEV || ENV.IS_PREVIEW ? 'scroll-mt-16' : 'scroll-mt-8'} group flex flex-col gap-2 px-2 font-mono font-semibold break-all`}
 										id={property.displayName}
 									>
 										<Badges node={property} />

From b976c47a2ad21c9ced8b2d60c8b6ee75bc55e15d Mon Sep 17 00:00:00 2001
From: almeidx <github@almeidx.dev>
Date: Wed, 7 May 2025 21:59:03 +0100
Subject: [PATCH 3/4] fix: badge text wrapping

---
 apps/website/src/components/Badges.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/website/src/components/Badges.tsx b/apps/website/src/components/Badges.tsx
index ad3245a6ce7d..d1bf0c3366af 100644
--- a/apps/website/src/components/Badges.tsx
+++ b/apps/website/src/components/Badges.tsx
@@ -4,7 +4,7 @@ import type { PropsWithChildren } from 'react';
 export function Badge({ children, className = '' }: PropsWithChildren<{ readonly className?: string }>) {
 	return (
 		<span
-			className={`inline-flex place-items-center gap-1 rounded-full px-2 py-1 font-sans text-sm leading-none font-normal ${className}`}
+			className={`inline-flex place-items-center gap-1 rounded-full px-2 py-1 font-sans text-sm leading-none font-normal whitespace-nowrap ${className}`}
 		>
 			{children}
 		</span>
@@ -24,7 +24,7 @@ export async function Badges({ node }: { readonly node: any }) {
 	const isAny = isDeprecated || isProtected || isStatic || isAbstract || isReadonly || isOptional || isExternal;
 
 	return isAny ? (
-		<div className="mb-1 flex gap-3">
+		<div className="mb-1 flex flex-wrap gap-3">
 			{isDeprecated ? (
 				<Badge className="bg-red-500/20 text-red-500">
 					<AlertTriangle aria-hidden size={14} /> deprecated

From 73687bf7534ef56793f4c15ab867435670b80d75 Mon Sep 17 00:00:00 2001
From: almeidx <github@almeidx.dev>
Date: Wed, 7 May 2025 22:10:05 +0100
Subject: [PATCH 4/4] fix: wrap overload tab list

---
 apps/website/src/components/DocItem.tsx    | 4 ++--
 apps/website/src/components/EventNode.tsx  | 4 ++--
 apps/website/src/components/MethodNode.tsx | 4 ++--
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/apps/website/src/components/DocItem.tsx b/apps/website/src/components/DocItem.tsx
index c9794c093e73..5bd8962e717f 100644
--- a/apps/website/src/components/DocItem.tsx
+++ b/apps/website/src/components/DocItem.tsx
@@ -30,10 +30,10 @@ async function OverloadNode({
 
 	return (
 		<Tabs className="flex flex-col gap-4">
-			<TabList className="flex gap-2">
+			<TabList className="flex flex-wrap gap-2">
 				{node.overloads.map((overload: any) => (
 					<Tab
-						className="cursor-pointer rounded-full bg-neutral-800/10 px-2 py-1 font-sans text-sm leading-none font-normal text-neutral-800 hover:bg-neutral-800/20 data-[selected]:bg-neutral-500 data-[selected]:text-neutral-100 dark:bg-neutral-200/10 dark:text-neutral-200 dark:hover:bg-neutral-200/20 dark:data-[selected]:bg-neutral-500/70"
+						className="cursor-pointer rounded-full bg-neutral-800/10 px-2 py-1 font-sans text-sm leading-none font-normal whitespace-nowrap text-neutral-800 hover:bg-neutral-800/20 data-[selected]:bg-neutral-500 data-[selected]:text-neutral-100 dark:bg-neutral-200/10 dark:text-neutral-200 dark:hover:bg-neutral-200/20 dark:data-[selected]:bg-neutral-500/70"
 						id={`overload-${overload.displayName}-${overload.overloadIndex}`}
 						key={`overload-tab-${overload.displayName}-${overload.overloadIndex}`}
 					>
diff --git a/apps/website/src/components/EventNode.tsx b/apps/website/src/components/EventNode.tsx
index 020a6fc0ee91..f515de50277b 100644
--- a/apps/website/src/components/EventNode.tsx
+++ b/apps/website/src/components/EventNode.tsx
@@ -104,10 +104,10 @@ async function OverloadNode({
 }) {
 	return (
 		<Tabs className="flex flex-col gap-4">
-			<TabList className="flex gap-2">
+			<TabList className="flex flex-wrap gap-2">
 				{event.overloads.map((overload: any) => (
 					<Tab
-						className="cursor-pointer rounded-full bg-neutral-800/10 px-2 py-1 font-sans text-sm leading-none font-normal text-neutral-800 hover:bg-neutral-800/20 data-[selected]:bg-neutral-500 data-[selected]:text-neutral-100 dark:bg-neutral-200/10 dark:text-neutral-200 dark:hover:bg-neutral-200/20 dark:data-[selected]:bg-neutral-500/70"
+						className="cursor-pointer rounded-full bg-neutral-800/10 px-2 py-1 font-sans text-sm leading-none font-normal whitespace-nowrap text-neutral-800 hover:bg-neutral-800/20 data-[selected]:bg-neutral-500 data-[selected]:text-neutral-100 dark:bg-neutral-200/10 dark:text-neutral-200 dark:hover:bg-neutral-200/20 dark:data-[selected]:bg-neutral-500/70"
 						id={`overload-${overload.displayName}-${overload.overloadIndex}`}
 						key={`overload-tab-${overload.displayName}-${overload.overloadIndex}`}
 					>
diff --git a/apps/website/src/components/MethodNode.tsx b/apps/website/src/components/MethodNode.tsx
index da5a8ed9a23d..9ed68d3b50de 100644
--- a/apps/website/src/components/MethodNode.tsx
+++ b/apps/website/src/components/MethodNode.tsx
@@ -108,10 +108,10 @@ async function OverloadNode({
 }) {
 	return (
 		<Tabs className="flex flex-col gap-4">
-			<TabList className="flex gap-2">
+			<TabList className="flex flex-wrap gap-2">
 				{method.overloads.map((overload: any) => (
 					<Tab
-						className="cursor-pointer rounded-full bg-neutral-800/10 px-2 py-1 font-sans text-sm leading-none font-normal text-neutral-800 hover:bg-neutral-800/20 data-[selected]:bg-neutral-500 data-[selected]:text-neutral-100 dark:bg-neutral-200/10 dark:text-neutral-200 dark:hover:bg-neutral-200/20 dark:data-[selected]:bg-neutral-500/70"
+						className="cursor-pointer rounded-full bg-neutral-800/10 px-2 py-1 font-sans text-sm leading-none font-normal whitespace-nowrap text-neutral-800 hover:bg-neutral-800/20 data-[selected]:bg-neutral-500 data-[selected]:text-neutral-100 dark:bg-neutral-200/10 dark:text-neutral-200 dark:hover:bg-neutral-200/20 dark:data-[selected]:bg-neutral-500/70"
 						id={`overload-${overload.displayName}-${overload.overloadIndex}`}
 						key={`overload-tab-${overload.displayName}-${overload.overloadIndex}`}
 					>