fix: prevent horizontal overflow on small screens for previewed code blocks

Author: 3w36zj6

src/components/templates/BaseTemplate.tsx

@@ -176,7 +176,7 @@ export const BaseTemplate: FC<BaseTemplateProps> = ({
 						x-transition:leave-end="opacity-0"
 						x-on:click="sidebarOpen = false"
 					/>
-					<div class="container mx-auto max-w-8xl px-4 sm:px-6 lg:px-8 flex relative">
+					<div class="container mx-auto max-w-8xl px-4 sm:px-6 lg:px-8 lg:flex relative">
 						<div
 							x-cloak
 							class="fixed inset-y-0 left-0 w-64 bg-white shadow-xl z-30 transform transition-transform duration-300 ease-in-out lg:hidden"

src/globals.css

@@ -98,7 +98,7 @@ samp {
 }
 
 .previewed-code pre {
-	@apply flex-1 m-0 rounded-none whitespace-pre lg:flex-[1_0_auto];
+	@apply flex-1 m-0 rounded-none whitespace-pre overflow-x-auto lg:flex-[1_0_auto];
 }
 
 .previewed-code .preview {