fix/layout-width (#19)

Reviewed-on: #19
Co-authored-by: GauthierWebDev <gauthier@gauthierdaniels.fr>
Co-committed-by: GauthierWebDev <gauthier@gauthierdaniels.fr>

app/components/Callout.tsx

@@ -42,7 +42,7 @@ export default function Callout(props: {
 	return (
 		<div
 			class={clsx(
-				"my-8 flex flex-col rounded-3xl p-6",
+				"my-8 flex flex-col w-full rounded-3xl p-6",
 				styles[props.type || "note"].container,
 				{ "cursor-pointer": props.collapsible },
 			)}

app/components/PrevNextLinks.tsx

@@ -111,7 +111,7 @@ export function PrevNextLinks() {
 	if (getNeighboringLinks().length === 0) return null;
 
 	return (
-		<dl class="mt-12 flex gap-4 border-t border-slate-200 pt-6">
+		<dl class="mt-12 mx-4 lg:mr-0 flex gap-4 border-t border-slate-200 pt-6">
 			{getNeighboringLinks()[0] && (
 				<PageLink
 					dir="previous"

app/components/SmoothScroll.tsx

@@ -72,6 +72,8 @@ export function SmoothScroll(props: SmoothScrollProps) {
 
 	const handleWheel = (event: WheelEvent) => {
 		if (isMobile()) return;
+		if (event.ctrlKey) return;
+		if (event.metaKey) return;
 
 		const hoveredElement = document.elementFromPoint(
 			event.clientX,

app/components/Snippet.tsx

@@ -131,25 +131,25 @@ export function Snippet(props: SnippetProps) {
 					</div>
 				</nav>
 
-				{selectedTab() && (
-					<div class="mt-6">
-						{selectedTab().code && (
+				<For each={props.snippets}>
+					{(tab) => (
+						<div class={clsx("mt-6", isActive(tab) ? "block" : "hidden")}>
+							{tab.code && (
 								<Highlight
 									class={clsx(
 										"!pt-0 !px-1 max-h-96 overflow-auto mb-2",
 										props.dark && "dark text-white",
 									)}
-								language={(selectedTab() as SnippetTab).codeLanguage}
-								withLineNumbers={(selectedTab() as SnippetTab).withLineNumbers}
+									language={tab.codeLanguage}
+									withLineNumbers={tab.withLineNumbers}
 								>
-								{(selectedTab() as SnippetTab).code}
+									{tab.code}
 								</Highlight>
 							)}
-						{!selectedTab().code && (
-							<div class="pb-1">{(selectedTab() as CommonTab).children}</div>
-						)}
+							{!tab.code && <div class="pb-1">{tab.children}</div>}
 						</div>
 					)}
+				</For>
 			</div>
 		</div>
 	);

app/layouts/DocsLayout.tsx

@@ -25,7 +25,7 @@ export function DocsLayout(props: DocsLayoutProps) {
 			<div class="flex">
 				<main
 					id="article-content"
-					class="max-w-2xl min-w-0 flex-auto px-4 py-16 lg:max-w-none lg:pr-0 lg:pl-8 xl:px-16 grow"
+					class="max-w-2xl lg:max-w-none w-10 min-w-0 flex-auto px-4 py-16 lg:pr-0 lg:pl-8 xl:px-16 grow"
 				>
 					<article>
 						<DocsHeader
@@ -34,12 +34,12 @@ export function DocsLayout(props: DocsLayoutProps) {
 						/>
 						<Prose>{props.children}</Prose>
 					</article>
-					<PrevNextLinks />
 				</main>
 
 				<TableOfContents />
 			</div>
 
+			<PrevNextLinks />
 			<LatestDocs />
 		</>
 	);

app/partials/LatestDocs.tsx

@@ -8,7 +8,7 @@ export function LatestDocs() {
 	const data = useData<Data>();
 
 	return (
-		<section class="bg-violet-200 rounded-md p-4 m-4 lg:m-6">
+		<section class="bg-violet-200 rounded-md p-4 m-4 lg:mr-0">
 			<h2 class="font-display text-3xl tracking-tight text-slate-900 text-center">
 				Dernières documentations
 			</h2>