fix: correctly handle overflowing content

packages/website/src/components/DocContainer.tsx

@@ -38,7 +38,7 @@ export function DocContainer({
 
 	return (
 		<Stack>
-			<Title order={2} ml="xs">
+			<Title order={2} ml="xs" className="break-all">
 				<Group>
 					{generateIcon(kind)}
 					{name}

packages/website/src/components/ParameterTable.tsx

@@ -1,3 +1,4 @@
+import { Box } from '@mantine/core';
 import { HyperlinkedText } from './HyperlinkedText';
 import { Table } from './Table';
 import type { ParameterDocumentation } from '~/util/parse.server';
@@ -15,5 +16,9 @@ export function ParameterTable({ data }: { data: ParameterDocumentation[] }) {
 		Type: 'font-mono',
 	};
 
-	return <Table columns={['Name', 'Type', 'Optional', 'Description']} rows={rows} columnStyles={columnStyles} />;
+	return (
+		<Box className="overflow-x-auto">
+			<Table columns={['Name', 'Type', 'Optional', 'Description']} rows={rows} columnStyles={columnStyles} />
+		</Box>
+	);
 }

packages/website/src/components/SidebarLayout.tsx

@@ -123,7 +123,7 @@ export function SidebarLayout({ packageName, data, children }: PropsWithChildren
 									<Menu
 										onOpen={() => setOpenedPicker(true)}
 										onClose={() => setOpenedPicker(false)}
-										radius="md"
+										radius="xs"
 										width="target"
 									>
 										<Menu.Target>

packages/website/src/components/TypeParamTable.tsx

@@ -1,3 +1,4 @@
+import { Box } from '@mantine/core';
 import { HyperlinkedText } from './HyperlinkedText';
 import { Table } from './Table';
 import type { TypeParameterData } from '~/util/parse.server';
@@ -18,10 +19,12 @@ export function TypeParamTable({ data }: { data: TypeParameterData[] }) {
 	};
 
 	return (
-		<Table
-			columns={['Name', 'Constraints', 'Optional', 'Default', 'Description']}
-			rows={rows}
-			columnStyles={rowElements}
-		/>
+		<Box className="overflow-x-auto">
+			<Table
+				columns={['Name', 'Constraints', 'Optional', 'Default', 'Description']}
+				rows={rows}
+				columnStyles={rowElements}
+			/>
+		</Box>
 	);
 }