fix: footer / sidebar / deprecation alert

packages/website/src/components/DocContainer.tsx

@@ -132,15 +132,7 @@ export function DocContainer({
 			</Stack>
 			{(kind === 'Class' || kind === 'Interface') && (methods?.length || properties?.length) ? (
 				<MediaQuery smallerThan="lg" styles={{ display: 'none' }}>
-					<Aside
-						sx={(theme) => ({
-							zIndex: 1,
-							background: theme.colorScheme === 'dark' ? theme.colors.dark![8] : theme.colors.gray![0],
-						})}
-						hiddenBreakpoint="lg"
-						width={{ lg: 300 }}
-						withBorder={false}
-					>
+					<Aside hiddenBreakpoint="lg" width={{ lg: 250 }} withBorder>
 						<ScrollArea p="xs">
 							<TableOfContentItems properties={properties ?? []} methods={methods ?? []}></TableOfContentItems>
 						</ScrollArea>

packages/website/src/components/SidebarLayout.tsx

@@ -158,11 +158,6 @@ export function SidebarLayout({ packageName, data, children }: PropsWithChildren
 					) : null}
 				</Navbar>
 			}
-			// footer={
-			// 	<Footer height={60} p="md">
-			// 		Application footer
-			// 	</Footer>
-			// }
 			header={
 				<Header height={70} p="md">
 					<Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', height: '100%' }}>
@@ -197,11 +192,11 @@ export function SidebarLayout({ packageName, data, children }: PropsWithChildren
 				<Box
 					sx={{
 						position: 'relative',
-						minHeight: 'calc(100vh - 150px)',
+						minHeight: 'calc(100vh - 50px)',
 						zIndex: 1,
 						background: theme.colorScheme === 'dark' ? theme.colors.dark![8] : theme.colors.gray![0],
 					}}
-					p="sm"
+					p="lg"
 					pb={80}
 				>
 					{children}
@@ -219,7 +214,7 @@ export function SidebarLayout({ packageName, data, children }: PropsWithChildren
 						paddingRight: 324,
 
 						[theme.fn.smallerThan('lg')]: {
-							paddingRight: 14,
+							paddingRight: 24,
 						},
 
 						[theme.fn.smallerThan('md')]: {

packages/website/src/components/TableOfContentItems.tsx

@@ -64,7 +64,7 @@ export function TableOfContentItems({
 	});
 
 	return (
-		<Box>
+		<Box sx={{ wordBreak: 'break-all' }}>
 			<Group mb="md" ml={2}>
 				<VscListSelection size={25} />
 				<Text>Table of contents</Text>

packages/website/src/components/tsdoc/BlockComment.tsx

@@ -34,7 +34,7 @@ export function ExampleBlock({ children, exampleIndex }: ExampleBlockProps): JSX
 
 export function DeprecatedBlock({ children }: { children: ReactNode }): JSX.Element {
 	return (
-		<Alert icon={<VscWarning />} title="Deprecated" variant="filled" color="red" radius="xs">
+		<Alert icon={<VscWarning />} title="Deprecated" variant="outline" color="red" radius="xs">
 			{children}
 		</Alert>
 	);