refactor: better spacing

packages/website/src/components/DocContainer.tsx

@@ -133,7 +133,7 @@ export function DocContainer({
 			{(kind === 'Class' || kind === 'Interface') && (methods?.length || properties?.length) ? (
 				<MediaQuery smallerThan="lg" styles={{ display: 'none' }}>
 					<Aside hiddenBreakpoint="lg" width={{ lg: 250 }} withBorder>
-						<ScrollArea p="xs" offsetScrollbars>
+						<ScrollArea p="sm" offsetScrollbars>
 							<TableOfContentItems properties={properties ?? []} methods={methods ?? []}></TableOfContentItems>
 						</ScrollArea>
 					</Aside>

packages/website/src/components/ParameterTable.tsx

@@ -19,7 +19,7 @@ export function ParameterTable({ data }: { data: ParameterDocumentation[] }) {
 
 	return (
 		<Box>
-			<ScrollArea offsetScrollbars>
+			<ScrollArea pb="xs" offsetScrollbars>
 				<Table columns={['Name', 'Type', 'Optional', 'Description']} rows={rows} columnStyles={columnStyles} />
 			</ScrollArea>
 		</Box>

packages/website/src/components/SidebarLayout.tsx

@@ -140,12 +140,12 @@ export function SidebarLayout({
 
 	return (
 		<AppShell
-			sx={{
+			sx={(theme) => ({
 				main: {
 					background: theme.colorScheme === 'dark' ? theme.colors.dark![8] : theme.colors.gray![0],
 					overflowX: 'auto',
 				},
-			}}
+			})}
 			padding={0}
 			navbarOffsetBreakpoint="md"
 			asideOffsetBreakpoint="md"
@@ -213,7 +213,16 @@ export function SidebarLayout({
 				</Navbar>
 			}
 			header={
-				<Header height={70} p="md">
+				<Header
+					sx={(theme) => ({
+						boxShadow:
+							theme.colorScheme === 'dark'
+								? '0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)'
+								: 'unset',
+					})}
+					height={70}
+					p="md"
+				>
 					<Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', height: '100%' }}>
 						<Box>
 							<MediaQuery largerThan="md" styles={{ display: 'none' }}>
@@ -244,12 +253,13 @@ export function SidebarLayout({
 		>
 			<article>
 				<Box
-					sx={{
+					sx={(theme) => ({
 						position: 'relative',
 						minHeight: 'calc(100vh - 50px)',
 						zIndex: 1,
 						background: theme.colorScheme === 'dark' ? theme.colors.dark![8] : theme.colors.gray![0],
-					}}
+						boxShadow: '0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)',
+					})}
 					p="lg"
 					pb={80}
 				>
@@ -257,7 +267,7 @@ export function SidebarLayout({
 				</Box>
 				<Box sx={{ height: 200 }}></Box>
 				<Box
-					sx={{
+					sx={(theme) => ({
 						position: 'fixed',
 						bottom: 0,
 						left: 0,
@@ -274,7 +284,7 @@ export function SidebarLayout({
 						[theme.fn.smallerThan('md')]: {
 							paddingLeft: 24,
 						},
-					}}
+					})}
 					pt={70}
 				>
 					<Center>

packages/website/src/components/TableOfContentItems.tsx

@@ -67,9 +67,9 @@ export function TableOfContentItems({
 
 	return (
 		<Box sx={{ wordBreak: 'break-all' }}>
-			<Group mb="md" ml={2}>
+			<Group mt={2} mb="sm" ml={2}>
 				<VscListSelection size={25} />
-				<Text>Table of contents</Text>
+				<Text weight={600}>Table of contents</Text>
 			</Group>
 			<Stack spacing={0}>
 				{propertyItems.length ? (

packages/website/src/components/TypeParamTable.tsx

@@ -1,4 +1,4 @@
-import { Box, ScrollArea } from '@mantine/core';
+import { ScrollArea } from '@mantine/core';
 import { HyperlinkedText } from './HyperlinkedText';
 import { Table } from './Table';
 import { TSDoc } from './tsdoc/TSDoc';
@@ -20,14 +20,12 @@ export function TypeParamTable({ data }: { data: TypeParameterData[] }) {
 	};
 
 	return (
-		<Box sx={{ overflowX: 'auto' }}>
+		<ScrollArea pb="xs" offsetScrollbars>
-			<ScrollArea offsetScrollbars>
 			<Table
 				columns={['Name', 'Constraints', 'Optional', 'Default', 'Description']}
 				rows={rows}
 				columnStyles={rowElements}
 			/>
 		</ScrollArea>
-		</Box>
 	);
 }