From f686c83b183b466f6c9d9e0dbc44c28d560c9c69 Mon Sep 17 00:00:00 2001
From: Almeida <github@almeidx.dev>
Date: Wed, 7 May 2025 22:17:09 +0100
Subject: [PATCH] fix: codeblock background and other mobile issues (#10892)

* fix: codeblock background

* fix: horizontal scroll on properties

* fix: badge text wrapping

* fix: wrap overload tab list
---
 apps/website/src/components/Badges.tsx       | 4 ++--
 apps/website/src/components/DocItem.tsx      | 6 +++---
 apps/website/src/components/DocNode.tsx      | 2 +-
 apps/website/src/components/EventNode.tsx    | 4 ++--
 apps/website/src/components/MethodNode.tsx   | 4 ++--
 apps/website/src/components/PropertyNode.tsx | 2 +-
 6 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/apps/website/src/components/Badges.tsx b/apps/website/src/components/Badges.tsx
index ad3245a6c..d1bf0c336 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
diff --git a/apps/website/src/components/DocItem.tsx b/apps/website/src/components/DocItem.tsx
index fcf39938a..5bd8962e7 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}`}
 					>
@@ -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 ef792785a..a2bf13dd6 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}
 						/>
diff --git a/apps/website/src/components/EventNode.tsx b/apps/website/src/components/EventNode.tsx
index 020a6fc0e..f515de502 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 da5a8ed9a..9ed68d3b5 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}`}
 					>
diff --git a/apps/website/src/components/PropertyNode.tsx b/apps/website/src/components/PropertyNode.tsx
index dd873b159..02ce22b0b 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} />