app/components/Highlight.tsx

@@ -102,10 +102,7 @@ export const Highlight: ParentComponent<Props> = (_props) => {
 			)}
 
 			<pre
-				class={clsx(
-					"not-prose w-full prism-code flex overflow-x-auto",
-					languageClass(),
-				)}
+				class={clsx("not-prose h-full w-full prism-code flex", languageClass())}
 			>
 				<code
 					class={clsx("leading-6", props.withLineNumbers ? "px-4" : "pr-4")}

app/components/SmoothScroll.tsx

@@ -48,10 +48,40 @@ export function SmoothScroll(props: SmoothScrollProps) {
 		return regex.test(navigator.userAgent);
 	};
 
+	const isElementScrollable = (element: HTMLElement) => {
+		if (!element) return false;
+		return element.scrollHeight > element.clientHeight;
+	};
+
+	const findScrollableParent = (element: HTMLElement) => {
+		let currentElement: HTMLElement | null = element;
+
+		while (currentElement) {
+			if (isElementScrollable(currentElement)) {
+				return currentElement;
+			}
+
+			currentElement = currentElement.parentElement;
+		}
+
+		return null;
+	};
+
 	const handleWheel = (event: WheelEvent) => {
 		if (isMobile()) return;
 
+		const hoveredElement = document.elementFromPoint(
+			event.clientX,
+			event.clientY,
+		) as HTMLElement;
+		if (findScrollableParent(hoveredElement)) {
+			if (animationFrameId !== null) cancelAnimationFrame(animationFrameId);
+			return;
+		}
+
 		event.preventDefault();
+		event.stopPropagation();
+
 		if (isScrolling()) {
 			if (animationFrameId !== null) {
 				cancelAnimationFrame(animationFrameId);

app/components/Snippet.tsx

@@ -38,6 +38,9 @@ type SnippetProps = {
 };
 
 export function Snippet(props: SnippetProps) {
+	let tabs: HTMLDivElement | undefined;
+	let nav: HTMLDivElement | undefined;
+
 	const [selectedTab, setSelectedTab] = createSignal<SnippetTab | CommonTab>(
 		props.snippets[0],
 	);
@@ -49,6 +52,27 @@ export function Snippet(props: SnippetProps) {
 	const selectTab = (name: string) => {
 		const tab = props.snippets.find((tab) => tab.name === name);
 		if (tab) setSelectedTab(tab);
+
+		if (!tabs || !nav) return;
+
+		const navWidth = nav.offsetWidth || 0;
+		const tabsWidth = tabs.scrollWidth;
+
+		if (tabsWidth > navWidth) {
+			const tabElement: HTMLDivElement | null = tabs.querySelector(
+				`div[data-tab="${name}"]`,
+			);
+			if (!tabElement) return;
+
+			const tabOffsetLeft = tabElement.offsetLeft;
+			const tabWidth = tabElement.offsetWidth;
+			const scrollLeft = Math.max(
+				0,
+				tabOffsetLeft - navWidth / 2 + tabWidth / 2,
+			);
+
+			nav.scrollTo({ left: scrollLeft, behavior: "smooth" });
+		}
 	};
 
 	const canBeSelected = (tab: SnippetTab | CommonTab) => {
@@ -68,10 +92,12 @@ export function Snippet(props: SnippetProps) {
 			<div class="pt-4 pl-4">
 				<TrafficLightsIcon class="h-2.5 w-auto stroke-slate-500/30" />
 
-				<div class="mt-4 flex space-x-2 text-xs overflow-x-auto">
+				<nav ref={nav} class="overflow-x-auto">
+					<div ref={tabs} class="mt-4 flex space-x-2 text-xs w-max mb-2">
 						<For each={props.snippets}>
 							{(tab) => (
 								<div
+									data-tab={tab.name}
 									class={clsx(
 										"flex h-6 rounded-full",
 										{ "cursor-pointer": canBeSelected(tab) && !isActive(tab) },
@@ -103,13 +129,14 @@ export function Snippet(props: SnippetProps) {
 							)}
 						</For>
 					</div>
+				</nav>
 
 				{selectedTab() && (
 					<div class="mt-6">
 						{selectedTab().code && (
 							<Highlight
 								class={clsx(
-									"!pt-0 !px-1 max-h-96 overflow-auto",
+									"!pt-0 !px-1 max-h-96 overflow-auto mb-2",
 									props.dark && "dark text-white",
 								)}
 								language={(selectedTab() as SnippetTab).codeLanguage}